mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
chore(stencil): use latest stencil dependencies
This commit is contained in:
Brandy Carney
@ -10,11 +10,11 @@
|
||||
"README.md"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^0.0.4-11"
|
||||
"@stencil/core": "0.0.4-14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@stencil/dev-server": "^0.0.14",
|
||||
"@stencil/utils": "^0.0.4"
|
||||
"@stencil/dev-server": "latest",
|
||||
"@stencil/utils": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "stencil build",
|
||||
|
||||
16
packages/core/src/components/select/option.tsx
Normal file
16
packages/core/src/components/select/option.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { Component } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-option',
|
||||
host: {
|
||||
theme: 'option'
|
||||
}
|
||||
})
|
||||
export class option {
|
||||
|
||||
render() {
|
||||
return <div class="my-option"></div>;
|
||||
}
|
||||
|
||||
}
|
||||
56
packages/core/src/components/select/select.ios.scss
Normal file
56
packages/core/src/components/select/select.ios.scss
Normal file
@ -0,0 +1,56 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./select";
|
||||
|
||||
// iOS Select
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the select
|
||||
$select-ios-padding-top: $item-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the select
|
||||
$select-ios-padding-end: ($item-ios-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the select
|
||||
$select-ios-padding-bottom: $item-ios-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the select
|
||||
$select-ios-padding-start: $item-ios-padding-start !default;
|
||||
|
||||
/// @prop - Color of the select icon
|
||||
$select-ios-icon-color: #999 !default;
|
||||
|
||||
/// @prop - Color of the select placeholder
|
||||
$select-ios-placeholder-color: $select-ios-icon-color !default;
|
||||
|
||||
|
||||
.select-ios {
|
||||
@include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
|
||||
}
|
||||
|
||||
.select-ios .select-placeholder {
|
||||
color: $select-ios-placeholder-color;
|
||||
}
|
||||
|
||||
.select-ios .select-icon {
|
||||
position: relative;
|
||||
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.select-ios .select-icon .select-icon-inner {
|
||||
@include position(50%, null, null, 5px);
|
||||
@include margin(-2px, null, null, null);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: $select-ios-icon-color;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
60
packages/core/src/components/select/select.md.scss
Normal file
60
packages/core/src/components/select/select.md.scss
Normal file
@ -0,0 +1,60 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./select";
|
||||
|
||||
// Material Design Select
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the select
|
||||
$select-md-padding-top: $item-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the select
|
||||
$select-md-padding-end: ($item-md-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the select
|
||||
$select-md-padding-bottom: $item-md-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the select
|
||||
$select-md-padding-start: $item-md-padding-start !default;
|
||||
|
||||
/// @prop - Color of the select icon
|
||||
$select-md-icon-color: #999 !default;
|
||||
|
||||
/// @prop - Color of the select placeholder
|
||||
$select-md-placeholder-color: $select-md-icon-color !default;
|
||||
|
||||
|
||||
.select-md {
|
||||
@include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
|
||||
}
|
||||
|
||||
.select-md .select-placeholder {
|
||||
color: $select-md-placeholder-color;
|
||||
}
|
||||
|
||||
.select-md .item-select ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
.select-md .select-icon {
|
||||
position: relative;
|
||||
|
||||
width: 12px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.select-md .select-icon .select-icon-inner {
|
||||
@include position(50%, null, null, 5px);
|
||||
@include margin(-3px, null, null, null);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: $select-md-icon-color;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
56
packages/core/src/components/select/select.scss
Normal file
56
packages/core/src/components/select/select.scss
Normal file
@ -0,0 +1,56 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the select popover list
|
||||
$select-popover-list-margin-top: -1px !default;
|
||||
|
||||
/// @prop - Margin end of the select popover list
|
||||
$select-popover-list-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the select popover list
|
||||
$select-popover-list-margin-bottom: -1px !default;
|
||||
|
||||
/// @prop - Margin start of the select popover list
|
||||
$select-popover-list-margin-start: 0 !default;
|
||||
|
||||
|
||||
ion-select {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.select-text {
|
||||
overflow: hidden;
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-width: 16px;
|
||||
|
||||
font-size: inherit;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-multiple-inputs ion-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-disabled,
|
||||
.item-select-disabled ion-label {
|
||||
opacity: .4;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.select-popover ion-list {
|
||||
@include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
|
||||
}
|
||||
|
||||
// TODO remove
|
||||
.select .option {
|
||||
display: none;
|
||||
}
|
||||
365
packages/core/src/components/select/select.tsx
Normal file
365
packages/core/src/components/select/select.tsx
Normal file
@ -0,0 +1,365 @@
|
||||
import { Component, CssClassMap, Event, EventEmitter, Prop } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-select',
|
||||
styleUrls: {
|
||||
ios: 'select.ios.scss',
|
||||
md: 'select.md.scss',
|
||||
wp: 'select.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'select'
|
||||
}
|
||||
})
|
||||
export class Select {
|
||||
text: any;
|
||||
id: any;
|
||||
labelId: any;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, the user cannot interact with this element. Defaults to `false`.
|
||||
*/
|
||||
@Prop() disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* @input {string} The text to display on the cancel button. Default: `Cancel`.
|
||||
*/
|
||||
@Prop() cancelText: string = 'Cancel';
|
||||
|
||||
/**
|
||||
* @input {string} The text to display on the ok button. Default: `OK`.
|
||||
*/
|
||||
@Prop() okText: string = 'OK';
|
||||
|
||||
/**
|
||||
* @input {string} The text to display when the select is empty.
|
||||
*/
|
||||
@Prop() placeholder: string;
|
||||
|
||||
/**
|
||||
* @input {any} Any additional options that the `alert` or `action-sheet` interface can take.
|
||||
* See the [AlertController API docs](../../alert/AlertController/#create) and the
|
||||
* [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) for the
|
||||
* create options for each interface.
|
||||
*/
|
||||
@Prop() selectOptions: any = {};
|
||||
|
||||
/**
|
||||
* @input {string} The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`.
|
||||
*/
|
||||
@Prop() interface: string = '';
|
||||
|
||||
/**
|
||||
* @input {string} The text to display instead of the selected option's value.
|
||||
*/
|
||||
@Prop() selectedText: string;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, the element can accept multiple values.
|
||||
*/
|
||||
@Prop() multiple: boolean;
|
||||
|
||||
/**
|
||||
* @output {EventEmitter} Emitted when the selection is cancelled.
|
||||
*/
|
||||
@Event() ionCancel: EventEmitter;
|
||||
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'select-disabled': this.disabled
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let addPlaceholderClass = false
|
||||
|
||||
let selectText = this.selectedText || this.text;
|
||||
if (!selectText && this.placeholder) {
|
||||
selectText = this.placeholder;
|
||||
addPlaceholderClass = true;
|
||||
}
|
||||
|
||||
const selectTextClasses: CssClassMap = {
|
||||
'select-text': true,
|
||||
'select-placeholder': addPlaceholderClass
|
||||
};
|
||||
|
||||
return [
|
||||
// add placeholder class
|
||||
<div class={selectTextClasses}>{ selectText }</div>,
|
||||
<div class="select-icon">
|
||||
<div class="select-icon-inner"></div>
|
||||
</div>,
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
id={this.id}
|
||||
aria-labelledby={this.labelId}
|
||||
aria-disabled={this.disabled ? "true" : false}
|
||||
class="item-cover">
|
||||
</button>
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// export class Select extends BaseInput<any> implements OnDestroy {
|
||||
|
||||
// _options: QueryList<Option>;
|
||||
// _overlay: ActionSheet | Alert | Popover;
|
||||
// _texts: string[] = [];
|
||||
// _text: string = '';
|
||||
|
||||
|
||||
// @HostListener('click', ['$event'])
|
||||
// _click(ev: UIEvent) {
|
||||
// if (ev.detail === 0) {
|
||||
// // do not continue if the click event came from a form submit
|
||||
// return;
|
||||
// }
|
||||
// ev.preventDefault();
|
||||
// ev.stopPropagation();
|
||||
// this.open(ev);
|
||||
// }
|
||||
|
||||
// @HostListener('keyup.space')
|
||||
// _keyup() {
|
||||
// this.open();
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * @hidden
|
||||
// */
|
||||
// getValues(): any[] {
|
||||
// const values = Array.isArray(this._value) ? this._value : [this._value];
|
||||
// assert(this._multi || values.length <= 1, 'single only can have one value');
|
||||
// return values;
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Open the select interface.
|
||||
// */
|
||||
// open(ev?: UIEvent) {
|
||||
// if (this.isFocus() || this._disabled) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// console.debug('select, open alert');
|
||||
|
||||
// // the user may have assigned some options specifically for the alert
|
||||
// const selectOptions = deepCopy(this.selectOptions);
|
||||
|
||||
// // make sure their buttons array is removed from the options
|
||||
// // and we create a new array for the alert's two buttons
|
||||
// selectOptions.buttons = [{
|
||||
// text: this.cancelText,
|
||||
// role: 'cancel',
|
||||
// handler: () => {
|
||||
// this.ionCancel.emit(this);
|
||||
// }
|
||||
// }];
|
||||
|
||||
// // if the selectOptions didn't provide a title then use the label's text
|
||||
// if (!selectOptions.title && this._item) {
|
||||
// selectOptions.title = this._item.getLabelText();
|
||||
// }
|
||||
|
||||
// let options = this._options.toArray();
|
||||
// if (this.interface === 'action-sheet' && options.length > 6) {
|
||||
// console.warn('Interface cannot be "action-sheet" with more than 6 options. Using the "alert" interface.');
|
||||
// this.interface = 'alert';
|
||||
// }
|
||||
|
||||
// if ((this.interface === 'action-sheet' || this.interface === 'popover') && this._multi) {
|
||||
// console.warn('Interface cannot be "' + this.interface + '" with a multi-value select. Using the "alert" interface.');
|
||||
// this.interface = 'alert';
|
||||
// }
|
||||
|
||||
// if (this.interface === 'popover' && !ev) {
|
||||
// console.warn('Interface cannot be "popover" without UIEvent.');
|
||||
// this.interface = 'alert';
|
||||
// }
|
||||
|
||||
// let overlay: ActionSheet | Alert | Popover;
|
||||
|
||||
// if (this.interface === 'action-sheet') {
|
||||
// selectOptions.buttons = selectOptions.buttons.concat(options.map(input => {
|
||||
// return {
|
||||
// role: (input.selected ? 'selected' : ''),
|
||||
// text: input.text,
|
||||
// handler: () => {
|
||||
// this.value = input.value;
|
||||
// input.ionSelect.emit(input.value);
|
||||
// }
|
||||
// };
|
||||
// }));
|
||||
// var selectCssClass = 'select-action-sheet';
|
||||
|
||||
// // If the user passed a cssClass for the select, add it
|
||||
// selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
|
||||
|
||||
// selectOptions.cssClass = selectCssClass;
|
||||
// overlay = new ActionSheet(this._app, selectOptions, this.config);
|
||||
|
||||
// } else if (this.interface === 'popover') {
|
||||
// let popoverOptions: SelectPopoverOption[] = options.map(input => ({
|
||||
// text: input.text,
|
||||
// checked: input.selected,
|
||||
// disabled: input.disabled,
|
||||
// value: input.value,
|
||||
// handler: () => {
|
||||
// this.value = input.value;
|
||||
// input.ionSelect.emit(input.value);
|
||||
// }
|
||||
// }));
|
||||
|
||||
// var popoverCssClass = 'select-popover';
|
||||
|
||||
// // If the user passed a cssClass for the select, add it
|
||||
// popoverCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
|
||||
|
||||
// overlay = new Popover(this._app, SelectPopover, {
|
||||
// options: popoverOptions
|
||||
// }, {
|
||||
// cssClass: popoverCssClass
|
||||
// }, this.config, this.deepLinker);
|
||||
|
||||
// // ev.target is readonly.
|
||||
// // place popover regarding to ion-select instead of .button-inner
|
||||
// Object.defineProperty(ev, 'target', { value: ev.currentTarget });
|
||||
// selectOptions.ev = ev;
|
||||
|
||||
// } else {
|
||||
// // default to use the alert interface
|
||||
// this.interface = 'alert';
|
||||
|
||||
// // user cannot provide inputs from selectOptions
|
||||
// // alert inputs must be created by ionic from ion-options
|
||||
// selectOptions.inputs = this._options.map(input => {
|
||||
// return {
|
||||
// type: (this._multi ? 'checkbox' : 'radio'),
|
||||
// label: input.text,
|
||||
// value: input.value,
|
||||
// checked: input.selected,
|
||||
// disabled: input.disabled,
|
||||
// handler: (selectedOption: any) => {
|
||||
// // Only emit the select event if it is being checked
|
||||
// // For multi selects this won't emit when unchecking
|
||||
// if (selectedOption.checked) {
|
||||
// input.ionSelect.emit(input.value);
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
// });
|
||||
|
||||
// var selectCssClass = 'select-alert';
|
||||
|
||||
// // create the alert instance from our built up selectOptions
|
||||
// overlay = new Alert(this._app, selectOptions, this.config);
|
||||
|
||||
// if (this._multi) {
|
||||
// // use checkboxes
|
||||
// selectCssClass += ' multiple-select-alert';
|
||||
// } else {
|
||||
// // use radio buttons
|
||||
// selectCssClass += ' single-select-alert';
|
||||
// }
|
||||
|
||||
// // If the user passed a cssClass for the select, add it
|
||||
// selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
|
||||
// overlay.setCssClass(selectCssClass);
|
||||
|
||||
// overlay.addButton({
|
||||
// text: this.okText,
|
||||
// handler: (selectedValues) => this.value = selectedValues
|
||||
// });
|
||||
|
||||
// }
|
||||
|
||||
// overlay.present(selectOptions);
|
||||
|
||||
// this._fireFocus();
|
||||
|
||||
// overlay.onDidDismiss(() => {
|
||||
// this._fireBlur();
|
||||
// this._overlay = undefined;
|
||||
// });
|
||||
|
||||
// this._overlay = overlay;
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Close the select interface.
|
||||
// */
|
||||
// close(): Promise<any> {
|
||||
// if (!this._overlay || !this.isFocus()) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// return this._overlay.dismiss();
|
||||
// }
|
||||
|
||||
|
||||
// /**
|
||||
// * @hidden
|
||||
// */
|
||||
// get text() {
|
||||
// return (this._multi ? this._texts : this._texts.join());
|
||||
// }
|
||||
|
||||
|
||||
// /**
|
||||
// * @private
|
||||
// */
|
||||
// @ContentChildren(Option)
|
||||
// set options(val: QueryList<Option>) {
|
||||
// this._options = val;
|
||||
// const values = this.getValues();
|
||||
// if (values.length === 0) {
|
||||
// // there are no values set at this point
|
||||
// // so check to see who should be selected
|
||||
// // we use writeValue() because we don't want to update ngModel
|
||||
// this.writeValue(val.filter(o => o.selected).map(o => o.value));
|
||||
// } else {
|
||||
// this._inputUpdated();
|
||||
// }
|
||||
// }
|
||||
|
||||
// _inputShouldChange(val: string[]|string): boolean {
|
||||
// return !deepEqual(this._value, val);
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * TODO: REMOVE THIS
|
||||
// * @hidden
|
||||
// */
|
||||
// _inputChangeEvent(): any {
|
||||
// return this.value;
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * @hidden
|
||||
// */
|
||||
// _inputUpdated() {
|
||||
// this._texts.length = 0;
|
||||
|
||||
// if (this._options) {
|
||||
// this._options.forEach(option => {
|
||||
// // check this option if the option's value is in the values array
|
||||
// option.selected = this.getValues().some(selectValue => {
|
||||
// return isCheckedProperty(selectValue, option.value);
|
||||
// });
|
||||
|
||||
// if (option.selected) {
|
||||
// this._texts.push(option.text);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// this._text = this._texts.join(', ');
|
||||
// }
|
||||
|
||||
// }
|
||||
93
packages/core/src/components/select/select.wp.scss
Normal file
93
packages/core/src/components/select/select.wp.scss
Normal file
@ -0,0 +1,93 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./select";
|
||||
|
||||
// Windows Select
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top and bottom of the select
|
||||
$select-wp-padding-vertical: 0 !default;
|
||||
|
||||
/// @prop - Padding start/end of the select
|
||||
$select-wp-padding-horizontal: ($item-wp-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Margin top of the select
|
||||
$select-wp-margin-top: $item-wp-padding-top !default;
|
||||
|
||||
/// @prop - Margin end of the select
|
||||
$select-wp-margin-end: ($item-wp-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Margin bottom of the select
|
||||
$select-wp-margin-bottom: $item-wp-padding-bottom !default;
|
||||
|
||||
/// @prop - Margin start of the select
|
||||
$select-wp-margin-start: ($item-wp-padding-start / 2) !default;
|
||||
|
||||
/// @prop - Border width of the select
|
||||
$select-wp-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border color of the select
|
||||
$select-wp-border-color: $input-wp-border-color !default;
|
||||
|
||||
/// @prop - Width of the select icon
|
||||
$select-wp-icon-width: 18px !default;
|
||||
|
||||
/// @prop - Width of the select icon arrow
|
||||
$select-wp-icon-arrow-width: 2px !default;
|
||||
|
||||
/// @prop - Color of the select icon
|
||||
$select-wp-icon-color: $select-wp-border-color !default;
|
||||
|
||||
/// @prop - Color of the select placeholder
|
||||
$select-wp-placeholder-color: $select-wp-icon-color !default;
|
||||
|
||||
|
||||
.select-wp {
|
||||
@include margin($select-wp-margin-top, $select-wp-margin-end, $select-wp-margin-bottom, $select-wp-margin-start);
|
||||
@include padding($select-wp-padding-vertical, $select-wp-padding-horizontal);
|
||||
|
||||
flex: 1;
|
||||
|
||||
max-width: 100%;
|
||||
|
||||
border: $select-wp-border-width solid $select-wp-border-color;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.select-wp .select-placeholder {
|
||||
color: $select-wp-placeholder-color;
|
||||
}
|
||||
|
||||
.item-wp.item-select ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
.select-wp .select-icon {
|
||||
position: relative;
|
||||
|
||||
align-self: center;
|
||||
|
||||
width: $select-wp-icon-width;
|
||||
height: $select-wp-icon-width;
|
||||
}
|
||||
|
||||
.select-wp .select-icon .select-icon-inner {
|
||||
@include position(3px, null, null, 5px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
|
||||
width: ($select-wp-icon-width / 2);
|
||||
height: ($select-wp-icon-width / 2);
|
||||
|
||||
border-top: $select-wp-icon-arrow-width solid $select-wp-icon-color;
|
||||
border-right: $select-wp-icon-arrow-width solid $select-wp-icon-color;
|
||||
|
||||
transform: rotate(135deg);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.select-wp .select-text {
|
||||
min-height: 3rem;
|
||||
}
|
||||
237
packages/core/src/components/select/test/basic.html
Normal file
237
packages/core/src/components/select/test/basic.html
Normal file
@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic Select</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content test-content">
|
||||
<ion-list>
|
||||
<ion-list-header>Single Value Select</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select name="gender" placeholder="Select One">
|
||||
<ion-option value="f">Female</ion-option>
|
||||
<ion-option value="m">Male</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Hair Color</ion-label>
|
||||
<ion-select name="hairColor" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-option value="brown">Brown</ion-option>
|
||||
<ion-option value="blonde">Blonde</ion-option>
|
||||
<ion-option value="black">Black</ion-option>
|
||||
<ion-option value="red">Red</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
|
||||
<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-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select (ionChange)="monthChange($event)" placeholder="Month">
|
||||
<ion-option value="01">January</ion-option>
|
||||
<ion-option value="02">February</ion-option>
|
||||
<ion-option value="03" selected="true">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">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 (ionChange)="yearChange($event)" placeholder="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 selected="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>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Popover Interface Select</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select name="gender" interface="popover">
|
||||
<ion-option value="f">Female</ion-option>
|
||||
<ion-option value="m">Male</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss" selected-text="Nintendo 64" interface="popover">
|
||||
<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-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select (ionChange)="monthChange($event)" placeholder="Month" interface="popover">
|
||||
<ion-option value="01">January</ion-option>
|
||||
<ion-option value="02">February</ion-option>
|
||||
<ion-option value="03" selected="true">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">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 (ionChange)="yearChange($event)" placeholder="Year" interface="popover">
|
||||
<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 selected="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>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Multiple Value Select</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select name="toppings" multiple="true" cancel-text="Nah" ok-text="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-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select name="pets" multiple="true">
|
||||
<ion-option value="bird">Bird</ion-option>
|
||||
<ion-option value="cat">Cat</ion-option>
|
||||
<ion-option value="dog">Dog</ion-option>
|
||||
<ion-option value="honeybadger">Honey Badger</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Skittles</ion-label>
|
||||
<ion-select name="skittles" multiple="true" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-option value="red">Red</ion-option>
|
||||
<ion-option value="purple">Purple</ion-option>
|
||||
<ion-option value="yellow">Yellow</ion-option>
|
||||
<ion-option value="orange">Orange</ion-option>
|
||||
<ion-option value="green">Green</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-select multiple disabled="true">
|
||||
<ion-option checked="true">Selected Text</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Action Sheet Interface Select</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Mute Notifications</ion-label>
|
||||
<ion-select name="notifications" interface="action-sheet">
|
||||
<ion-option value="mute_15">For 15 Minutes</ion-option>
|
||||
<ion-option value="mute_1">For 1 Hour</ion-option>
|
||||
<ion-option value="mute_23">For 24 Hours</ion-option>
|
||||
<ion-option value="mute_inf">Until I turn it back on</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Rating</ion-label>
|
||||
<ion-select name="rating" interface="action-sheet">
|
||||
<ion-option value="1">1 Star</ion-option>
|
||||
<ion-option value="2">2 Stars</ion-option>
|
||||
<ion-option value="3">3 Stars</ion-option>
|
||||
<ion-option value="4">4 Stars</ion-option>
|
||||
<ion-option value="5">5 Stars</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<div text-center>
|
||||
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
|
||||
Toggle Disabled
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function toggleBoolean(id, prop) {
|
||||
var ele = document.getElementById(id);
|
||||
|
||||
var isTrue = ele[prop] ? false : true;
|
||||
ele[prop] = isTrue;
|
||||
console.log('in toggleBoolean, setting', prop, 'to', isTrue);
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user