mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
b5b804725f
BREAKING CHANGES: The Option component’s `checked` attribute has been renamed to `selected` in order to select an option. This is to the follow the MDN spec for a select option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option If a `ngModel` is added to the Select component the value of the `ngModel` will take precedence over the `selected` attribute. references #7334
97 lines
2.3 KiB
HTML
97 lines
2.3 KiB
HTML
<ion-header>
|
|
|
|
<ion-toolbar>
|
|
<ion-title>Fixed Inline Label Text Input</ion-title>
|
|
</ion-toolbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
|
<ion-list>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>To</ion-label>
|
|
<ion-input [(ngModel)]="input1"
|
|
(blur)="onEvent($event)"
|
|
(input)="onEvent($event)"
|
|
(focus)="onEvent($event)">
|
|
</ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>CC</ion-label>
|
|
<ion-select>
|
|
<ion-option selected>Admin</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>From</ion-label>
|
|
<ion-input value="Text 3"></ion-input>
|
|
<button clear item-right>
|
|
<ion-icon name="power"></ion-icon>
|
|
</button>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>Comments</ion-label>
|
|
<ion-textarea value="Comment value"
|
|
(blur)="onEvent($event)"
|
|
(input)="onEvent($event)"
|
|
(focus)="onEvent($event)">
|
|
</ion-textarea>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="globe" item-left></ion-icon>
|
|
<ion-label fixed>Website</ion-label>
|
|
<ion-input value="http://ionic.io/" type="url"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="mail" item-left></ion-icon>
|
|
<ion-label fixed>Email</ion-label>
|
|
<ion-input value="email6@email.com" type="email"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="call" item-left></ion-icon>
|
|
<ion-label fixed>Phone</ion-label>
|
|
<ion-input value="867-5309" type="tel"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="contact" item-left></ion-icon>
|
|
<ion-input placeholder="Placeholder Text"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>Score</ion-label>
|
|
<ion-input value="10" type="number"></ion-input>
|
|
<button outline item-right>Update</button>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>First Name</ion-label>
|
|
<ion-input value="Buzz" type="text"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label fixed>Last Name</ion-label>
|
|
<ion-input value="Lightyear" type="text"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="create" item-left></ion-icon>
|
|
<ion-label fixed>Message</ion-label>
|
|
<ion-textarea value="To infinity and beyond"></ion-textarea>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
<p>{{url}}</p>
|
|
|
|
</ion-content>
|