mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(input): place inputs inside of ion-item
This commit is contained in:
Adam Bradley
@@ -3,3 +3,13 @@
|
||||
|
||||
// iOS Select
|
||||
// --------------------------------------------------
|
||||
|
||||
$select-ios-padding-top: $item-ios-padding-top !default;
|
||||
$select-ios-padding-right: ($item-ios-padding-right / 2) !default;
|
||||
$select-ios-padding-bottom: $item-ios-padding-bottom !default;
|
||||
$select-ios-padding-left: $item-ios-padding-left !default;
|
||||
|
||||
|
||||
ion-select {
|
||||
padding: $select-ios-padding-top $select-ios-padding-right $select-ios-padding-bottom $select-ios-padding-left;
|
||||
}
|
||||
@@ -3,3 +3,13 @@
|
||||
|
||||
// Material Design Select
|
||||
// --------------------------------------------------
|
||||
|
||||
$select-md-padding-top: $item-md-padding-top !default;
|
||||
$select-md-padding-right: ($item-md-padding-right / 2) !default;
|
||||
$select-md-padding-bottom: $item-md-padding-bottom !default;
|
||||
$select-md-padding-left: $item-md-padding-left !default;
|
||||
|
||||
|
||||
ion-select {
|
||||
padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
|
||||
}
|
||||
@@ -3,33 +3,41 @@
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
.select-icon {
|
||||
position: relative;
|
||||
min-width: 16px;
|
||||
ion-select {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.select-icon:after {
|
||||
.select-text {
|
||||
flex: 1;
|
||||
min-width: 16px;
|
||||
max-width: 120px;
|
||||
font-size: inherit;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.select-icon .select-icon-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -3px;
|
||||
left: 5px;
|
||||
margin-top: -2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: #999;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.select-text-value {
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
ion-select ion-label {
|
||||
margin: 0;
|
||||
}
|
||||
.item-multiple-inputs ion-select {
|
||||
position: relative;
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, Directive, Optional, ElementRef, Input, Renderer, HostListener, ContentChild, ContentChildren, QueryList} from 'angular2/core';
|
||||
import {Component, Optional, ElementRef, Renderer, Input, HostListener, ContentChildren, QueryList} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {Alert} from '../alert/alert';
|
||||
import {Form} from '../../util/form';
|
||||
import {Label} from '../label/label';
|
||||
import {Item} from '../item/item';
|
||||
import {merge} from '../../util/util';
|
||||
import {NavController} from '../nav/nav-controller';
|
||||
import {Option} from '../option/option';
|
||||
@@ -19,9 +19,9 @@ import {Option} from '../option/option';
|
||||
*
|
||||
* Under-the-hood the `ion-select` actually uses the
|
||||
* {@link ../../alert/Alert Alert API} to open up the overlay of options
|
||||
* which the user is presented with. Select takes one child `ion-label`
|
||||
* component, and numerous child `ion-option` components. Each `ion-option`
|
||||
* should be given a `value` attribute.
|
||||
* which the user is presented with. Select can take numerous child
|
||||
* `ion-option` components. If `ion-option` is not given a `value` attribute
|
||||
* then it will use its text as the value.
|
||||
*
|
||||
* ### Single Value: Radio Buttons
|
||||
*
|
||||
@@ -31,11 +31,13 @@ import {Option} from '../option/option';
|
||||
* receives the value of the selected option's value.
|
||||
*
|
||||
* ```html
|
||||
* <ion-select [(ngModel)]="gender">
|
||||
* <ion-item>
|
||||
* <ion-label>Gender</ion-label>
|
||||
* <ion-option value="f" checked="true">Female</ion-option>
|
||||
* <ion-option value="m">Male</ion-option>
|
||||
* </ion-select>
|
||||
* <ion-select [(ngModel)]="gender">
|
||||
* <ion-option value="f" checked="true">Female</ion-option>
|
||||
* <ion-option value="m">Male</ion-option>
|
||||
* </ion-select>
|
||||
* </ion-item>
|
||||
* ```
|
||||
*
|
||||
* ### Multiple Value: Checkboxes
|
||||
@@ -44,18 +46,21 @@ import {Option} from '../option/option';
|
||||
* to select multiple options. When multiple options can be selected, the alert
|
||||
* overlay presents users with a checkbox styled list of options. The
|
||||
* `ion-select multiple="true"` component's value receives an array of all the
|
||||
* selected option values.
|
||||
* selected option values. In the example below, because each option is not given
|
||||
* a `value`, then it'll use its text as the value instead.
|
||||
*
|
||||
* ```html
|
||||
* <ion-select [(ngModel)]="toppings" multiple="true">
|
||||
* <ion-item>
|
||||
* <ion-label>Toppings</ion-label>
|
||||
* <ion-option value="bacon">Bacon</ion-option>
|
||||
* <ion-option value="olives">Black Olives</ion-option>
|
||||
* <ion-option value="xcheese">Extra Cheese</ion-option>
|
||||
* <ion-option value="mushrooms">Mushrooms</ion-option>
|
||||
* <ion-option value="pepperoni">Pepperoni</ion-option>
|
||||
* <ion-option value="sausage">Sausage</ion-option>
|
||||
* </ion-select>
|
||||
* <ion-select [(ngModel)]="toppings" multiple="true">
|
||||
* <ion-option>Bacon</ion-option>
|
||||
* <ion-option>Black Olives</ion-option>
|
||||
* <ion-option>Extra Cheese</ion-option>
|
||||
* <ion-option>Mushrooms</ion-option>
|
||||
* <ion-option>Pepperoni</ion-option>
|
||||
* <ion-option>Sausage</ion-option>
|
||||
* </ion-select>
|
||||
* <ion-item>
|
||||
* ```
|
||||
*
|
||||
* ### Alert Buttons
|
||||
@@ -91,25 +96,25 @@ import {Option} from '../option/option';
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-select',
|
||||
host: {
|
||||
'class': 'item',
|
||||
'tappable': '',
|
||||
'tabindex': '0',
|
||||
'[attr.aria-disabled]': 'disabled'
|
||||
},
|
||||
template:
|
||||
'<ng-content select="[item-left]"></ng-content>' +
|
||||
'<div class="item-inner">' +
|
||||
'<ion-item-content id="{{labelId}}">' +
|
||||
'<ng-content select="ion-label"></ng-content>' +
|
||||
'</ion-item-content>' +
|
||||
'<div class="select-text-value" item-right>{{selectedText}}</div>' +
|
||||
'<div class="select-icon" item-right></div>' +
|
||||
'</div>'
|
||||
'<div class="select-text">{{_selectedText}}</div>' +
|
||||
'<div class="select-icon">' +
|
||||
'<div class="select-icon-inner"></div>' +
|
||||
'</div>' +
|
||||
'<button [id]="id" ' +
|
||||
'[attr.aria-disabled]="_disabled" ' +
|
||||
'class="item-cover">' +
|
||||
'</button>',
|
||||
host: {
|
||||
'[class.select-disabled]': '_disabled'
|
||||
}
|
||||
})
|
||||
export class Select {
|
||||
private selectedText: string = '';
|
||||
private labelId: string;
|
||||
private _selectedText: string = '';
|
||||
private _disabled: any = false;
|
||||
private _labelId: string;
|
||||
|
||||
id: string;
|
||||
|
||||
@Input() cancelText: string = 'Cancel';
|
||||
@Input() okText: string = 'OK';
|
||||
@@ -117,43 +122,34 @@ export class Select {
|
||||
@Input() alertOptions: any = {};
|
||||
@Input() checked: any = false;
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() id: string = '';
|
||||
@Input() multiple: string = '';
|
||||
|
||||
@ContentChild(Label) label: Label;
|
||||
@ContentChildren(Option) options: QueryList<Option>;
|
||||
|
||||
constructor(
|
||||
private form: Form,
|
||||
private elementRef: ElementRef,
|
||||
private renderer: Renderer,
|
||||
@Optional() private navCtrl: NavController,
|
||||
private _form: Form,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer: Renderer,
|
||||
@Optional() private _item: Item,
|
||||
@Optional() private _nav: NavController,
|
||||
@Optional() ngControl: NgControl
|
||||
) {
|
||||
this.form.register(this);
|
||||
this._form.register(this);
|
||||
|
||||
if (ngControl) {
|
||||
ngControl.valueAccessor = this;
|
||||
}
|
||||
|
||||
if (!navCtrl) {
|
||||
if (_item) {
|
||||
this.id = 'sel-' + _item.registerInput('select');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
}
|
||||
|
||||
if (!_nav) {
|
||||
console.error('parent <ion-nav> required for <ion-select>');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
if (!this.id) {
|
||||
this.id = 'sel-' + this.form.nextId();
|
||||
this.renderer.setElementAttribute(this.elementRef.nativeElement, 'id', this.id);
|
||||
}
|
||||
|
||||
this.labelId = 'lbl-' + this.id;
|
||||
this.renderer.setElementAttribute(this.elementRef.nativeElement, 'aria-labelledby', this.labelId);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@@ -167,9 +163,11 @@ export class Select {
|
||||
selectedOption = o;
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
this.value = selectedOption.value;
|
||||
this.selectedText = selectedOption.text;
|
||||
this._selectedText = selectedOption.text;
|
||||
|
||||
setTimeout(()=> {
|
||||
this.onChange(this.value);
|
||||
});
|
||||
@@ -179,8 +177,12 @@ export class Select {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@HostListener('click')
|
||||
_click() {
|
||||
@HostListener('click', ['$event'])
|
||||
private _click(ev) {
|
||||
console.debug('select, open alert');
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
let isMulti = this.multiple === 'true';
|
||||
|
||||
// the user may have assigned some options specifically for the alert
|
||||
@@ -191,8 +193,8 @@ export class Select {
|
||||
alertOptions.buttons = [this.cancelText];
|
||||
|
||||
// if the alertOptions didn't provide an title then use the label's text
|
||||
if (!alertOptions.title) {
|
||||
alertOptions.title = this.label.text;
|
||||
if (!alertOptions.title && this._item) {
|
||||
alertOptions.title = this._item.getLabelText();
|
||||
}
|
||||
|
||||
// user cannot provide inputs from alertOptions
|
||||
@@ -234,7 +236,7 @@ export class Select {
|
||||
}
|
||||
});
|
||||
|
||||
this.selectedText = selectedTexts.join(', ');
|
||||
this._selectedText = selectedTexts.join(', ');
|
||||
|
||||
this.onChange(selectedValues);
|
||||
}
|
||||
@@ -251,12 +253,12 @@ export class Select {
|
||||
// or undefined if nothing was checked
|
||||
this.value = selectedValue;
|
||||
|
||||
this.selectedText = '';
|
||||
this._selectedText = '';
|
||||
this.options.toArray().forEach(option => {
|
||||
if (option.value === selectedValue) {
|
||||
// this option was the one that was checked
|
||||
option.checked = true;
|
||||
this.selectedText = option.text;
|
||||
this._selectedText = option.text;
|
||||
|
||||
} else {
|
||||
// this option was not checked
|
||||
@@ -269,7 +271,7 @@ export class Select {
|
||||
});
|
||||
}
|
||||
|
||||
this.navCtrl.present(alert);
|
||||
this._nav.present(alert, alertOptions);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -317,6 +319,6 @@ export class Select {
|
||||
* @private
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
this.form.deregister(this);
|
||||
this._form.deregister(this);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,36 @@
|
||||
<ion-toolbar><ion-title>Select Item: Multiple Value</ion-title></ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select Item: Multiple Value</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-option value="bacon">Bacon</ion-option>
|
||||
<ion-option value="olives">Black Olives</ion-option>
|
||||
<ion-option value="xcheese">Extra Cheese</ion-option>
|
||||
<ion-option value="peppers">Green Peppers</ion-option>
|
||||
<ion-option value="mushrooms">Mushrooms</ion-option>
|
||||
<ion-option value="onions">Onions</ion-option>
|
||||
<ion-option value="pepperoni">Pepperoni</ion-option>
|
||||
<ion-option value="pineapple">Pineapple</ion-option>
|
||||
<ion-option value="sausage">Sausage</ion-option>
|
||||
<ion-option value="Spinach">Spinach</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
|
||||
<ion-option value="bacon">Bacon</ion-option>
|
||||
<ion-option value="olives">Black Olives</ion-option>
|
||||
<ion-option value="xcheese">Extra Cheese</ion-option>
|
||||
<ion-option value="peppers">Green Peppers</ion-option>
|
||||
<ion-option value="mushrooms">Mushrooms</ion-option>
|
||||
<ion-option value="onions">Onions</ion-option>
|
||||
<ion-option value="pepperoni">Pepperoni</ion-option>
|
||||
<ion-option value="pineapple">Pineapple</ion-option>
|
||||
<ion-option value="sausage">Sausage</ion-option>
|
||||
<ion-option value="Spinach">Spinach</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-select [(ngModel)]="carOptions" multiple="true">
|
||||
<ion-item>
|
||||
<ion-label>Car Options</ion-label>
|
||||
<ion-option value="backupcamera">Backup Camera</ion-option>
|
||||
<ion-option value="heatedseats">Headted Seats</ion-option>
|
||||
<ion-option value="keyless">Keyless Entry</ion-option>
|
||||
<ion-option value="navigation">Navigation</ion-option>
|
||||
<ion-option value="parkingassist">Parking Assist</ion-option>
|
||||
<ion-option value="sunroof">Sun Roof</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="carOptions" multiple="true">
|
||||
<ion-option value="backupcamera">Backup Camera</ion-option>
|
||||
<ion-option value="heatedseats">Headted Seats</ion-option>
|
||||
<ion-option value="keyless">Keyless Entry</ion-option>
|
||||
<ion-option value="navigation">Navigation</ion-option>
|
||||
<ion-option value="parkingassist">Parking Assist</ion-option>
|
||||
<ion-option value="sunroof">Sun Roof</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>toppings: {{toppings}}</code><br>
|
||||
|
||||
@@ -2,45 +2,84 @@
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-select [(ngModel)]="gender">
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-option value="f" checked="true">Female</ion-option>
|
||||
<ion-option value="m">Male</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="gender">
|
||||
<ion-option value="f" checked="true">Female</ion-option>
|
||||
<ion-option value="m">Male</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-select [(ngModel)]="gaming">
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-option value="nes">NES</ion-option>
|
||||
<ion-option value="n64">Nintendo64</ion-option>
|
||||
<ion-option value="ps">PlayStation</ion-option>
|
||||
<ion-option value="genesis">Sega Genesis</ion-option>
|
||||
<ion-option value="saturn">Sega Saturn</ion-option>
|
||||
<ion-option value="snes">SNES</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="gaming">
|
||||
<ion-option value="nes">NES</ion-option>
|
||||
<ion-option value="n64">Nintendo64</ion-option>
|
||||
<ion-option value="ps">PlayStation</ion-option>
|
||||
<ion-option value="genesis">Sega Genesis</ion-option>
|
||||
<ion-option value="saturn">Sega Saturn</ion-option>
|
||||
<ion-option value="snes">SNES</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
|
||||
<ion-item>
|
||||
<ion-label>Operating System</ion-label>
|
||||
<ion-option value="dos">DOS</ion-option>
|
||||
<ion-option value="lunix">Linux</ion-option>
|
||||
<ion-option value="mac7">Mac OS 7</ion-option>
|
||||
<ion-option value="mac8">Mac OS 8</ion-option>
|
||||
<ion-option value="win3.1" checked>Windows 3.1</ion-option>
|
||||
<ion-option value="win95">Windows 95</ion-option>
|
||||
<ion-option value="win98">Windows 98</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
|
||||
<ion-option value="dos">DOS</ion-option>
|
||||
<ion-option value="lunix">Linux</ion-option>
|
||||
<ion-option value="mac7">Mac OS 7</ion-option>
|
||||
<ion-option value="mac8">Mac OS 8</ion-option>
|
||||
<ion-option value="win3.1" checked>Windows 3.1</ion-option>
|
||||
<ion-option value="win95">Windows 95</ion-option>
|
||||
<ion-option value="win98">Windows 98</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
|
||||
<ion-item>
|
||||
<ion-label>Music</ion-label>
|
||||
<ion-option value="aliceinchains">Alice in Chains</ion-option>
|
||||
<ion-option value="greenday">Green Day</ion-option>
|
||||
<ion-option value="hole">Hole</ion-option>
|
||||
<ion-option value="korn">Korn</ion-option>
|
||||
<ion-option value="nirvana">Nirvana</ion-option>
|
||||
<ion-option value="pearljam">Pearl Jam</ion-option>
|
||||
<ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
|
||||
<ion-option value="soundgarden">Soundgarden</ion-option>
|
||||
<ion-option value="stp">Stone Temple Pilots</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
|
||||
<ion-option value="aliceinchains">Alice in Chains</ion-option>
|
||||
<ion-option value="greenday">Green Day</ion-option>
|
||||
<ion-option value="hole">Hole</ion-option>
|
||||
<ion-option value="korn">Korn</ion-option>
|
||||
<ion-option value="nirvana">Nirvana</ion-option>
|
||||
<ion-option value="pearljam">Pearl Jam</ion-option>
|
||||
<ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
|
||||
<ion-option value="soundgarden">Soundgarden</ion-option>
|
||||
<ion-option value="stp">Stone Temple Pilots</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select [(ngModel)]="month">
|
||||
<ion-option value="01">January</ion-option>
|
||||
<ion-option value="02">February</ion-option>
|
||||
<ion-option value="03">March</ion-option>
|
||||
<ion-option value="04">April</ion-option>
|
||||
<ion-option value="05">May</ion-option>
|
||||
<ion-option value="06">June</ion-option>
|
||||
<ion-option value="07">July</ion-option>
|
||||
<ion-option value="08" checked="true">August</ion-option>
|
||||
<ion-option value="09">September</ion-option>
|
||||
<ion-option value="10">October</ion-option>
|
||||
<ion-option value="11">November</ion-option>
|
||||
<ion-option value="12">December</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="year">
|
||||
<ion-option>1989</ion-option>
|
||||
<ion-option>1990</ion-option>
|
||||
<ion-option>1991</ion-option>
|
||||
<ion-option>1992</ion-option>
|
||||
<ion-option>1993</ion-option>
|
||||
<ion-option checked="true">1994</ion-option>
|
||||
<ion-option>1995</ion-option>
|
||||
<ion-option>1996</ion-option>
|
||||
<ion-option>1997</ion-option>
|
||||
<ion-option>1998</ion-option>
|
||||
<ion-option>1999</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>gender: {{gender}}</code><br>
|
||||
|
||||
Reference in New Issue
Block a user