|
1 |
| -Visual studio code (vscode) plugin/extension containing snippets for Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates |
2 |
| -================================================================================================================================================= |
| 1 | +Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates |
| 2 | +========================================================================================== |
3 | 3 |
|
4 |
| -This plugin works in both in the stable & the insiders build |
| 4 | +This repository contains source for both [intellij](/intellij) & [vscode](/vscode) plugins. |
5 | 5 |
|
6 |
| - |
| 6 | +Refer to the read me of each of the sub repositories for the complete documentation & contribution guidelines |
7 | 7 |
|
8 |
| -The detailed list of supported template triggers are listed [below](#documentation) |
9 |
| - |
10 |
| -Feel free to let me know what else you want added via the [issues](https://github.com/1tontech/bootstrap4-snippets/issues) |
11 |
| - |
12 |
| -Suggestions, feedback and other comments welcome via [@1tontech](https://twitter.com/1tontech) on Twitter. |
13 |
| - |
14 |
| -## Usage |
15 |
| - |
16 |
| - |
17 |
| -Create a new HTML document and |
18 |
| - |
19 |
| -1. Type `mat-` for all material components. Use `@mat` for all material attribute directives. `mat` comes from `*mat*erial design` |
20 |
| -2. Type `@fx` for all flex layout attribute directives. `fx` comes from `flex layout` |
21 |
| -3. Type `td-` for all teradata covalent components. Use `@td` for all teradata covalent attribute directives. `td` comes from `tera data` which is the company responsible for covalent development. `td` is quite similar to `mat` |
22 |
| - |
23 |
| -`Ctrl+Space` will trigger autocomplete dialog for snippet selection |
24 |
| - |
25 |
| -> 1. For autocompletion of components, use hyphen `-` format. i.e for material button, type `mat-button` |
26 |
| -> 2. For autocompletion of attribute directives, use `@` format. i.e for flex layout, use `@fxLayout` (or) use `@matTooltip` for material tooltip |
27 |
| -
|
28 |
| -Here are the conventions that will make it easy to lookup templates |
29 |
| - |
30 |
| -1. If a tag supports multiple children, the template trigger version with `*` implies the template uses dynamic number of children `*ngFor` variation. The `*` comes from `*ngFor` |
31 |
| -2. If a template trigger has `$` variation, this snippet gives you the reactive variation of an input component (or) observable variation if not an input. `$` comes from the fact each reactive component acts as observable source & observable variable names usually end with a `$`) |
32 |
| -3. If a template trigger has `@` variation, this snippet targets the attribute of an html element in your markup. Think of `@` as `html attribute` |
33 |
| -4. If a template trigger has `:**` variation, this means this variation contains the maximum number of options for that component. `**` comes from [ant](https://ant.apache.org/manual/dirtasks.html) which matches all the files under folder & sub folders |
34 |
| -5. If a template trigger has `_`(underscore) variation, this is a snippet(partial) that can be added to the component. This exists mainly to avoid creating variations of all permutations for the base component |
35 |
| -6. If a template trigger has `+` variation, this snippet allows you to specify responsive variation |
36 |
| -7. If a template trigger has `:?` variation, the template contains additional help that helps you completely utilize the existing templates |
37 |
| - |
38 |
| -## Mind map |
39 |
| -1. `*` => `*ngFor` variation |
40 |
| -2. `$` => Reactive version of input (or) Observable variation if component is not an input |
41 |
| -3. `@` => Targets html attribute |
42 |
| -4. `:**` => maximum variations |
43 |
| -5. `_` => Html snippet |
44 |
| -6. `+` => Responsive variations |
45 |
| -7. `:?` => Help |
46 |
| - |
47 |
| -## Installation (in 2 easy steps) |
48 |
| - |
49 |
| -1. Install plugin |
50 |
| - 1. Press `F1`, paste `ext install angular-material` & then press `enter` (or) |
51 |
| - 2. Goto extensions by pressing `Ctrl-Shift-X` (Windows/Linux) or `Cmd-Shift-X` (Mac) & Search for `Angular material v2`, click on install |
52 |
| -2. Reload your editor |
53 |
| - |
54 |
| -You are good to go |
55 |
| - |
56 |
| -## Contribution guidelines |
57 |
| - |
58 |
| -1. Clone this repo |
59 |
| -2. To modify material templates, you can find the templates for each snippet under `snippets/material`. These html templates must follow [sublime text snippet](http://docs.sublimetext.info/en/latest/extensibility/snippets.html) format. |
60 |
| -5. If you need to change `README.md` (or) `package.json`, you should modify their templates (which are used to generate the actual files) under `src/util/resources`. For eg., If you want `package.json` within plugin to be modified, you should change `package-template.json` under `src/util/resources`. A new `package.json` & `README.md` are regenerated for every build from their corresponding templates. |
61 |
| -6. Send me a pull request |
62 |
| - |
63 |
| -## Changelog |
64 |
| - |
65 |
| -See [here](CHANGELOG.md) |
66 |
| - |
67 |
| -## Documentation |
68 |
| -Here are available live templates |
69 |
| - |
70 |
| -### Bootstrap 4 snippets |
71 |
| - |
72 |
| -#### Bootstrap |
73 |
| - |
74 |
| -Trigger | Description |
75 |
| ---- | --- |
76 |
| -b4-**bootstrap$** | Reactive form variation of Bootstrap |
77 |
| - |
78 |
| -#### Alert |
79 |
| - |
80 |
| -Trigger | Description |
81 |
| ---- | --- |
82 |
| -b4-**alert-additional-content** | Alert additional content |
83 |
| -b4-**alert-closable** | Alert closable |
84 |
| -b4-**alert-default** | Alert default |
85 |
| -b4-**alert-dismissible** | Alert dismissible |
86 |
| -b4-**alert-link** | Alert link |
87 |
| - |
88 |
| -#### Badge |
89 |
| - |
90 |
| -Trigger | Description |
91 |
| ---- | --- |
92 |
| -b4-**badge-button** | Badge button |
93 |
| -b4-**badge-default** | Badge default |
94 |
| -b4-**badge-heading** | Badge heading |
95 |
| -b4-**badge-link** | Badge link |
96 |
| -b4-**badge-pill** | Badge pill |
97 |
| - |
98 |
| -#### Bgroup |
99 |
| - |
100 |
| -Trigger | Description |
101 |
| ---- | --- |
102 |
| -b4-**bgroup-default** | Bgroup default |
103 |
| -b4-**bgroup-dropdown-vertical** | Bgroup dropdown vertical |
104 |
| -b4-**bgroup-dropdown** | Bgroup dropdown |
105 |
| -b4-**bgroup-size** | Bgroup size |
106 |
| -b4-**bgroup-toolbar** | Bgroup toolbar |
107 |
| - |
108 |
| -#### Breadcrumb |
109 |
| - |
110 |
| -Trigger | Description |
111 |
| ---- | --- |
112 |
| -b4-**breadcrumb-default** | Breadcrumb default |
113 |
| -b4-**breadcrumb-list** | Breadcrumb list |
114 |
| - |
115 |
| -#### Button |
116 |
| - |
117 |
| -Trigger | Description |
118 |
| ---- | --- |
119 |
| -b4-**button-a** | Button with link |
120 |
| -b4-**button-block** | Button block |
121 |
| -b4-**button-checkbox** | Button checkbox |
122 |
| -b4-**button-default** | Button default |
123 |
| -b4-**button-disabled-a** | Button disabled with link |
124 |
| -b4-**button-input** | Button input |
125 |
| -b4-**button-outline** | Button outline |
126 |
| -b4-**button-radio** | Button radio |
127 |
| -b4-**button-sizes** | Button sizes |
128 |
| -b4-**button-toggle** | Button toggle |
129 |
| - |
130 |
| -#### Card |
131 |
| - |
132 |
| -Trigger | Description |
133 |
| ---- | --- |
134 |
| -b4-**card-align** | Card align |
135 |
| -b4-**card-background-custom** | Card background custom |
136 |
| -b4-**card-background** | Card background |
137 |
| -b4-**card-blockquote** | Card blockquote |
138 |
| -b4-**card-border** | Card border |
139 |
| -b4-**card-columns** | Card columns |
140 |
| -b4-**card-decks** | Card decks |
141 |
| -b4-**card-default** | Card default |
142 |
| -b4-**card-grid** | Card grid |
143 |
| -b4-**card-groups** | Card groups |
144 |
| -b4-**card-head-foot** | Card head foot |
145 |
| -b4-**card-links** | Card links |
146 |
| -b4-**card-list** | Card list |
147 |
| -b4-**card-overlay** | Card overlay |
148 |
| -b4-**card-pill-head** | Card pill head |
149 |
| -b4-**card-subtitle** | Card subtitle |
150 |
| -b4-**card-tab-head** | Card tab head |
151 |
| - |
152 |
| -#### Carousel |
153 |
| - |
154 |
| -Trigger | Description |
155 |
| ---- | --- |
156 |
| -b4-**carousel-caption** | Carousel caption |
157 |
| -b4-**carousel-default** | Carousel default |
158 |
| - |
159 |
| -#### Collapse |
160 |
| - |
161 |
| -Trigger | Description |
162 |
| ---- | --- |
163 |
| -b4-**collapse-accordion** | Collapse accordion |
164 |
| -b4-**collapse-button** | Collapse button |
165 |
| -b4-**collapse-default** | Collapse default |
166 |
| - |
167 |
| -#### Dropdown |
168 |
| - |
169 |
| -Trigger | Description |
170 |
| ---- | --- |
171 |
| -b4-**dropdown-alignment** | Dropdown alignment |
172 |
| -b4-**dropdown-anchor** | Dropdown anchor |
173 |
| -b4-**dropdown-button** | Dropdown button |
174 |
| -b4-**dropdown-colored** | Dropdown colored |
175 |
| -b4-**dropdown-default** | Dropdown default |
176 |
| -b4-**dropdown-sized** | Dropdown sized |
177 |
| -b4-**dropdown-split** | Dropdown split |
178 |
| -b4-**dropdown-up-split** | Dropdown up split |
179 |
| -b4-**dropdown-up** | Dropdown up |
180 |
| - |
181 |
| -#### Form |
182 |
| - |
183 |
| -Trigger | Description |
184 |
| ---- | --- |
185 |
| -b4-**form-checkbox-custom** | Form checkbox custom |
186 |
| -b4-**form-checkbox-inline** | Form checkbox inline |
187 |
| -b4-**form-checkbox-nolabel** | Form checkbox nolabel |
188 |
| -b4-**form-checkbox** | Form checkbox |
189 |
| -b4-**form-email** | Form email |
190 |
| -b4-**form-file-custom** | Form file custom |
191 |
| -b4-**form-file** | Form file |
192 |
| -b4-**form-grid** | Form grid |
193 |
| -b4-**form-group-text** | Form group text |
194 |
| -b4-**form-group** | Form group |
195 |
| -b4-**form-help-text-inline** | Form help text inline |
196 |
| -b4-**form-help-text** | Form help text |
197 |
| -b4-**form-hidden** | Form hidden |
198 |
| -b4-**form-inline** | Form inline |
199 |
| -b4-**form-input-sizing** | Form input sizing |
200 |
| -b4-**form-input-text** | Form input text |
201 |
| -b4-**form-input** | Form input |
202 |
| -b4-**form-multi-select-custom** | Form multi select custom |
203 |
| -b4-**form-multi-select** | Form multi select |
204 |
| -b4-**form-multil-select-sizing** | Form multil select sizing |
205 |
| -b4-**form-password** | Form password |
206 |
| -b4-**form-radio-custom** | Form radio custom |
207 |
| -b4-**form-radio-inline** | Form radio inline |
208 |
| -b4-**form-radio-nolabel** | Form radio nolabel |
209 |
| -b4-**form-radio** | Form radio |
210 |
| -b4-**form-reset** | Form reset |
211 |
| -b4-**form-select-custom** | Form select custom |
212 |
| -b4-**form-select-sizing** | Form select sizing |
213 |
| -b4-**form-select** | Form select |
214 |
| -b4-**form-submit** | Form submit |
215 |
| -b4-**form-textarea** | Form textarea |
216 |
| -b4-**form-validation** | Form validation |
217 |
| - |
218 |
| -#### Igroup |
219 |
| - |
220 |
| -Trigger | Description |
221 |
| ---- | --- |
222 |
| -b4-**igroup-button** | Igroup button |
223 |
| -b4-**igroup-checkbox-radio** | Igroup checkbox radio |
224 |
| -b4-**igroup-dropdown-segmented** | Igroup dropdown segmented |
225 |
| -b4-**igroup-dropdown** | Igroup dropdown |
226 |
| -b4-**igroup-size** | Igroup size |
227 |
| -b4-**igroup-text-both** | Igroup text both |
228 |
| -b4-**igroup-text-prefix** | Igroup text prefix |
229 |
| -b4-**igroup-text-sufix** | Igroup text sufix |
230 |
| - |
231 |
| -#### Jumbotron |
232 |
| - |
233 |
| -Trigger | Description |
234 |
| ---- | --- |
235 |
| -b4-**jumbotron-default** | Jumbotron default |
236 |
| -b4-**jumbotron-fluid** | Jumbotron fluid |
237 |
| - |
238 |
| -#### List |
239 |
| - |
240 |
| -Trigger | Description |
241 |
| ---- | --- |
242 |
| -b4-**list-a** | List with link |
243 |
| -b4-**list-badge** | List badge |
244 |
| -b4-**list-button** | List button |
245 |
| -b4-**list-colors** | List colors |
246 |
| -b4-**list-custom** | List custom |
247 |
| -b4-**list-default** | List default |
248 |
| - |
249 |
| -#### Modal |
250 |
| - |
251 |
| -Trigger | Description |
252 |
| ---- | --- |
253 |
| -b4-**modal-customize** | Modal customize |
254 |
| -b4-**modal-default** | Modal default |
255 |
| -b4-**modal-grid** | Modal grid |
256 |
| -b4-**modal-sizes** | Modal sizes |
257 |
| - |
258 |
| -#### Nav |
259 |
| - |
260 |
| -Trigger | Description |
261 |
| ---- | --- |
262 |
| -b4-**nav-a** | Nav with link |
263 |
| -b4-**nav-complete** | Nav complete |
264 |
| -b4-**nav-tabs-pills-a-variation** | Nav tabs pills with link variation |
265 |
| -b4-**nav-tabs-pills-dropdown** | Nav tabs pills dropdown |
266 |
| -b4-**nav-tabs-pills-ul-variation** | Nav tabs pills ul variation |
267 |
| -b4-**nav-ul** | Nav ul |
268 |
| - |
269 |
| -#### Navbar |
270 |
| - |
271 |
| -Trigger | Description |
272 |
| ---- | --- |
273 |
| -b4-**navbar-background-color** | Navbar background color |
274 |
| -b4-**navbar-background** | Navbar background |
275 |
| -b4-**navbar-default** | Navbar default |
276 |
| -b4-**navbar-minimal-a** | Navbar minimal with link |
277 |
| -b4-**navbar-minimal-ul** | Navbar minimal ul |
278 |
| -b4-**navbar-non-responsive** | Navbar non responsive |
279 |
| -b4-**navbar-placement** | Navbar placement |
280 |
| - |
281 |
| -#### Pagination |
282 |
| - |
283 |
| -Trigger | Description |
284 |
| ---- | --- |
285 |
| -b4-**pagination-alignment** | Pagination alignment |
286 |
| -b4-**pagination-default** | Pagination default |
287 |
| -b4-**pagination-sized** | Pagination sized |
288 |
| - |
289 |
| -#### Popover |
290 |
| - |
291 |
| -Trigger | Description |
292 |
| ---- | --- |
293 |
| -b4-**popover-default** | Popover default |
294 |
| -b4-**popover-direction** | Popover direction |
295 |
| -b4-**popover-dismissable** | Popover dismissable |
296 |
| - |
297 |
| -#### Progress |
298 |
| - |
299 |
| -Trigger | Description |
300 |
| ---- | --- |
301 |
| -b4-**progress-colored** | Progress colored |
302 |
| -b4-**progress-default** | Progress default |
303 |
| -b4-**progress-ie9** | Progress ie9 |
304 |
| -b4-**progress-striped** | Progress striped |
305 |
| - |
306 |
| -#### Scrollspy |
307 |
| - |
308 |
| -Trigger | Description |
309 |
| ---- | --- |
310 |
| -b4-**scrollspy-default** | Scrollspy default |
311 |
| - |
312 |
| -#### Tooltip |
313 |
| - |
314 |
| -Trigger | Description |
315 |
| ---- | --- |
316 |
| -b4-**tooltip-default** | Tooltip default |
317 |
| - |
318 |
| -#### Figure |
319 |
| - |
320 |
| -Trigger | Description |
321 |
| ---- | --- |
322 |
| -b4-**figure-default** | Figure default |
323 |
| - |
324 |
| -#### Image |
325 |
| - |
326 |
| -Trigger | Description |
327 |
| ---- | --- |
328 |
| -b4-**image-default** | Image default |
329 |
| - |
330 |
| -#### Table |
331 |
| - |
332 |
| -Trigger | Description |
333 |
| ---- | --- |
334 |
| -b4-**table-default** | Table default |
335 |
| -b4-**table-special** | Table special |
336 |
| - |
337 |
| -#### Typography |
338 |
| - |
339 |
| -Trigger | Description |
340 |
| ---- | --- |
341 |
| -b4-**typography-blockquote-reverse** | Typography blockquote reverse |
342 |
| -b4-**typography-blockquote** | Typography blockquote |
343 |
| -b4-**typography-description-list** | Typography description list |
344 |
| -b4-**typography-display-heading** | Typography display heading |
345 |
| -b4-**typography-lead** | Typography lead |
346 |
| -b4-**typography-list-inline** | Typography list inline |
347 |
| -b4-**typography-list-unstyled** | Typography list unstyled |
348 |
| -b4-**typography-muted-text** | Typography muted text |
349 |
| - |
350 |
| -#### Grid |
351 |
| - |
352 |
| -Trigger | Description |
353 |
| ---- | --- |
354 |
| -b4-**grid-col** | Grid col |
355 |
| -b4-**grid-container-fluid** | Grid container fluid |
356 |
| -b4-**grid-container** | Grid container |
357 |
| -b4-**grid-default** | Grid default |
358 |
| -b4-**grid-row** | Grid row |
359 |
| - |
360 |
| -#### Media |
361 |
| - |
362 |
| -Trigger | Description |
363 |
| ---- | --- |
364 |
| -b4-**media-bottom** | Media bottom |
365 |
| -b4-**media-default** | Media default |
366 |
| -b4-**media-list** | Media list |
367 |
| -b4-**media-middle** | Media middle |
368 |
| -b4-**media-nesting** | Media nesting |
369 |
| -b4-**media-right** | Media right |
370 |
| -b4-**media-top** | Media top |
371 |
| - |
372 |
| -#### Responsive |
373 |
| - |
374 |
| -Trigger | Description |
375 |
| ---- | --- |
376 |
| -b4-**responsive-hide-down** | Responsive hide down |
377 |
| -b4-**responsive-hide-up** | Responsive hide up |
378 |
| -b4-**responsive-print-show** | Responsive print show |
379 |
| - |
380 |
| - |
381 |
| -### Font Awesome 4 icon snippets |
382 |
| -@@@GENERATED_FONT_AWESOME4_ICON_SNIPPETS@@@ |
383 |
| - |
384 |
| -### Font Awesome 5 Free icon snippets |
385 |
| -@@@GENERATED_FONT_AWESOME5_FREE_ICON_SNIPPETS@@@ |
386 |
| - |
387 |
| -### Font Awesome 5 Pro icon snippets |
388 |
| -@@@GENERATED_FONT_AWESOME5_PRO_ICON_SNIPPETS@@@ |
389 |
| - |
390 |
| -## License |
391 |
| - |
392 |
| -Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro - Visual studio code plugin is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT). |
| 8 | +1. [intellij](/intellij) |
| 9 | +2. [vscode](/vscode) |
0 commit comments