javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(label): using prop for position

Browse Source 
also fixes #14288
This commit is contained in:
Manu Mtz.-Almeida
2018-04-11 19:09:15 +02:00
committed by Manu MA
parent 641113f161
commit b1ee4b8e3a
22 changed files with 327 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
angular/test/nav/src/app/form-sample-page/form-sample-page.component.html
View File

@ -8,7 +8,7 @@
<ion-content padding>
<ion-list>
<ion-item>
<ion-label floating>First Name</ion-label>
<ion-label position="floating">First Name</ion-label>
<ion-input name="firstName" #viewFirstName="ngModel" [(ngModel)]="firstName" required minlength="2"></ion-input>
</ion-item>
<ion-text *ngIf="viewFirstName.invalid && (viewFirstName.dirty || viewFirstName.touched)" color="danger">
@ -16,7 +16,7 @@
<small *ngIf="viewFirstName.errors['minlength']">First Name must be at least 2 characters long</small>
</ion-text>
<ion-item>
<ion-label floating>Last Name</ion-label>
<ion-label position="floating">Last Name</ion-label>
<ion-input name="lastName" #viewLastName="ngModel" [(ngModel)]="lastName" required minlength="4"></ion-input>
</ion-item>
<ion-text *ngIf="viewLastName.invalid && (viewLastName.dirty || viewLastName.touched)" color="danger">
@ -55,7 +55,7 @@
<ion-toggle name="feedEngineers" color="danger" [(ngModel)]="feedEngineers"></ion-toggle>
</ion-item>
<ion-item>
<ion-label floating>Short Self Description</ion-label>
<ion-label position="floating">Short Self Description</ion-label>
<ion-textarea name="selfDescription" #viewSelfDescription="ngModel" [(ngModel)]="selfDescription" required minlength="25"></ion-textarea>
</ion-item>
<ion-text *ngIf="viewSelfDescription.invalid && (viewSelfDescription.dirty || viewSelfDescription.touched)" color="danger">
@ -63,7 +63,7 @@
<small *ngIf="viewSelfDescription.errors['minlength']">Please tell us more</small>
</ion-text>
<ion-item>
<ion-label floating>Desired Salary</ion-label>
<ion-label position="floating">Desired Salary</ion-label>
<ion-input name="desiredSalary" #viewSalary="ngModel" type="number" required [(ngModel)]="desiredSalary"></ion-input>
</ion-item>
<ion-text *ngIf="viewSalary.invalid && (viewSalary.dirty || viewSalary.touched)" color="danger">

342
core/package-lock.json generated
View File

@ -2880,13 +2880,15 @@
"dependencies": {
"abbrev": {
"version": "1.1.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
"integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
"dev": true,
"optional": true
},
"ajv": {
"version": "4.11.8",
"bundled": true,
"resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
"integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
"dev": true,
"optional": true,
"requires": {
@ -2896,18 +2898,21 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"aproba": {
"version": "1.1.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
"integrity": "sha1-ldNgDwdxCqDpKYxyatXs8urLq6s=",
"dev": true,
"optional": true
},
"are-we-there-yet": {
"version": "1.1.4",
"bundled": true,
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
"dev": true,
"optional": true,
"requires": {
@ -2917,42 +2922,49 @@
},
"asn1": {
"version": "0.2.3",
"bundled": true,
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
"integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
"dev": true,
"optional": true
},
"assert-plus": {
"version": "0.2.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
"integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
"dev": true,
"optional": true
},
"asynckit": {
"version": "0.4.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
"dev": true,
"optional": true
},
"aws-sign2": {
"version": "0.6.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
"integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
"dev": true,
"optional": true
},
"aws4": {
"version": "1.6.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
"integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
"dev": true,
"optional": true
},
"balanced-match": {
"version": "0.4.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
"integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
"dev": true
},
"bcrypt-pbkdf": {
"version": "1.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
"integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
"dev": true,
"optional": true,
"requires": {
@ -2961,7 +2973,8 @@
},
"block-stream": {
"version": "0.0.9",
"bundled": true,
"resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
"integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
"dev": true,
"requires": {
"inherits": "2.0.3"
@ -2969,7 +2982,8 @@
},
"boom": {
"version": "2.10.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
"dev": true,
"requires": {
"hoek": "2.16.3"
@ -2977,7 +2991,8 @@
},
"brace-expansion": {
"version": "1.1.7",
"bundled": true,
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
"integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
"dev": true,
"requires": {
"balanced-match": "0.4.2",
@ -2986,29 +3001,34 @@
},
"buffer-shims": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
"integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=",
"dev": true
},
"caseless": {
"version": "0.12.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
"integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
"dev": true,
"optional": true
},
"co": {
"version": "4.6.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
"dev": true,
"optional": true
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
},
"combined-stream": {
"version": "1.0.5",
"bundled": true,
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
"integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
"dev": true,
"requires": {
"delayed-stream": "1.0.0"
@ -3016,22 +3036,26 @@
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true
},
"core-util-is": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true
},
"cryptiles": {
"version": "2.0.5",
"bundled": true,
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
"integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
"dev": true,
"requires": {
"boom": "2.10.1"
@ -3039,7 +3063,8 @@
},
"dashdash": {
"version": "1.14.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
"integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
"dev": true,
"optional": true,
"requires": {
@ -3048,7 +3073,8 @@
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"dev": true,
"optional": true
}
@ -3056,7 +3082,8 @@
},
"debug": {
"version": "2.6.8",
"bundled": true,
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
"integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
"dev": true,
"optional": true,
"requires": {
@ -3065,30 +3092,35 @@
},
"deep-extend": {
"version": "0.4.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
"integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
"dev": true,
"optional": true
},
"delayed-stream": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegates": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true,
"optional": true
},
"detect-libc": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.2.tgz",
"integrity": "sha1-ca1dIEvxempsqPRQxhRUBm70YeE=",
"dev": true,
"optional": true
},
"ecc-jsbn": {
"version": "0.1.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
"integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
"dev": true,
"optional": true,
"requires": {
@ -3097,24 +3129,28 @@
},
"extend": {
"version": "3.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
"integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
"dev": true,
"optional": true
},
"extsprintf": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
"integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=",
"dev": true
},
"forever-agent": {
"version": "0.6.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
"dev": true,
"optional": true
},
"form-data": {
"version": "2.1.4",
"bundled": true,
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
"integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
"dev": true,
"optional": true,
"requires": {
@ -3125,12 +3161,14 @@
},
"fs.realpath": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
"fstream": {
"version": "1.0.11",
"bundled": true,
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
"integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
"dev": true,
"requires": {
"graceful-fs": "4.1.11",
@ -3141,7 +3179,8 @@
},
"fstream-ignore": {
"version": "1.0.5",
"bundled": true,
"resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
"integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
"dev": true,
"optional": true,
"requires": {
@ -3152,7 +3191,8 @@
},
"gauge": {
"version": "2.7.4",
"bundled": true,
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
"optional": true,
"requires": {
@ -3168,7 +3208,8 @@
},
"getpass": {
"version": "0.1.7",
"bundled": true,
"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
"integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
"dev": true,
"optional": true,
"requires": {
@ -3177,7 +3218,8 @@
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"dev": true,
"optional": true
}
@ -3185,7 +3227,8 @@
},
"glob": {
"version": "7.1.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"dev": true,
"requires": {
"fs.realpath": "1.0.0",
@ -3198,18 +3241,21 @@
},
"graceful-fs": {
"version": "4.1.11",
"bundled": true,
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
"dev": true
},
"har-schema": {
"version": "1.0.5",
"bundled": true,
"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
"integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
"dev": true,
"optional": true
},
"har-validator": {
"version": "4.2.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
"integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
"dev": true,
"optional": true,
"requires": {
@ -3219,13 +3265,15 @@
},
"has-unicode": {
"version": "2.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"dev": true,
"optional": true
},
"hawk": {
"version": "3.1.3",
"bundled": true,
"resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
"integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
"dev": true,
"requires": {
"boom": "2.10.1",
@ -3236,12 +3284,14 @@
},
"hoek": {
"version": "2.16.3",
"bundled": true,
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
"dev": true
},
"http-signature": {
"version": "1.1.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
"integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
"dev": true,
"optional": true,
"requires": {
@ -3252,7 +3302,8 @@
},
"inflight": {
"version": "1.0.6",
"bundled": true,
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": {
"once": "1.4.0",
@ -3261,18 +3312,21 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true
},
"ini": {
"version": "1.3.4",
"bundled": true,
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
"integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
"number-is-nan": "1.0.1"
@ -3280,24 +3334,28 @@
},
"is-typedarray": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
"dev": true,
"optional": true
},
"isarray": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
"isstream": {
"version": "0.1.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true,
"optional": true
},
"jodid25519": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
"integrity": "sha1-BtSRIlUJNBlHfUJWM2BuDpB4KWc=",
"dev": true,
"optional": true,
"requires": {
@ -3306,19 +3364,22 @@
},
"jsbn": {
"version": "0.1.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
"integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
"dev": true,
"optional": true
},
"json-schema": {
"version": "0.2.3",
"bundled": true,
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
"dev": true,
"optional": true
},
"json-stable-stringify": {
"version": "1.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
"integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
"dev": true,
"optional": true,
"requires": {
@ -3327,19 +3388,22 @@
},
"json-stringify-safe": {
"version": "5.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
"dev": true,
"optional": true
},
"jsonify": {
"version": "0.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
"dev": true,
"optional": true
},
"jsprim": {
"version": "1.4.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
"integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=",
"dev": true,
"optional": true,
"requires": {
@ -3351,7 +3415,8 @@
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"dev": true,
"optional": true
}
@ -3359,12 +3424,14 @@
},
"mime-db": {
"version": "1.27.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz",
"integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=",
"dev": true
},
"mime-types": {
"version": "2.1.15",
"bundled": true,
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz",
"integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
"dev": true,
"requires": {
"mime-db": "1.27.0"
@ -3372,7 +3439,8 @@
},
"minimatch": {
"version": "3.0.4",
"bundled": true,
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": {
"brace-expansion": "1.1.7"
@ -3380,12 +3448,14 @@
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
"minimist": "0.0.8"
@ -3393,13 +3463,15 @@
},
"ms": {
"version": "2.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true,
"optional": true
},
"node-pre-gyp": {
"version": "0.6.39",
"bundled": true,
"resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz",
"integrity": "sha512-OsJV74qxnvz/AMGgcfZoDaeDXKD3oY3QVIbBmwszTFkRisTSXbMQyn4UWzUMOtA5SVhrBZOTp0wcoSBgfMfMmQ==",
"dev": true,
"optional": true,
"requires": {
@ -3418,7 +3490,8 @@
},
"nopt": {
"version": "4.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
"dev": true,
"optional": true,
"requires": {
@ -3428,7 +3501,8 @@
},
"npmlog": {
"version": "4.1.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.0.tgz",
"integrity": "sha512-ocolIkZYZt8UveuiDS0yAkkIjid1o7lPG8cYm05yNYzBn8ykQtaiPMEGp8fY9tKdDgm8okpdKzkvu1y9hUYugA==",
"dev": true,
"optional": true,
"requires": {
@ -3440,24 +3514,28 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
"oauth-sign": {
"version": "0.8.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
"integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
"wrappy": "1.0.2"
@ -3465,19 +3543,22 @@
},
"os-homedir": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true,
"optional": true
},
"os-tmpdir": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true,
"optional": true
},
"osenv": {
"version": "0.1.4",
"bundled": true,
"resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
"integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
"dev": true,
"optional": true,
"requires": {
@ -3487,35 +3568,41 @@
},
"path-is-absolute": {
"version": "1.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
},
"performance-now": {
"version": "0.2.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
"integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
"dev": true,
"optional": true
},
"process-nextick-args": {
"version": "1.0.7",
"bundled": true,
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
"integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
"dev": true
},
"punycode": {
"version": "1.4.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
"dev": true,
"optional": true
},
"qs": {
"version": "6.4.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
"integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
"dev": true,
"optional": true
},
"rc": {
"version": "1.2.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.1.tgz",
"integrity": "sha1-LgPo5C7kULjLPc5lvhv4l04d/ZU=",
"dev": true,
"optional": true,
"requires": {
@ -3527,7 +3614,8 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true,
"optional": true
}
@ -3535,7 +3623,8 @@
},
"readable-stream": {
"version": "2.2.9",
"bundled": true,
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz",
"integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=",
"dev": true,
"requires": {
"buffer-shims": "1.0.0",
@ -3549,7 +3638,8 @@
},
"request": {
"version": "2.81.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
"integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
"dev": true,
"optional": true,
"requires": {
@ -3579,7 +3669,8 @@
},
"rimraf": {
"version": "2.6.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
"integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
"dev": true,
"requires": {
"glob": "7.1.2"
@ -3587,30 +3678,35 @@
},
"safe-buffer": {
"version": "5.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
"integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=",
"dev": true
},
"semver": {
"version": "5.3.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
"dev": true,
"optional": true
},
"set-blocking": {
"version": "2.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true,
"optional": true
},
"signal-exit": {
"version": "3.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"dev": true,
"optional": true
},
"sntp": {
"version": "1.0.9",
"bundled": true,
"resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
"integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
"dev": true,
"requires": {
"hoek": "2.16.3"
@ -3618,7 +3714,8 @@
},
"sshpk": {
"version": "1.13.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.0.tgz",
"integrity": "sha1-/yo+T9BEl1Vf7Zezmg/YL6+zozw=",
"dev": true,
"optional": true,
"requires": {
@ -3635,7 +3732,8 @@
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"dev": true,
"optional": true
}
@ -3643,7 +3741,8 @@
},
"string-width": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
"code-point-at": "1.1.0",
@ -3653,7 +3752,8 @@
},
"string_decoder": {
"version": "1.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
"integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
"dev": true,
"requires": {
"safe-buffer": "5.0.1"
@ -3661,13 +3761,15 @@
},
"stringstream": {
"version": "0.0.5",
"bundled": true,
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
"integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
"dev": true,
"optional": true
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "2.1.1"
@ -3675,13 +3777,15 @@
},
"strip-json-comments": {
"version": "2.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true,
"optional": true
},
"tar": {
"version": "2.2.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"dev": true,
"requires": {
"block-stream": "0.0.9",
@ -3691,7 +3795,8 @@
},
"tar-pack": {
"version": "3.4.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.0.tgz",
"integrity": "sha1-I74tf2cagzk3bL2wuP4/3r8xeYQ=",
"dev": true,
"optional": true,
"requires": {
@ -3707,7 +3812,8 @@
},
"tough-cookie": {
"version": "2.3.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
"integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
"dev": true,
"optional": true,
"requires": {
@ -3716,7 +3822,8 @@
},
"tunnel-agent": {
"version": "0.6.0",
"bundled": true,
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
"integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
"dev": true,
"optional": true,
"requires": {
@ -3725,30 +3832,35 @@
},
"tweetnacl": {
"version": "0.14.5",
"bundled": true,
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
"dev": true,
"optional": true
},
"uid-number": {
"version": "0.0.6",
"bundled": true,
"resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
"integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=",
"dev": true,
"optional": true
},
"util-deprecate": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true
},
"uuid": {
"version": "3.0.1",
"bundled": true,
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
"integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
"dev": true,
"optional": true
},
"verror": {
"version": "1.3.6",
"bundled": true,
"resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
"integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
"dev": true,
"optional": true,
"requires": {
@ -3757,7 +3869,8 @@
},
"wide-align": {
"version": "1.1.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
"dev": true,
"optional": true,
"requires": {
@ -3766,7 +3879,8 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
}
}

24
core/src/components.d.ts vendored
View File

@ -3005,23 +3005,15 @@ declare global {
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
/**
* If true, the label will sit alongside an input. Defaults to `false`.
*/
'fixed': boolean;
/**
* If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
*/
'floating': boolean;
'getText': () => string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode': 'ios' | 'md';
/**
* If true, the label will be stacked above an input. Defaults to `false`.
* The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
*/
'stacked': boolean;
'position': 'inline' | 'fixed' | 'stacked' | 'floating' | undefined;
}
}
@ -3048,14 +3040,6 @@ declare global {
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
/**
* If true, the label will sit alongside an input. Defaults to `false`.
*/
'fixed'?: boolean;
/**
* If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
*/
'floating'?: boolean;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -3065,9 +3049,9 @@ declare global {
*/
'onIonStyle'?: (event: CustomEvent) => void;
/**
* If true, the label will be stacked above an input. Defaults to `false`.
* The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
*/
'stacked'?: boolean;
'position'?: 'inline' | 'fixed' | 'stacked' | 'floating' | undefined;
}
}
}

6
core/src/components/datetime/test/basic/index.html
View File

@ -43,17 +43,17 @@
</ion-item>
<ion-item>
<ion-label stacked>MMMM YY</ion-label>
<ion-label position="stacked">MMMM YY</ion-label>
<ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>MM/DD/YYYY</ion-label>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>MM/DD/YYYY</ion-label>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>

6
core/src/components/datetime/test/preview/index.html
View File

@ -43,17 +43,17 @@
</ion-item>
<ion-item>
<ion-label stacked>MMMM YY</ion-label>
<ion-label position="stacked">MMMM YY</ion-label>
<ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>MM/DD/YYYY</ion-label>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>MM/DD/YYYY</ion-label>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>

4
core/src/components/input/test/attributes/index.html
View File

@ -26,7 +26,7 @@
<ion-input aria-labelledby="itemless"></ion-input>
<ion-item>
<ion-label stacked>Number</ion-label>
<ion-label position="stacked">Number</ion-label>
<ion-input
id="input1"
type="number"
@ -47,7 +47,7 @@
</ion-item>
<ion-item id="custom">
<ion-label stacked>Text</ion-label>
<ion-label position="stacked">Text</ion-label>
<ion-input
id="input2"
type="text"

10
core/src/components/input/test/basic/index.html
View File

@ -32,22 +32,22 @@
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-input checked></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Type #</ion-label>
<ion-label position="fixed">Type #</ion-label>
<ion-input type="number" value="333"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-label position="stacked">Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Placeholder</ion-label>
<ion-label position="stacked">Placeholder</ion-label>
<ion-input placeholder="Enter Something"></ion-input>
</ion-item>
@ -72,7 +72,7 @@
</ion-item>
<ion-item>
<ion-label fixed>Type #</ion-label>
<ion-label position="fixed">Type #</ion-label>
<div type="number" value="333" class="input input-md hydrated"><!----><input aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md" spellcheck="false" type="number"><button type="button" class="input-clear-icon" hidden=""></button></div>
</ion-item>
</ion-list>

10
core/src/components/input/test/preview/index.html
View File

@ -32,22 +32,22 @@
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-input checked></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Type #</ion-label>
<ion-label position="fixed">Type #</ion-label>
<ion-input type="number" value="333"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-label position="stacked">Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Placeholder</ion-label>
<ion-label position="stacked">Placeholder</ion-label>
<ion-input placeholder="Enter Something"></ion-input>
</ion-item>
@ -72,7 +72,7 @@
</ion-item>
<ion-item>
<ion-label fixed>Type #</ion-label>
<ion-label position="fixed">Type #</ion-label>
<div type="number" value="333" class="input input-md hydrated"><!----><input aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md" spellcheck="false" type="number"><button type="button" class="input-clear-icon" hidden=""></button></div>
</ion-item>
</ion-list>

6
core/src/components/item/test/inputs/index.html
View File

@ -33,12 +33,12 @@
</ion-item>
<ion-item>
<ion-label floating>DateTime</ion-label>
<ion-label position="floating">DateTime</ion-label>
<ion-datetime id="datetime" value="2016-12-09" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" required></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Select</ion-label>
<ion-label position="floating">Select</ion-label>
<ion-select id="select">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
@ -56,7 +56,7 @@
</ion-item>
<ion-item>
<ion-label floating>Input (text)</ion-label>
<ion-label position="floating">Input (text)</ion-label>
<ion-input id="text" value="Text"></ion-input>
</ion-item>

12
core/src/components/label/label.ios.scss
View File

@ -29,13 +29,13 @@
// iOS Stacked & Floating Labels
// --------------------------------------------------
.label-ios[stacked] {
.label-ios-stacked {
@include margin(null, null, 4px, null);
font-size: 12px;
}
.label-ios[floating] {
.label-ios-floating {
@include margin(null, null, 0, null);
@include transform(translate3d(0, 27px, 0));
@include transform-origin(start, top);
@ -43,13 +43,13 @@
transition: transform 150ms ease-in-out;
}
.item-input-has-focus .label-ios[floating],
.item-input-has-value .label-ios[floating] {
.item-input-has-focus .label-ios-floating,
.item-input-has-value .label-ios-floating {
@include transform(translate3d(0, 0, 0), scale(.8));
}
.item-input-has-focus .label-ios[stacked],
.item-input-has-focus .label-ios[floating] {
.item-input-has-focus .label-ios-stacked,
.item-input-has-focus .label-ios-floating {
color: $label-ios-text-color-focused;
}

16
core/src/components/label/label.md.scss
View File

@ -29,29 +29,29 @@
// Material Design Stacked & Floating Labels
// --------------------------------------------------
.label-md[stacked] {
.label-md-stacked {
font-size: 12px;
}
.label-md[floating] {
.label-md-floating {
@include transform(translate3d(0, 27px, 0));
@include transform-origin(start, top);
transition: transform 150ms ease-in-out;
}
.label-md[stacked],
.label-md[floating] {
.label-md-stacked,
.label-md-floating {
@include margin(null, null, 0, 0);
}
.item-input-has-focus .label-md[stacked],
.item-input-has-focus .label-md[floating] {
.item-input-has-focus .label-md-stacked,
.item-input-has-focus .label-md-floating {
color: $label-md-text-color-focused;
}
.item-input-has-focus .label-md[floating],
.item-input-has-value .label-md[floating] {
.item-input-has-focus .label-md-floating,
.item-input-has-value .label-md-floating {
@include transform(translate3d(0, 0, 0), scale(.8));
}

6
core/src/components/label/label.scss
View File

@ -33,7 +33,7 @@ ion-label {
// Stacked & Floating Inputs
// --------------------------------------------------
ion-label[fixed] {
.label-fixed {
flex: 0 0 100px;
width: 100px;
@ -49,8 +49,8 @@ ion-label[fixed] {
max-width: 100%;
}
ion-label[stacked],
ion-label[floating] {
.label-stacked ,
.label-floating {
@include margin(null, null, 0, null);
}

54
core/src/components/label/label.tsx
View File

@ -1,5 +1,4 @@
import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
@Component({
tag: 'ion-label',
@ -12,15 +11,9 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/
}
})
export class Label {
styleTmr: any;
@Element() private el: HTMLElement;
/**
* Emitted when the styles change.
*/
@Event() ionStyle: EventEmitter;
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -36,41 +29,44 @@ export class Label {
@Prop() mode: 'ios' | 'md';
/**
* If true, the label will sit alongside an input. Defaults to `false`.
* The position determines where and how the label behaves inside an item.
* Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
*/
@Prop() fixed = false;
@Prop({mutable: true}) position: 'inline' | 'fixed' | 'stacked' | 'floating' | undefined;
/**
* If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
* Emitted when the styles change.
*/
@Prop() floating = false;
/**
* If true, the label will be stacked above an input. Defaults to `false`.
*/
@Prop() stacked = false;
@Event() ionStyle: EventEmitter;
@Method()
getText(): string {
return this.el.textContent || '';
}
componentDidLoad() {
this.emitStyle();
componentWillLoad() {
if (this.position === undefined) {
this.position = (this.mode === 'ios') ? 'inline' : 'floating';
}
}
emitStyle() {
clearTimeout(this.styleTmr);
componentDidLoad() {
this.positionChanged();
}
const styles = {
'label-fixed': this.fixed,
'label-floating': this.floating,
'label-stacked': this.stacked
};
this.styleTmr = setTimeout(() => {
this.ionStyle.emit(styles);
@Watch('position')
positionChanged() {
return this.ionStyle.emit({
[`label-${this.position}`]: true,
});
}
hostData() {
return {
class: {
[`label-${this.position}`]: true,
[`label-${this.mode}-${this.position}`]: true
}
};
}
}

42
core/src/components/label/readme.md
View File

@ -16,20 +16,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
For more information, see [Theming your App](/docs/theming/theming-your-app).
#### fixed
boolean
If true, the label will sit alongside an input. Defaults to `false`.
#### floating
boolean
If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
#### mode
string
@ -39,11 +25,12 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### stacked
#### position
boolean
string
If true, the label will be stacked above an input. Defaults to `false`.
The position determines where and how the label behaves inside an item.
Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
## Attributes
@ -57,20 +44,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
For more information, see [Theming your App](/docs/theming/theming-your-app).
#### fixed
boolean
If true, the label will sit alongside an input. Defaults to `false`.
#### floating
boolean
If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
#### mode
string
@ -80,11 +53,12 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### stacked
#### position
boolean
string
If true, the label will be stacked above an input. Defaults to `false`.
The position determines where and how the label behaves inside an item.
Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
## Events

6
core/src/components/label/test/basic/index.html
View File

@ -26,15 +26,15 @@
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Fixed</ion-label>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Stacked</ion-label>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>

6
core/src/components/label/test/preview/index.html
View File

@ -26,15 +26,15 @@
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Fixed</ion-label>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Stacked</ion-label>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>

6
core/src/components/label/test/standalone/index.html
View File

@ -11,8 +11,8 @@
<body>
<ion-label>Default</ion-label>
<ion-label>Wrap label this label just goes on and on and on</ion-label>
<ion-label fixed>Fixed</ion-label>
<ion-label floating>Floating</ion-label>
<ion-label stacked>Stacked</ion-label>
<ion-label position="fixed">Fixed</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-label position="stacked">Stacked</ion-label>
</body>
</html>

6
core/src/components/list/test/inset/index.html
View File

@ -23,7 +23,7 @@
</ion-item>
<ion-item>
<ion-label stacked>Stacked Input</ion-label>
<ion-label position="stacked">Stacked Input</ion-label>
<ion-input></ion-input>
</ion-item>
@ -37,7 +37,7 @@
</ion-item>
<ion-item>
<ion-label stacked>Stacked Select</ion-label>
<ion-label position="stacked">Stacked Select</ion-label>
<ion-select>
<ion-select-option>1</ion-select-option>
<ion-select-option>2</ion-select-option>
@ -51,7 +51,7 @@
</ion-item>
<ion-item>
<ion-label stacked>Stacked Datetime</ion-label>
<ion-label position="stacked">Stacked Datetime</ion-label>
<ion-datetime></ion-datetime>
</ion-item>

6
core/src/components/select/test/basic/index.html
View File

@ -212,7 +212,7 @@
</ion-item>
<ion-item>
<ion-label stacked>Stacked</ion-label>
<ion-label position="stacked">Stacked</ion-label>
<ion-select>
<ion-select-option>Default</ion-select-option>
<ion-select-option>Other</ion-select-option>
@ -221,7 +221,7 @@
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-select>
<ion-select-option>Default</ion-select-option>
<ion-select-option>Other</ion-select-option>
@ -230,7 +230,7 @@
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-label position="floating">Floating</ion-label>
<ion-select>
<ion-select-option selected="true">Default</ion-select-option>
<ion-select-option>Other</ion-select-option>

2
core/src/components/select/test/multiple-value/index.html
View File

@ -95,7 +95,7 @@
</form>
<ion-item>
<ion-label floating>Floating label</ion-label>
<ion-label position="floating">Floating label</ion-label>
<ion-select multiple="true">
<ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option>

4
core/src/components/select/test/single-value/index.html
View File

@ -17,7 +17,7 @@
<ion-content class="outer-content">
<ion-item>
<ion-label stacked>Gender</ion-label>
<ion-label position="stacked">Gender</ion-label>
<ion-select id="gender">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
@ -46,7 +46,7 @@
</ion-item>
<ion-item>
<ion-label floating>Operating System</ion-label>
<ion-label position="floating">Operating System</ion-label>
<ion-select id="os">
<ion-select-option value="dos">DOS</ion-select-option>
<ion-select-option value="lunix">Linux</ion-select-option>

4
core/src/components/textarea/readme.md
View File

@ -17,13 +17,13 @@ The textarea component accepts the [native textarea attributes](https://develope
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label floating>Description</ion-label>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label stacked>Summary</ion-label>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly