Awesome
mdbsnippets README
Visual Studio Code extension with MDBootstrap snippets.
What is MDB-VSCode-snippets extension?
MDB-VSCode-snippets is a MDBootstrap users toolkit for boosting working with MDB products.
With MDB-VSCode-snippets you can use shortcuts instead of writing whole code.
!mdb-breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
Instalation
- Launch Visual Studio Code
- Go to extensions tab - Ctrl-Shift-X (Windows, Linux) or Cmd-Shift-X (OSX)
- Search for 'mdbsnippets'
- Choose the extension
- Install extension and reload Visual Studio Code
Shortcuts
- General
- Components
- Navigation
- Forms
- Tables
- Modals
- Plugins
General
| Name of component | Shortcut |
|---|
| MDB HTML Template | !mdb |
Alerts
| Name of component | Shortcut |
|---|
| MDB Primary Alert | !mdb-alert-primary |
| MDB Secondary Alert | !mdb-alert-secondary |
| MDB Success Alert | !mdb-alert-success |
| MDB Danger Alert | !mdb-alert-danger |
| MDB Warning Alert | !mdb-alert-warning |
| MDB Info Alert | !mdb-alert-info |
| MDB Light Alert | !mdb-alert-light |
| MDB Dark Alert | !mdb-alert-dark |
Buttons
| Name of component | Shortcut |
|---|
| Primary Btn | !mdb-button-primary |
| Secondary Btn | !mdb-button-secondary |
| Succes Btn | !mdb-button-succces |
| Danger Btn | !mdb-button-danger |
| Warning Btn | !mdb-button-warning |
| Info Btn | !mdb-button-info |
| Light Btn | !mdb-button-light |
| Dark Btn | !mdb-button-dark |
| Link Btn | !mdb-button-link |
| Gradient Peach Btn | !mdb-button-gr-pe |
| Gradient Blue Btn | !mdb-button-gr-bl |
| Gradient Aqua Btn | !mdb-button-gr-aq |
| Outline Primary Btn | !mdb-button-ou-pr |
| Large Btn | !mdb-button-lg |
| Small Btn | !mdb-button-sm |
| Block Btn | !mdb-button-bloc |
| Checkbox Btn | !mdb-button-check |
| Radio Btn | !mdb-button-radio |
Cards
| Name of component | Shortcut |
|---|
| Basic Card | !mdb-card |
Dropdowns
| Name of component | Shortcut |
|---|
| MDB Primary Dropdown | !mdb-dropdown-primary |
Loaders
| Name of component | Shortcut |
|---|
| Material Loader | !mdb-loader |
| Default Loader | !mdb-loader-df |
Panels
| Name of component | Shortcut |
|---|
| Basic Panel | !mdb-panel |
Breadcrumbs
| Name of component | Shortcut |
|---|
| Basic Breadcrumb | !mdb-breadcrumb |
Footer
| Name of component | Shortcut |
|---|
| Basic Footer | !mdb-footer |
Hamburger Menu
| Name of component | Shortcut |
|---|
| Hamburger Menu | !mdb-hamburger-menu |
Mega Menu
| Name of component | Shortcut |
|---|
| Mega Menu | !mdb-megamenu |
Navs
| Name of component | Shortcut |
|---|
| MDB Nav | !mdb-nav |
Navbar
| Name of component | Shortcut |
|---|
| MDB Navbar | !mdb-navbar |
Scrollspy
| Name of component | Shortcut |
|---|
| Scrollspy | !mdb-scrollspy |
Sidenav
| Name of component | Shortcut |
|---|
| Sidenav | !mdb-side-nav |
Checkbox
| Name of component | Shortcut |
|---|
| Material Checkbox | !mdb-checkbox |
| Default Checkbox | !mdb-checkbox-default |
| Inline Checkboxes | !mdb-checkbox-inline |
Inputs
| Name of component | Shortcut |
|---|
| Material Input | !mdb-input |
Slider
| Name of component | Shortcut |
|---|
| Basic Slider | !mdb-slider |
Switch
| Name of component | Shortcut |
|---|
| Material Switch | !mdb-switch |
Basic Modals
| Name of component | Shortcut |
|---|
| Basic Example | !mdb-modal |
Advanced Modals
| Name of component | Shortcut |
|---|
| Modal Cookies | !mdb-modal-cookies |
Basic Tables
| Name of component | Shortcut |
|---|
| Basic Example | !mdb-table |
| Striped Table | !mdb-table-striped |
| Bordered Table | !mdb-table-bordered |
IFrame
| Name of component | Shortcut |
|---|
| YouTube iFrame | !mdb-iFrame-yt |
| Vimeo iFrame | !mdb-iFrame-vimeo |
Edge Header
| Name of component | Shortcut |
|---|
| Edge Header | !mdb-edge-header |
Versions
[1.4.7]
Update template to MDB 4.19.1 version.
[1.4.6]
Update template to MDB 4.19.0 version.
[1.4.5]
Update template to MDB 4.18.0 version.
[1.4.4]
Update template to MDB 4.17.0 version.
1.4.3
Update template to MDB 4.16.0 version.
1.4.2
Update template to MDB 4.15.0 version.
1.4.1
Update template to MDB 4.14.1 version.
1.4.0
Update template to MDB 4.14.0 version.
1.3.0
New snippets for MDB components and update template to MDB 4.13.0 version.
1.2.0
New snippets for MDB components and update template to MDB 4.12.0 version.
1.1.0
New snippets for MDB components.
1.0.0
Initial release of MDBootstrap-VSCode-snippets.
For more information
Enjoy!