Skip to content

Commit 54a4820

Browse files
marcjulianmarcjulian
committed
feat(html): add new html snippets
1 parent d5699fd commit 54a4820

File tree

2 files changed

+103
-4
lines changed

2 files changed

+103
-4
lines changed

Diff for: ‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ Type part of a snippet, press enter, and the snippet unfolds.
2828

2929
| Snippet | Purpose |
3030
| ---------------------------- | ------------------------------------------------------------ |
31+
| `i-anchor` | `<ion-anchor>` |
3132
| `i-app` | `<ion-app>` |
3233
| `i-avatar` | `<ion-avatar>` |
3334
| `i-back-button` | `<ion-back-button>` |
@@ -45,6 +46,7 @@ Type part of a snippet, press enter, and the snippet unfolds.
4546
| `i-card-title` | `<ion-card-title>` |
4647
| `i-checkbox` | `<ion-checkbox>` |
4748
| `i-chip` | `<ion-chip>` |
49+
| `i-chip-avatar` | `<ion-chip>` w/ `<ion-avatar>` |
4850
| `i-chip-button` | `<ion-chip-button>` |
4951
| `i-chip-icon` | `<ion-chip>` w/ `<ion-icon>` at the start |
5052
| `i-chip-icon-end` | `<ion-chip>` w/ `<ion-icon>` at the end |
@@ -53,6 +55,9 @@ Type part of a snippet, press enter, and the snippet unfolds.
5355
| `i-content-events` | `<ion-content>` w/ events |
5456
| `i-datetime` | `<ion-datetime>` |
5557
| `i-fab` | `<ion-fab>` w/ `<ion-fab-button>` |
58+
| `i-fab-button` | `<ion-fab-button>` |
59+
| `i-fab-list` | `<ion-fab-list>` |
60+
| `i-fab-list-full` | `<ion-fab>` w/ `<ion-fab-list>` |
5661
| `i-footer` | `<ion-footer>` |
5762
| `i-form` | `<ion-form>` w/ `<ion-input>` and formGroup |
5863
| `i-form-error` | `<ion-form>` w/ `<ion-input>` and formGroup including error text |
@@ -65,7 +70,11 @@ Type part of a snippet, press enter, and the snippet unfolds.
6570
| `i-hide-when-platform` | `<ion-hide-when>` w/ platform |
6671
| `i-hide-when-size` | `<ion-hide-when>` w/ size |
6772
| `i-icon` | `<ion-icon>` |
73+
| `i-img` | `<ion-img>` lazyily load an image |
74+
| `i-infinite-scroll` | `<ion-infinite-scroll>` w/ `<ion-infinite-scroll-content>` |
6875
| `i-item` | `<ion-item>` w/ `<ion-label>` |
76+
| `i-item-avatar` | `<ion-item>` w/ `<ion-avatar>` |
77+
| `i-item-badge` | `<ion-item>` w/ `<ion-badge>` |
6978
| `i-item-checkbox` | `<ion-item>` w/ `<ion-checkbox>` |
7079
| `i-item-input` | `<ion-item>` w/ `<ion-input>` |
7180
| `i-item-toggle` | `<ion-item>` w/ `<ion-toggle>` |

Diff for: ‎snippets/html.json

+94-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
{
2+
"ion-anchor": {
3+
"prefix": "i-anchor",
4+
"body": [
5+
"<ion-anchor href=\"${1:#}\" color=\"${2|primary,secondary,tertiary|}\">${3:Anchor}</ion-anchor>"
6+
],
7+
"description": "<ion-anchor>"
8+
},
29
"ion-app": {
310
"prefix": "i-app",
411
"body": [
@@ -46,7 +53,7 @@
4653
"body": [
4754
"<ion-badge color=\"${1|primary,secondary,tertiary|}\">${2:42}</ion-badge>"
4855
],
49-
"description": "<ion-backdrop>"
56+
"description": "<ion-badge>"
5057
},
5158
"ion-button": {
5259
"prefix": "i-button",
@@ -152,6 +159,18 @@
152159
],
153160
"description": "<ion-chip>"
154161
},
162+
"ion-chip-avatar": {
163+
"prefix": "i-chip-avatar",
164+
"body": [
165+
"<ion-chip>",
166+
"\t<ion-avatar>",
167+
"\t\t<img [src]=\"${1:image}\">",
168+
"\t</ion-avatar>",
169+
"\t<ion-label>${2:Chip Avatar}</ion-label>",
170+
"</ion-chip>"
171+
],
172+
"description": "<ion-chip> w/ <ion-avatar>"
173+
},
155174
"ion-chip-button": {
156175
"prefix": "i-chip-button",
157176
"body": [
@@ -187,7 +206,7 @@
187206
"ion-col": {
188207
"prefix": "i-col",
189208
"body": [
190-
"<ion-col size=\"${1:12}\"></ion-col>"
209+
"<ion-col ${1|size,sizeXs,sizeSm,sizeMd,sizeLg,sizeXl|}=\"${2:12}\"></ion-col>"
191210
],
192211
"description": "<ion-col> with size"
193212
},
@@ -232,6 +251,38 @@
232251
],
233252
"description": "<ion-fab>"
234253
},
254+
"ion-fab-button": {
255+
"prefix": "i-fab-button",
256+
"body": [
257+
"<ion-fab-button>",
258+
"\t<ion-icon name=\"${1:add}\"></ion-icon>",
259+
"</ion-fab-button>"
260+
],
261+
"description": "<ion-fab-button>"
262+
},
263+
"ion-fab-list": {
264+
"prefix": "i-fab-list",
265+
"body": [
266+
"<ion-fab-list side=\"${1|start,end,top,bottom|}\">",
267+
"\t<ion-fab-button><ion-icon name=\"${2:logo-ionic}\"></ion-icon></ion-fab-button>",
268+
"\t<ion-fab-button><ion-icon name=\"${3:logo-angular}\"></ion-icon></ion-fab-button>",
269+
"</ion-fab-list>"
270+
],
271+
"description": "<ion-fab-list>"
272+
},
273+
"ion-fab-list-full": {
274+
"prefix": "i-fab-list-full",
275+
"body": [
276+
"<ion-fab vertical=\"${1|top,center,bottom|}\" horizontal=\"${2|center,start,end|}\" slot=\"${3:fixed}\">",
277+
"\t<ion-fab-button><ion-icon name=\"${4:code}\"></ion-icon></ion-fab-button>",
278+
"\t<ion-fab-list side=\"${5|start,end,top,bottom|}\">",
279+
"\t\t<ion-fab-button><ion-icon name=\"${6:logo-ionic}\"></ion-icon></ion-fab-button>",
280+
"\t\t<ion-fab-button><ion-icon name=\"${7:logo-angular}\"></ion-icon></ion-fab-button>",
281+
"\t</ion-fab-list>",
282+
"</ion-fab>"
283+
],
284+
"description": "<ion-fab> w/ <ion-fab-list>"
285+
},
235286
"ion-footer": {
236287
"prefix": "i-footer",
237288
"body": [
@@ -373,6 +424,23 @@
373424
],
374425
"description": "<ion-icon>"
375426
},
427+
"ion-img": {
428+
"prefix": "i-img",
429+
"body": [
430+
"<ion-img [src]=\"${1:image}\"></ion-img>"
431+
],
432+
"description": "<ion-img> lazyily load an image"
433+
},
434+
"ion-infinite-scroll": {
435+
"prefix": "i-infinite-scroll",
436+
"body": [
437+
"<ion-infinite-scroll threshold=\"${1:25}${2|%,px|}\" (ionInfinite)=\"${3:loadData}($event)\">",
438+
"\t<ion-infinite-scroll-content loadingSpinner=\"${4|crescent,lines,lines-small,bubbles,circles,dots|}\" loadingText=\"${5:Loading more data...}\">",
439+
"\t</ion-infinite-scroll-content>",
440+
"</ion-infinite-scroll>"
441+
],
442+
"description": "<ion-infinite-scroll> w/ <ion-infinite-scroll-content>"
443+
},
376444
"ion-item": {
377445
"prefix": "i-item",
378446
"body": [
@@ -382,6 +450,28 @@
382450
],
383451
"description": "<ion-item>"
384452
},
453+
"ion-item-avatar": {
454+
"prefix": "i-item-avatar",
455+
"body": [
456+
"<ion-item>",
457+
"\t<ion-avatar slot=\"${1|start,end|}\">",
458+
"\t\t<img [src]=\"${2:image}\">",
459+
"\t</ion-avatar>",
460+
"\t<ion-label>${3:Item Avatar}</ion-label>",
461+
"</ion-item>"
462+
],
463+
"description": "<ion-item> w/ <ion-avatar>"
464+
},
465+
"ion-item-badge": {
466+
"prefix": "i-item-badge",
467+
"body": [
468+
"<ion-item>",
469+
"\t<ion-badge slot=\"${1|start,end|}\">${2:42}</ion-badge>",
470+
"\t<ion-label>${3:Item Avatar}</ion-label>",
471+
"</ion-item>"
472+
],
473+
"description": "<ion-item> w/ <ion-avatar>"
474+
},
385475
"ion-item-checkbox": {
386476
"prefix": "i-item-checkbox",
387477
"body": [
@@ -610,7 +700,7 @@
610700
"ion-spinner": {
611701
"prefix": "i-spinner",
612702
"body": [
613-
"<ion-spinner name=\"${1|crescent,lines|}\"></ion-spinner>"
703+
"<ion-spinner name=\"${1|crescent,lines,lines-small,bubbles,circles,dots|}\"></ion-spinner>"
614704
],
615705
"description": "<ion-spinner>"
616706
},
@@ -733,7 +823,7 @@
733823
"color": {
734824
"prefix": "i-color",
735825
"body": [
736-
"color=\"${1|primary,secondary,tertiary|}\""
826+
"color=\"${1|primary,secondary,tertiary,success,warning,danger,light,medium,dark|}\""
737827
],
738828
"description": "(click) event"
739829
},

0 commit comments

Comments
 (0)