├── .vscode
    └── launch.json
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── images
    ├── mdb-angular-logo.png
    └── snippets-usage.gif
├── package.json
└── snippets
    ├── snippets.json
    └── typescript.json


/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | // A launch configuration that launches the extension inside a new window
 2 | // Use IntelliSense to learn about possible attributes.
 3 | // Hover to view descriptions of existing attributes.
 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 | {
 6 | 	"version": "0.2.0",
 7 |     "configurations": [
 8 |         {
 9 |             "name": "Extension",
10 |             "type": "extensionHost",
11 |             "request": "launch",
12 |             "runtimeExecutable": "${execPath}",
13 |             "args": [
14 |                 "--extensionDevelopmentPath=${workspaceFolder}"
15 |             ]
16 |         }
17 |     ]
18 | }


--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
1 | .vscode/**
2 | .vscode-test/**
3 | .gitignore
4 | vsc-extension-quickstart.md
5 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | 
3 | All notable changes to the "mdb-angular-snippets" extension will be documented in this file.
4 | 
5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
6 | 
7 | ## [Unreleased]
8 | 
9 | - Initial release


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # MDB Angular Code Snippets
 2 | 
 3 | This extension adds snippets for MDB Angular - Angular Bootstrap UI KIT
 4 | 
 5 | <!-- ![Usage](https://github.com/mdbootstrap/mdb-angular-vscode-snippets/raw/master/images/snippets-usage.gif) -->
 6 | ![Usage](./images/snippets-usage.gif)
 7 | 
 8 | ## Usage
 9 | 
10 | Type part of snippet selector and press `enter`.
11 | 
12 | Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (Mac OS) to display snippets list.
13 | 
14 | ## Snippets list
15 | 
16 | You can find list of available snippets below:
17 | 
18 | 
19 | ### HTML Snippets
20 | 
21 | | Snippet                         | Description                                |
22 | | --------------------            | ------------------------------------------ |
23 | | `a-mdb-button`                  | MDB Button component                       |
24 | | `a-mdb-card`                    | MDB Card component                         |
25 | | `a-mdb-dropdown-default`        | MDB Dropdown component (default version)   |
26 | | `a-mdb-dropdown-material`       | MDB Dropdown component (material version)  |
27 | | `a-mdb-jumbotron`               | MDB Jumbotron component                    |
28 | | `a-mdb-list-group`              | MDB List group component                   |
29 | | `a-mdb-spinner`                 | MDB Spinner component (default version)    |
30 | | `a-mdb-spinner-material`        | MDB Spinner component (material version)   |
31 | | `a-mdb-panel`                   | MDB Panel component                        |
32 | | `a-mdb-pagination`              | MDB Pagination component                   |
33 | | `a-mdb-progress`                | MDB Progress component (default version)   |
34 | | `a-mdb-progress-material`       | MDB Progress component (material version)  |
35 | | `a-mdb-tabset`                  | MDB Tabset component                       |
36 | | `a-mdb-tab`                     | MDB Tab component                          |
37 | | `a-mdb-badge`                   | MDB Badge component                        |
38 | | `a-mdb-accordion`               | MDB Accordion component                    |
39 | | `a-mdb-accordion-item`          | MDB Accordion item component               |
40 | | `a-mdb-collapse`                | MDB Collapse component                     |
41 | | `a-mdb-basic-footer`            | MDB Footer component (basic version)       |
42 | | `a-mdb-hamburger-menu`          | MDB Hamburger menu component               |
43 | | `a-mdb-navs`                    | MDB Navs component                         |
44 | | `a-mdb-navbar-basic`            | MDB Navbar component (basic version)       |
45 | | `a-mdb-sidenav-basic`           | MDB Sidenav component (basic version)      |
46 | | `a-mdb-input`                   | MDB Input component                        |
47 | | `a-mdb-select`                  | MDB Select component                       |
48 | | `a-mdb-multiselect`             | MDB Multiselect component                  |
49 | | `a-mdb-search`                  | MDB Search component                       |
50 | | `a-mdb-slider-default`          | MDB Slider component (default version)     |
51 | | `a-mdb-slider-material`         | MDB Slider component (material version)    |
52 | | `a-mdb-switch-material`         | MDB Switch component (material version)    |
53 | | `a-mdb-switch-material`         | MDB Switch component (material version)    |
54 | | `a-mdb-textarea`                | MDB Textarea component                     |
55 | | `a-mdb-time-picker`             | MDB Time picker component                  |
56 | | `a-mdb-modal-basic`             | MDB Modal basic component                  |
57 | | `a-mdb-modal-cookies`           | MDB Modal cookies component                |
58 | 
59 | 
60 | ## Installation
61 | 
62 | 1. Launch Visual Studio Code
63 | 2. Go to extensions tab - `Ctrl`-`Shift`-`X` (Windows, Linux) or `Cmd`-`Shift`-`X` (OSX)
64 | 3. Search for 'MDB Angular Snippets'
65 | 4. Choose the extension
66 | 5. Install extension and reload Visual Studio Code


--------------------------------------------------------------------------------
/images/mdb-angular-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/mdb-angular-vscode-snippets/16a0b1175ac69c92daf32e0cd385ec252343b1ce/images/mdb-angular-logo.png


--------------------------------------------------------------------------------
/images/snippets-usage.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/mdb-angular-vscode-snippets/16a0b1175ac69c92daf32e0cd385ec252343b1ce/images/snippets-usage.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "mdb-angular-snippets",
 3 |     "publisher": "MDB",
 4 |     "displayName": "MDB Angular Snippets",
 5 |     "description": "Code snippets for MDB Angular - Angular Bootstrap UI KIT",
 6 |     "icon": "images/mdb-angular-logo.png",
 7 |     "repository": {
 8 | 		"type": "git",
 9 | 		"url": "https://github.com/mdbootstrap/mdb-angular-vscode-snippets.git"
10 |     },
11 |     "keywords": [
12 | 		"Angular",
13 | 		"Angular 2",
14 |         "Angular 7",
15 |         "Angular 8",
16 |         "MDB",
17 |         "MDBootstrap",
18 | 		"TypeScript",
19 | 		"HTML"
20 | 	],
21 |     "version": "0.0.1",
22 |     "engines": {
23 |         "vscode": "^1.34.0"
24 |     },
25 |     "categories": [
26 |         "Snippets"
27 |     ],
28 |     "contributes": {
29 |         "snippets": [
30 |             {
31 |                 "language": "html",
32 |                 "path": "./snippets/snippets.json"
33 |             },
34 |             {
35 |                 "language": "typescript",
36 |                 "path": "./snippets/typescript.json"
37 |             }
38 |         ]
39 |     }
40 | }


--------------------------------------------------------------------------------
/snippets/snippets.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "MDB Button": {
  3 |     "prefix": "a-mdb-button",
  4 |     "body": [
  5 |       "<button type=\"${1:button}\" mdbBtn color=\"${2:primary}\" mdbWavesEffect>$3</button>$4"
  6 |     ],
  7 |     "description": "MDB Button"
  8 |   },
  9 |   "MDB Card": {
 10 |     "prefix": "a-mdb-card",
 11 |     "body": [
 12 |       "<mdb-card>",
 13 |       "  <mdb-card-img src=\"${1:https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg}\" alt=\"${2:Card image cap}\"></mdb-card-img>",
 14 |       "  <mdb-card-body>",
 15 |       "    <mdb-card-title>",
 16 |       "      <h4>${3:Card Title}</h4>",
 17 |       "    </mdb-card-title>",
 18 |       "",
 19 |       "    <mdb-card-text>${4:Some quick example text to build on the card title and make up the bulk of the card's",
 20 |       "      content.}",
 21 |       "    </mdb-card-text>",
 22 |       "",
 23 |       "    <a href=\"${6:#}\" mdbBtn color=\"primary\" mdbWavesEffect>${5:Button}</a>",
 24 |       "  </mdb-card-body>",
 25 |       "</mdb-card>"
 26 |     ],
 27 |     "description": "MDB Card"
 28 |   },
 29 |   "MDB Dropdown": {
 30 |     "prefix": "a-mdb-dropdown",
 31 |     "body": [
 32 |       "<div class=\"btn-group\" mdbDropdown>",
 33 |       "  <button mdbDropdownToggle type=\"button\" mdbBtn color=\"${1:primary}\" class=\"dropdown-toggle waves-light\"",
 34 |       "    mdbWavesEffect>",
 35 |       "    $2",
 36 |       "  </button>",
 37 |       "",
 38 |       "  <div class=\"dropdown-menu dropdown-primary\">",
 39 |       "    <a class=\"dropdown-item\" href=\"#\">$3</a>",
 40 |       "  </div>",
 41 |       "</div>$4"
 42 |     ],
 43 |     "description": "MDB Dropdown"
 44 |   },
 45 |   "MDB Material Dropdown": {
 46 |     "prefix": "a-mdb-dropdown-material",
 47 |     "body": [
 48 |       "<div class=\"dropdown\" mdbDropdown>",
 49 |       "",
 50 |       "  <button mdbDropdownToggle mdbBtn color=\"${1:primary}\" class=\"dropdown-toggle waves-light\" type=\"button\"",
 51 |       "    mdbWavesEffect>",
 52 |       "    $2",
 53 |       "  </button>",
 54 |       "",
 55 |       "  <div class=\"dropdown-menu dropdown-primary\">",
 56 |       "    <a class=\"dropdown-item\" href=\"#\">$3</a>",
 57 |       "  </div>",
 58 |       "</div>$4"
 59 |     ],
 60 |     "description": "MDB Material Dropdown"
 61 |   },
 62 |   "MDB Jumbotron": {
 63 |     "prefix": "a-mdb-jumbotron",
 64 |     "body": [
 65 |       "<div class=\"jumbotron\">",
 66 |       "  <h1 class=\"display-4\">${1:Hello, world!}</h1>",
 67 |       "  <p class=\"lead\">${2:This is a simple hero unit, a simple jumbotron-style component for calling extra attention to",
 68 |       "    featured content or information.}</p>",
 69 |       "  <hr class=\"my-4\">",
 70 |       "  <p>${3:It uses utility classes for typography and spacing to space content out within the larger container.}</p>",
 71 |       "  <a mdbBtn color=\"primary\" size=\"lg\" href=\"${5:#}\" role=\"button\" mdbWavesEffect>${4:Learn more}</a>",
 72 |       "</div>$6"
 73 |     ],
 74 |     "description": "MDB Jumbotron"
 75 |   },
 76 |   "MDB List Group": {
 77 |     "prefix": "a-mdb-list-group",
 78 |     "body": [
 79 |       "<ul class=\"list-group\">",
 80 |       "  <li class=\"list-group-item\">${1:Cras justo odio}</li>",
 81 |       "  <li class=\"list-group-item\">${2:Dapibus ac facilisis in}</li>",
 82 |       "  <li class=\"list-group-item\">${3:Morbi leo risus}</li>",
 83 |       "  <li class=\"list-group-item\">${4:Porta ac consectetur ac}</li>",
 84 |       "  <li class=\"list-group-item\">${5:Vestibulum at eros}</li>",
 85 |       "</ul>$6"
 86 |     ],
 87 |     "description": "MDB List Group"
 88 |   },
 89 |   "MDB Spinner": {
 90 |     "prefix": "a-mdb-spinner",
 91 |     "body": [
 92 |       "<div class=\"spinner-border ${1:text-primary}\" role=\"status\">",
 93 |       "  <span class=\"sr-only\">${2:Loading...}</span>",
 94 |       "</div>$3"
 95 |     ],
 96 |     "description": "MDB Spinner"
 97 |   },
 98 |   "MDB Material Spinner": {
 99 |     "prefix": "a-mdb-spinner-material",
100 |     "body": [
101 |       "<mdb-spinner spinnerType=\"${1:big}\" spinnerColor=\"${2:blue}\"></mdb-spinner>$3"
102 |     ],
103 |     "description": "MDB Material Spinner"
104 |   },
105 |   "MDB Panel": {
106 |     "prefix": "a-mdb-panel",
107 |     "body": [
108 |       "<mdb-card>",
109 |       "  <mdb-card-body>",
110 |       "    <mdb-card-title>",
111 |       "      <h4>${1:Panel title}</h4>",
112 |       "    </mdb-card-title>",
113 |       "    <mdb-card-text>${2:Some quick example text to build on the card title and make up the bulk of the card's",
114 |       "      content.}</mdb-card-text>",
115 |       "    <div class=\"flex-row\">",
116 |       "      <a href=\"${5:#}\" class=\"card-link\">${3:Card link}</a>",
117 |       "      <a href=\"${6:#}\" class=\"card-link\">${5:Another link}</a>",
118 |       "    </div>",
119 |       "  </mdb-card-body>",
120 |       "</mdb-card>$7"
121 |     ],
122 |     "description": "MDB Panel"
123 |   },
124 |   "MDB Pagination": {
125 |     "prefix": "a-mdb-pagination",
126 |     "body": [
127 |       "<nav aria-label=\"Page navigation example\">",
128 |       "  <ul class=\"pagination pg-blue\">",
129 |       "    <li class=\"page-item\"><a class=\"page-link\" mdbWavesEffect>Previous</a></li>",
130 |       "    <li class=\"page-item\"><a class=\"page-link\" mdbWavesEffect>1</a></li>",
131 |       "    <li class=\"page-item\"><a class=\"page-link\" mdbWavesEffect>2</a></li>",
132 |       "    <li class=\"page-item\"><a class=\"page-link\" mdbWavesEffect>3</a></li>",
133 |       "    <li class=\"page-item\"><a class=\"page-link\" mdbWavesEffect>Next</a></li>",
134 |       "  </ul>",
135 |       "</nav>$1"
136 |     ],
137 |     "description": "MDB Pagination"
138 |   },
139 |   "MDB Progress Bar": {
140 |     "prefix": "a-mdb-progress",
141 |     "body": [
142 |       "<div class=\"progress\">",
143 |       "  <div class=\"progress-bar\" role=\"progressbar\" style=\"width: ${1:25%}\" aria-valuenow=\"${2:25}\" aria-valuemin=\"${3:0}\" aria-valuemax=\"${4:100}\"></div>",
144 |       "</div>$5"
145 |     ],
146 |     "description": "MDB Progress Bar"
147 |   },
148 |   "MDB Material Progress Bar": {
149 |     "prefix": "a-mdb-progress-material",
150 |     "body": [
151 |       "<mdb-progress value=\"${1:25}\" min=\"${2:0}\" max=\"${3:100}\" aria-valuenow=\"${4:0}\" aria-valuemin=\"${5:0}\" aria-valuemax=\"${6:100}\"></mdb-progress>$7"
152 |     ],
153 |     "description": "MDB Material Progress Bar"
154 |   },
155 |   "MDB Tabset": {
156 |     "prefix": "a-mdb-tabset",
157 |     "body": [
158 |       "<mdb-tabset #staticTabs [buttonClass]=\"'md-tabs tabs-3'\" [contentClass]=\"'card'\">$1</mdb-tabset>"
159 |     ],
160 |     "description": "MDB Tabset"
161 |   },
162 |   "MDB Tab": {
163 |     "prefix": "a-mdb-tab",
164 |     "body": [
165 |       "<mdb-tab heading=\"${1:Title}\">",
166 |       "  <div class=\"row\">",
167 |       "    <div class=\"${2:col-12}\">",
168 |       "      <p>${3:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus",
169 |       "        reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione",
170 |       "        porro voluptate odit minima.}</p>",
171 |       "    </div>",
172 |       "  </div>",
173 |       "</mdb-tab>"
174 |     ],
175 |     "description": "MDB Tab"
176 |   },
177 |   "MDB Badge": {
178 |     "prefix": "a-mdb-badge",
179 |     "body": [
180 |       "<mdb-badge color=\"${1:red}\">$2</mdb-badge>$3"
181 |     ],
182 |     "description": "MDB Badge"
183 |   },
184 |   "MDB Accordion": {
185 |     "prefix": "a-mdb-accordion",
186 |     "body": [
187 |       "<mdb-accordion [multiple]=\"${1|false,true|}\">$2</mdb-accordion>"
188 |     ],
189 |     "description": "MDB Accordion"
190 |   },
191 |   "MDB Accordion Item": {
192 |     "prefix": "a-mdb-accordion-item",
193 |     "body": [
194 |       "<mdb-accordion-item [collapsed]=\"${1|false,true|}\">",
195 |       "  <mdb-accordion-item-head>${2:Heading}</mdb-accordion-item-head>",
196 |       "  <mdb-accordion-item-body>${3:Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,",
197 |       "      non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt",
198 |       "      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft",
199 |       "      beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat",
200 |       "      craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable",
201 |       "      VHS.}",
202 |       "  </mdb-accordion-item-body>",
203 |       "</mdb-accordion-item>"
204 |     ],
205 |     "description": "MDB Accordion Item"
206 |   },
207 |   "MDB Collapse": {
208 |     "prefix": "a-mdb-collapse",
209 |     "body": [
210 |       "<button mdbBtn color=\"primary\" class=\"waves-light\" type=\"button\" (click)=\"test.toggle()\" mdbWavesEffect>",
211 |       "  ${1:Toggle collapse}",
212 |       "</button>",
213 |       "",
214 |       "<div mdbCollapse #test=\"bs-collapse\">",
215 |       "  <p>${2:Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim",
216 |       "    keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.}</p>",
217 |       "</div>$3"
218 |     ],
219 |     "description": "MDB Collapse"
220 |   },
221 |   "MDB Basic Footer": {
222 |     "prefix": "a-mdb-footer-basic",
223 |     "body": [
224 |       "<footer class=\"page-footer font-small ${1:blue} pt-4$2\">",
225 |       "    <div class=\"container-fluid text-center text-md-left\">",
226 |       "      <div class=\"row\">",
227 |       "        <div class=\"col-md-6 mt-md-0 mt-3\">",
228 |       "          <h5 class=\"text-uppercase\">${3:Footer Content}</h5>",
229 |       "          <p>${4:Here you can use rows and columns here to organize your footer content.}</p>",
230 |       "        </div>",
231 |       "        <hr class=\"clearfix w-100 d-md-none pb-3\">",
232 |       "        <!-- Grid column -->",
233 |       "        <div class=\"col-md-3 mb-md-0 mb-3\">",
234 |       "            <h5 class=\"text-uppercase\">${5:Links}</h5>",
235 |       "            <ul class=\"list-unstyled\">",
236 |       "              <li>",
237 |       "                <a href=\"${7:#}\">${6:Link 1}</a>",
238 |       "              </li>",
239 |       "              <li>",
240 |       "                <a href=\"${9:#}\">${8:Link 2}</a>",
241 |       "              </li>",
242 |       "              <li>",
243 |       "                <a href=\"${11:#}\">${10:Link 3}</a>",
244 |       "              </li>",
245 |       "              <li>",
246 |       "                <a href=\"${13:#}\">${12:Link 4}</a>",
247 |       "              </li>",
248 |       "            </ul>",
249 |       "          </div>",
250 |       "          <div class=\"col-md-3 mb-md-0 mb-3\">",
251 |       "            <h5 class=\"text-uppercase\">${14:Links}</h5>",
252 |       "",
253 |       "            <ul class=\"list-unstyled\">",
254 |       "              <li>",
255 |       "                <a href=\"${16:#}\">${15:Link 1}</a>",
256 |       "              </li>",
257 |       "              <li>",
258 |       "                <a href=\"${18:#}\">${17:Link 2}</a>",
259 |       "              </li>",
260 |       "              <li>",
261 |       "                <a href=\"${20:#}\">${19:Link 3}</a>",
262 |       "              </li>",
263 |       "              <li>",
264 |       "                <a href=\"${22:#}\">${21:Link 4}</a>",
265 |       "              </li>",
266 |       "            </ul>",
267 |       "          </div>",
268 |       "      </div>",
269 |       "    </div>",
270 |       "    <div class=\"footer-copyright text-center py-3\">${23:© 2018 Copyright:}",
271 |       "      <a href=\"${25:https://mdbootstrap.com/education/angular/}\">${24:MDBootstrap.com}</a>",
272 |       "    </div>",
273 |       "  </footer>$26"
274 |     ],
275 |     "description": "MDB Basic Footer"
276 |   },
277 |   "MDB Hamburger Menu": {
278 |     "prefix": "a-mdb-hamburger-menu",
279 |     "body": [
280 |       "<mdb-navbar SideClass=\"navbar navbar-${1|ligth,dark|} ${2:blue}\" [containerInside]=\"${3|false,true|}\">",
281 |       "  <mdb-navbar-brand><a class=\"navbar-brand\" href=\"${5:#}\">${4:Navbar}</a></mdb-navbar-brand>",
282 |       "  <links>",
283 |       "      <ul class=\"navbar-nav mr-auto\">",
284 |       "          <li class=\"nav-item active\">",
285 |       "              <a class=\"nav-link waves-light\" href=\"${7:#}\" mdbWavesEffect>${6:Home}<span class=\"sr-only\">(current)</span></a>",
286 |       "          </li>",
287 |       "          <li class=\"nav-item\">",
288 |       "              <a class=\"nav-link waves-light\" href=\"${9:#}\" mdbWavesEffect>${8:Features}</a>",
289 |       "          </li>",
290 |       "          <li class=\"nav-item\">",
291 |       "              <a class=\"nav-link waves-light\" href=\"${11:#}\" mdbWavesEffect>${10:Pricing}</a>",
292 |       "          </li>",
293 |       "      </ul>",
294 |       "  </links>",
295 |       "</mdb-navbar>$12",
296 |       ""
297 |     ],
298 |     "description": "MDB Hamburger Menu"
299 |   },
300 |   "MDB Navs": {
301 |     "prefix": "a-mdb-navs",
302 |     "body": [
303 |       "<ul class=\"nav ${1:grey lighten-4} py-4\">",
304 |       "    <li class=\"nav-item\">",
305 |       "        <a class=\"nav-link active\" href=\"${3:#}\">${2:Active}</a>",
306 |       "    </li>",
307 |       "    <li class=\"nav-item\">",
308 |       "        <a class=\"nav-link\" href=\"${5:#}\">${4:Link}</a>",
309 |       "    </li>",
310 |       "    <li class=\"nav-item\">",
311 |       "        <a class=\"nav-link\" href=\"${7:#}\">${6:Link}</a>",
312 |       "    </li>",
313 |       "    <li class=\"nav-item\">",
314 |       "        <a class=\"nav-link disabled\" href=\"${9:#}\">${8:Disabled}</a>",
315 |       "    </li>",
316 |       "</ul>$10"
317 |     ],
318 |     "description": "MDB Navs"
319 |   },
320 |   "MDB Basic Navbar": {
321 |     "prefix": "a-mdb-navbar-basic",
322 |     "body": [
323 |       "<mdb-navbar SideClass=\"navbar navbar-expand-${1|sm,md,lg|} navbar-${2|dark,light|} ${3:indigo}\">",
324 |       "    <mdb-navbar-brand><a class=\"navbar-brand\" href=\"${5:#}\">${4:Navbar}</a></mdb-navbar-brand>",
325 |       "    <links>",
326 |       "        <ul class=\"navbar-nav mr-auto\">",
327 |       "            <li class=\"nav-item active\">",
328 |       "                <a class=\"nav-link waves-light\" href=\"${7:#}\" mdbWavesEffect>${6:Home}<span class=\"sr-only\">(current)</span></a>",
329 |       "            </li>",
330 |       "            <li class=\"nav-item\">",
331 |       "                <a class=\"nav-link waves-light\" href=\"${9:#}\" mdbWavesEffect>${8:Features}</a>",
332 |       "            </li>",
333 |       "            <li class=\"nav-item\">",
334 |       "                <a class=\"nav-link waves-light\" href=\"${11:#}\" mdbWavesEffect>${10:Pricing}</a>",
335 |       "            </li>",
336 |       "            <li class=\"nav-item dropdown\" mdbDropdown>",
337 |       "                <a mdbDropdownToggle mdbWavesEffect type=\"button\" class=\"nav-link dropdown-toggle waves-light\" mdbWavesEffect>",
338 |       "                ${12:Basic dropdown}<span class=\"caret\"></span></a>",
339 |       "                <div *dropdownMenu class=\"dropdown-menu dropdown dropdown-primary\" role=\"menu\">",
340 |       "                    <a class=\"dropdown-item waves-light\" mdbWavesEffect href=\"${14:#}\">${13:Action}</a>",
341 |       "                    <a class=\"dropdown-item waves-light\" mdbWavesEffect href=\"${16:#}\">${15:Another action}</a>",
342 |       "                </div>",
343 |       "            </li>",
344 |       "        </ul>",
345 |       "        <form class=\"form-inline waves-light\" mdbWavesEffect>",
346 |       "            <div class=\"md-form my-0\">",
347 |       "                <input class=\"form-control mr-sm-2\" type=\"text\" placeholder=\"Search\">",
348 |       "            </div>",
349 |       "        </form>",
350 |       "    </links>",
351 |       "</mdb-navbar>$17"
352 |     ],
353 |     "description": "MDB Basic Navbar"
354 |   },
355 |   "MDB Basic Sidenav": {
356 |     "prefix": "a-mdb-sidenav-basic",
357 |     "body": [
358 |       "<a (click)=\"sidenav.toggle()\" class=\"btn btn-primary p-3 button-collapse\"><i class=\"fas fa-bars\"></i></a>",
359 |       "",
360 |       "<mdb-side-nav #sidenav [fixed]=\"${1|true,false|}\" class=\"${2:fixed}\">",
361 |       "  <li>",
362 |       "    <div class=\"logo-wrapper waves-light\">",
363 |       "      <a href=\"${4:#}\"><img src=\"${3:https://mdbootstrap.com/img/logo/mdb-transparent.png}\" class=\"img-fluid flex-center\"></a>",
364 |       "    </div>",
365 |       "  </li>",
366 |       "  <li>",
367 |       "    <ul class=\"social\">",
368 |       "      <li><a class=\"icons-sm fb-ic\"><i class=\"fab fa-facebook-f\"> </i></a></li>",
369 |       "      <li><a class=\"icons-sm pin-ic\"><i class=\"fab fa-pinterest\"> </i></a></li>",
370 |       "      <li><a class=\"icons-sm gplus-ic\"><i class=\"fab fa-google-plus\"> </i></a></li>",
371 |       "      <li><a class=\"icons-sm tw-ic\"><i class=\"fab fa-twitter\"> </i></a></li>",
372 |       "    </ul>",
373 |       "  </li>",
374 |       "  <li>",
375 |       "    <form class=\"search-form\" role=\"search\">",
376 |       "      <div class=\"form-group md-form waves-light\" mdbWavesEffect>",
377 |       "        <input type=\"text\" class=\"form-control\" placeholder=\"Search\">",
378 |       "      </div>",
379 |       "    </form>",
380 |       "  </li>",
381 |       "  <li>",
382 |       "    <ul class=\"collapsible collapsible-accordion\">",
383 |       "      <mdb-accordion [multiple]=\"false\" aria-multiselectable=\"false\">",
384 |       "        <mdb-accordion-item>",
385 |       "          <mdb-accordion-item-head mdbWavesEffect><i class=\"fas fa-chevron-right\"></i>${5:Collapsible menu}",
386 |       "          </mdb-accordion-item-head>",
387 |       "          <mdb-accordion-item-body>",
388 |       "            <ul>",
389 |       "              <li><a href=\"${7:#}\" mdbWavesEffect>${6:Link 1}</a></li>",
390 |       "              <li><a href=\"${9:#}\" mdbWavesEffect>${8:Link 2}</a></li>",
391 |       "            </ul>",
392 |       "          </mdb-accordion-item-body>",
393 |       "        </mdb-accordion-item>",
394 |       "        <mdb-accordion-item class=\"no-collase\">",
395 |       "          <mdb-accordion-item-head mdbWavesEffect><i class=\"far fa-hand-pointer\"></i>${10:Simple link}",
396 |       "          </mdb-accordion-item-head>",
397 |       "          <mdb-accordion-item-body></mdb-accordion-item-body>",
398 |       "        </mdb-accordion-item>",
399 |       "      </mdb-accordion>",
400 |       "    </ul>",
401 |       "  </li>",
402 |       "  <div class=\"sidenav-bg mask-strong\"></div>",
403 |       "</mdb-side-nav>$11"
404 |     ],
405 |     "description": "MDB Basic Sidenav"
406 |   },
407 |   "MDB Input": {
408 |     "prefix": "a-mdb-input",
409 |     "body": [
410 |       "<div class=\"md-form\">",
411 |       "  <input mdbInput type=\"text\" id=\"${1:form1}\" class=\"form-control\">",
412 |       "  <label for=\"${1:form1}\">${2:Example label}</label>",
413 |       "</div>$3"
414 |     ],
415 |     "description": "MDB Input"
416 |   },
417 |   "MDB Select": {
418 |     "prefix": "a-mdb-select",
419 |     "body": [
420 |       "<mdb-select [options]=\"${1:optionsSelect}\" placeholder=\"${2:Choose your option}\" label=\"${3:Example label}\"></mdb-select>$4"
421 |     ],
422 |     "description": "MDB Select"
423 |   },
424 |   "MDB Multiselect": {
425 |     "prefix": "a-mdb-multiselect",
426 |     "body": [
427 |       "<mdb-select [multiple]=\"true\" [options]=\"${1:optionsSelect}\" placeholder=\"${2:Choose your option}\" label=\"${3:Example label}\"></mdb-select>$4"
428 |     ],
429 |     "description": "MDB Multiselect"
430 |   },
431 |   "MDB Search": {
432 |     "prefix": "a-mdb-search",
433 |     "body": [
434 |       "<form class=\"form-inline waves-light\" mdbWavesEffect>",
435 |       "  <div class=\"md-form mt-0\">",
436 |       "    <input class=\"form-control mr-sm-2\" type=\"text\" placeholder=\"${1:Search}\">",
437 |       "  </div>",
438 |       "</form>$2"
439 |     ],
440 |     "description": "MDB Search"
441 |   },
442 |   "MDB Default Slider": {
443 |     "prefix": "a-mdb-slider-default",
444 |     "body": [
445 |       "<mdb-range-input default=\"true\" min=\"${1:0}\" max=\"${2:100}\"></mdb-range-input>$3"
446 |     ],
447 |     "description": "MDB Default Slider"
448 |   },
449 |   "MDB Material Slider": {
450 |     "prefix": "a-mdb-slider-material",
451 |     "body": [
452 |       "<mdb-range-input min=\"${1:0}\" max=\"${2:100}\"></mdb-range-input>$3"
453 |     ],
454 |     "description": "MDB Material Slider"
455 |   },
456 |   "MDB Default Switch": {
457 |     "prefix": "a-mdb-switch-default",
458 |     "body": [
459 |       "<div class=\"custom-control custom-switch\">",
460 |       "  <input type=\"checkbox\" class=\"custom-control-input\" id=\"${1:customSwitches}\">",
461 |       "  <label class=\"custom-control-label\" for=\"${1:customSwitches}\">${2:Toggle this switch element}</label>",
462 |       "</div>$3"
463 |     ],
464 |     "description": "MDB Default Switch"
465 |   },
466 |   "MDB Material Switch": {
467 |     "prefix": "a-mdb-switch-material",
468 |     "body": [
469 |       "<div class=\"switch\">",
470 |       "  <label>",
471 |       "    ${1:Off}",
472 |       "    <input type=\"checkbox\">",
473 |       "    <span class=\"lever\"></span> ${2:On}",
474 |       "  </label>",
475 |       "</div>$3"
476 |     ],
477 |     "description": "MDB Material Switch"
478 |   },
479 |   "MDB Textarea": {
480 |     "prefix": "a-mdb-textarea",
481 |     "body": [
482 |       "<div class=\"md-form\">",
483 |       "  <textarea type=\"text\" id=\"${1:form1}\" class=\"md-textarea form-control\" mdbInput></textarea>",
484 |       "  <label for=\"${1:form1}\">${3:Basic textarea}</label>",
485 |       "</div>$4"
486 |     ],
487 |     "description": "MDB Textarea"
488 |   },
489 |   "MDB Time Picker": {
490 |     "prefix": "a-mdb-time-picker",
491 |     "body": [
492 |       "<mdb-time-picker [buttonLabel]=\"${1:'Done'}\" [twelvehour]=\"${2|false,true|}\" [darktheme]=\"${3|false,true|}\" [placeholder]=\"${4:'Selected time'}\" [label]=\"${5:'Example label'}\"></mdb-time-picker>$6"
493 |     ],
494 |     "description": "MDB Time Picker"
495 |   },
496 |   "MDB Basic Modal": {
497 |     "prefix": "a-mdb-modal-basic",
498 |     "body": [
499 |       "<button type=\"button\" mdbBtn color=\"primary\" class=\"relative waves-light\" (click)=\"basicModal.show()\" mdbWavesEffect>${1:Launch demo modal}</button>",
500 |       "",
501 |       "<div mdbModal #basicModal=\"mdbModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myBasicModalLabel\" aria-hidden=\"true\">",
502 |       "  <div class=\"modal-dialog\" role=\"document\">",
503 |       "    <div class=\"modal-content\">",
504 |       "      <div class=\"modal-header\">",
505 |       "        <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"basicModal.hide()\">",
506 |       "          <span aria-hidden=\"true\">×</span>",
507 |       "        </button>",
508 |       "        <h4 class=\"modal-title w-100\" id=\"myModalLabel\">${2:Modal title}</h4>",
509 |       "      </div>",
510 |       "      <div class=\"modal-body\">",
511 |       "        ${3:...}",
512 |       "      </div>",
513 |       "      <div class=\"modal-footer\">",
514 |       "        <button type=\"button\" mdbBtn color=\"secondary\" class=\"waves-light\" aria-label=\"Close\" (click)=\"basicModal.hide()\" mdbWavesEffect>${4:Close}</button>",
515 |       "        <button type=\"button\" mdbBtn color=\"primary\" class=\"relative waves-light\" mdbWavesEffect>${5:Save changes}</button>",
516 |       "      </div>",
517 |       "    </div>",
518 |       "  </div>",
519 |       "</div>$6"
520 |     ],
521 |     "description": "MDB Basic Modal"
522 |   },
523 |   "MDB Cookies Modal": {
524 |     "prefix": "a-mdb-modal-cookies",
525 |     "body": [
526 |       "<button type=\"button\" mdbBtn color=\"primary\" class=\"waves-light\" data-toggle=\"modal\" data-target=\"#basicExample\"",
527 |       "  (click)=\"frame.show()\" mdbWavesEffect>",
528 |       "  ${1:Open modal}",
529 |       "</button>",
530 |       "",
531 |       "<div mdbModal #frame=\"mdbModal\" class=\"modal fade bottom modal-scrolling\" id=\"frameModalTop\" tabindex=\"-1\"",
532 |       "  role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" [config]=\"{backdrop: false, ignoreBackdropClick: true}\">",
533 |       "  <div class=\"modal-dialog modal-frame modal-bottom modal-notify modal-info\" role=\"document\">",
534 |       "    <div class=\"modal-content\">",
535 |       "      <div class=\"modal-body\">",
536 |       "        <div class=\"row d-flex justify-content-center align-items-center\">",
537 |       "          <p class=\"pt-3 pr-2\">${2:We use cookies to improve your website experience}</p>",
538 |       "          <a type=\"button\" mdbBtn color=\"primary\" class=\"waves-light\" mdbWavesEffect>${3:Learn more}",
539 |       "            <i class=\"fas fa-book ml-1\"></i>",
540 |       "          </a>",
541 |       "          <a type=\"button\" mdbBtn color=\"primary\" outline=\"true\" class=\"waves-light\" mdbWavesEffect",
542 |       "            data-dismiss=\"modal\" (click)=\"frame.hide()\">${4:Ok, thanks}</a>",
543 |       "        </div>",
544 |       "      </div>",
545 |       "    </div>",
546 |       "  </div>",
547 |       "</div>$5"
548 |     ],
549 |     "description": "MDB Cookies Modal"
550 |   }
551 | }


--------------------------------------------------------------------------------
/snippets/typescript.json:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/mdb-angular-vscode-snippets/16a0b1175ac69c92daf32e0cd385ec252343b1ce/snippets/typescript.json


--------------------------------------------------------------------------------