Skip to content

Commit

Permalink
feat(html): floating label in item and as label
Browse files Browse the repository at this point in the history
  • Loading branch information
marcjulian committed Apr 13, 2019
1 parent 0bcfb92 commit e195147
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 124 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ Type part of a snippet, press enter, and the snippet unfolds.
| `i-item-badge` | `<ion-item>` w/ `<ion-badge>` |
| `i-item-checkbox` | `<ion-item>` w/ `<ion-checkbox>` |
| `i-item-divider` | `<ion-item-divider>` w/ `<ion-label>` |
| `i-item-floating-label` | `<ion-item>` w/ `<p>` and `<h2>` wrapped by `<ion-label>` |
| `i-item-group` | `<ion-item-group>` w/ `<ion-item-divider>` and `<ion-item>` |
| `i-item-icon` | `<ion-item>` w/ `<ion-icon>` |
| `i-item-input` | `<ion-item>` w/ `<ion-input>` |
Expand All @@ -94,8 +95,9 @@ Type part of a snippet, press enter, and the snippet unfolds.
| `i-item-radio` | `<ion-item>` w/ `<ion-radio>` |
| `i-item-toggle` | `<ion-item>` w/ `<ion-toggle>` |
| `i-label` | `<ion-label>` |
| `i-label-floating` | `<ion-label>` w/ `<p>` and `<h2>` |
| `i-label-position` | `<ion-label>` w/ position selection |
| `i-list` | `<ion-list>` w/ two `<ion-item>` |
| `i-list` | `<ion-list>` |
| `i-list-header` | `<ion-list-header>` |
| `i-list-input` | `<ion-item>` w/ two `<ion-item>` |
| `i-menu` | `<ion-menu>` w/ `<ion-header>` and `<ion-content>` |
Expand Down
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,19 @@
"snippets": [
{
"language": "html",
"path": "./snippets/html.json"
"path": "./snippets/angular/html.json"
},
{
"language": "html",
"path": "./snippets/angular/html-utils.json"
},
{
"language": "scss",
"path": "./snippets/scss.json"
},
{
"language": "typescript",
"path": "./snippets/typescript.json"
"path": "./snippets/angular/typescript.json"
}
]
},
Expand Down
114 changes: 114 additions & 0 deletions snippets/angular/html-utils.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
{
"click": {
"prefix": "i-click",
"body": [
"(click)=\"${1:onClick()}\""
],
"description": "(click) event"
},
"color": {
"prefix": "i-color",
"body": [
"color=\"${1|primary,secondary,tertiary,success,warning,danger,light,medium,dark|}\""
],
"description": "(click) event"
},
"ion-hide": {
"prefix": "i-hide",
"body": [
"ion-hide"
],
"description": "CSS Utilities Hide Element Class - must be added to class"
},
"ion-hide-breakpoints": {
"prefix": "i-hide-breakpoints",
"body": [
"ion-hide-${1|sm,md,lg,xl|}-${2|up,down|}"
],
"description": "CSS Utilities Hide Element with Display Breakpoints - must be added to class"
},
"ion-hide-sm": {
"prefix": "i-hide-sm",
"body": [
"ion-hide-sm-${1|up,down|}"
],
"description": "CSS Utilities Hide Element sm - must be added to class. Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down)."
},
"ion-hide-md": {
"prefix": "i-hide-md",
"body": [
"ion-hide-md-${1|up,down|}"
],
"description": "CSS Utilities Hide Element md - must be added to class. Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down)."
},
"ion-hide-lg": {
"prefix": "i-hide-lg",
"body": [
"ion-hide-lg-${1|up,down|}"
],
"description": "CSS Utilities Hide Element lg - must be added to class. Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down)."
},
"ion-hide-xl": {
"prefix": "i-hide-xl",
"body": [
"ion-hide-xl-${1|up,down|}"
],
"description": "CSS Utilities Hide Element xl - must be added to class. Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down)."
},
"ion-margin": {
"prefix": "i-margin",
"body": [
"ion-margin"
],
"description": "CSS Utilities Element Margin - must be added to class"
},
"ion-margin-type": {
"prefix": "i-margin-type",
"body": [
"ion-margin-${1|top,start,end,bottom,vertical,horizontal|}"
],
"description": "CSS Utilities Element Margin Type - must be added to class"
},
"ion-no-margin": {
"prefix": "i-no-margin",
"body": [
"ion-no-margin"
],
"description": "CSS Utilities Element No Margin - must be added to class"
},
"ion-padding": {
"prefix": "i-padding",
"body": [
"ion-padding"
],
"description": "CSS Utilities Element Padding - must be added to class"
},
"ion-padding-type": {
"prefix": "i-padding-type",
"body": [
"ion-padding-${1|top,start,end,bottom,vertical,horizontal|}"
],
"description": "CSS Utilities Element Padding Type - must be added to class"
},
"ion-no-padding": {
"prefix": "i-no-padding",
"body": [
"ion-no-padding"
],
"description": "CSS Utilities Element No Padding - must be added to class"
},
"scrollEvents": {
"prefix": "i-scrollEvents",
"body": [
"[scrollEvents]=\"${1|true,false|}\""
],
"description": "Ionic [scrollEvents] binding for <ion-content>"
},
"slot": {
"prefix": "i-slot",
"body": [
"slot=\"${1|start,end,primary,secondary|}\""
],
"description": "Ionic slot property"
}
}
156 changes: 35 additions & 121 deletions snippets/html.json → snippets/angular/html.json
Original file line number Diff line number Diff line change
Expand Up @@ -291,8 +291,8 @@
"prefix": "i-datetime",
"body": [
"<ion-item>",
"<ion-label>${1:Date}</ion-label>",
"<ion-datetime display-format=\"${2:DD.MM.YYYY} ${3:HH:mm}\"></ion-datetime>",
"\t<ion-label>${1:Date}</ion-label>",
"\t<ion-datetime display-format=\"${2:DD.MM.YYYY} ${3:HH:mm}\"></ion-datetime>",
"</ion-item>"
],
"description": "<ion-datetime>"
Expand Down Expand Up @@ -438,48 +438,6 @@
],
"description": "<ion-header>"
},
"ion-hide": {
"prefix": "i-hide",
"body": [
"ion-hide"
],
"description": "CSS Utilities Hide Element Class - must be added to class"
},
"ion-hide-breakpoints": {
"prefix": "i-hide-breakpoints",
"body": [
"ion-hide-${1|sm,md,lg,xl|}-${2|up,down|}"
],
"description": "CSS Utilities Hide Element with Display Breakpoints - must be added to class"
},
"ion-hide-sm": {
"prefix": "i-hide-sm",
"body": [
"ion-hide-sm-${1|up,down|}"
],
"description": "CSS Utilities Hide Element sm - must be added to class. Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down)."
},
"ion-hide-md": {
"prefix": "i-hide-md",
"body": [
"ion-hide-md-${1|up,down|}"
],
"description": "CSS Utilities Hide Element md - must be added to class. Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down)."
},
"ion-hide-lg": {
"prefix": "i-hide-lg",
"body": [
"ion-hide-lg-${1|up,down|}"
],
"description": "CSS Utilities Hide Element lg - must be added to class. Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down)."
},
"ion-hide-xl": {
"prefix": "i-hide-xl",
"body": [
"ion-hide-xl-${1|up,down|}"
],
"description": "CSS Utilities Hide Element xl - must be added to class. Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down)."
},
"ion-icon": {
"prefix": "i-icon",
"body": [
Expand Down Expand Up @@ -542,6 +500,15 @@
],
"description": "<ion-item> w/ <ion-avatar>"
},
"ion-item-button": {
"prefix": "i-item-button",
"body": [
"<ion-item button>",
"\t<ion-label>${3:Click me}</ion-label>",
"</ion-item>"
],
"description": "<ion-item> w/ <ion-avatar>"
},
"ion-item-checkbox": {
"prefix": "i-item-checkbox",
"body": [
Expand All @@ -561,6 +528,18 @@
],
"description": "<ion-item-divider> w/ <ion-label>"
},
"ion-item-floating-label": {
"prefix": "i-item-floating-label",
"body": [
"<ion-item>",
"\t<ion-label>",
"\t\t<p>${1:Pizza}<p>",
"\t\t<h2>${2:Hawaii}</h2>",
"\t</ion-label>",
"</ion-item>"
],
"description": "<ion-item> w/ <p> and <h2> wrapped by <ion-label>"
},
"ion-item-group": {
"prefix": "i-item-group",
"body": [
Expand Down Expand Up @@ -688,6 +667,16 @@
],
"description": "<ion-label>"
},
"ion-label-floating": {
"prefix": "i-label-floating",
"body": [
"<ion-label>",
"\t<p>${1:Pizza}<p>",
"\t<h2>${2:Hawaii}</h2>",
"</ion-label>"
],
"description": "<ion-label> w/ <p> and <h2>"
},
"ion-label-position": {
"prefix": "i-label-position",
"body": [
Expand All @@ -699,15 +688,10 @@
"prefix": "i-list",
"body": [
"<ion-list>",
"\t<ion-item>",
"\t\t<ion-label>${1:Peperoni}</ion-label>",
"\t</ion-item>",
"\t<ion-item>",
"\t\t<ion-label>${2:Hawaii}</ion-label>",
"\t</ion-item>",
"\t$0",
"</ion-list>"
],
"description": "<ion-item> w/ two <ion-item>"
"description": "<ion-list>"
},
"ion-list-header": {
"prefix": "i-list-header",
Expand Down Expand Up @@ -742,27 +726,6 @@
],
"description": "<ion-list>"
},
"ion-margin": {
"prefix": "i-margin",
"body": [
"ion-margin"
],
"description": "CSS Utilities Element Margin - must be added to class"
},
"ion-margin-type": {
"prefix": "i-margin-type",
"body": [
"ion-margin-${1|top,start,end,bottom,vertical,horizontal|}"
],
"description": "CSS Utilities Element Margin Type - must be added to class"
},
"ion-no-margin": {
"prefix": "i-no-margin",
"body": [
"ion-no-margin"
],
"description": "CSS Utilities Element No Margin - must be added to class"
},
"ion-menu": {
"prefix": "i-menu",
"body": [
Expand Down Expand Up @@ -814,27 +777,6 @@
],
"description": "<ion-note>"
},
"ion-padding": {
"prefix": "i-padding",
"body": [
"ion-padding"
],
"description": "CSS Utilities Element Padding - must be added to class"
},
"ion-padding-type": {
"prefix": "i-padding-type",
"body": [
"ion-padding-${1|top,start,end,bottom,vertical,horizontal|}"
],
"description": "CSS Utilities Element Padding Type - must be added to class"
},
"ion-no-padding": {
"prefix": "i-no-padding",
"body": [
"ion-no-padding"
],
"description": "CSS Utilities Element No Padding - must be added to class"
},
"ion-radio": {
"prefix": "i-radio",
"body": [
Expand Down Expand Up @@ -1250,33 +1192,5 @@
"</ion-virtual-scroll>"
],
"description": "<ion-virtual-scroll> with header function"
},
"click": {
"prefix": "i-click",
"body": [
"(click)=\"${1:onClick()}\""
],
"description": "(click) event"
},
"color": {
"prefix": "i-color",
"body": [
"color=\"${1|primary,secondary,tertiary,success,warning,danger,light,medium,dark|}\""
],
"description": "(click) event"
},
"scrollEvents": {
"prefix": "i-scrollEvents",
"body": [
"[scrollEvents]=\"${1|true,false|}\""
],
"description": "Ionic [scrollEvents] binding for <ion-content>"
},
"slot": {
"prefix": "i-slot",
"body": [
"slot=\"${1|start,end,primary,secondary|}\""
],
"description": "Ionic slot property"
}
}
File renamed without changes.

0 comments on commit e195147

Please sign in to comment.