mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
refactor(): remove checked property in favor of parent value (#19449)
BREAKING CHANGE: The following components have been updated to remove the checked or selected properties: - Radio - Segment Button - Select Developers should set the value property on the respective parent components in order to managed checked/selected status. Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Manu MA
79
BREAKING.md
79
BREAKING.md
@ -25,8 +25,11 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
* [List Header](#list-header)
|
||||
* [Menu](#menu)
|
||||
* [Nav Link](#nav-link)
|
||||
* [Radio](#radio)
|
||||
* [Searchbar](#searchbar)
|
||||
* [Segment](#segment)
|
||||
* [Segment Button](#segment-button)
|
||||
* [Select Option](#select-option)
|
||||
* [Skeleton Text](#skeleton-text)
|
||||
* [Split Pane](#split-pane)
|
||||
* [Toast](#toast)
|
||||
@ -194,6 +197,34 @@ The list header has been redesigned to match the latest iOS spec. This may break
|
||||
The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
|
||||
|
||||
|
||||
#### Radio
|
||||
|
||||
The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button.
|
||||
|
||||
Before
|
||||
|
||||
```html
|
||||
<ion-radio checked>One</ion-radio>
|
||||
|
||||
<ion-radio-group>
|
||||
<ion-radio>One</ion-radio>
|
||||
<ion-radio checked>Two</ion-radio>
|
||||
</ion-radio-group>
|
||||
```
|
||||
|
||||
After
|
||||
|
||||
```html
|
||||
<ion-radio-group value="one">
|
||||
<ion-radio value="one">One</ion-radio>
|
||||
</ion-radio-group>
|
||||
|
||||
<ion-radio-group value="two">
|
||||
<ion-radio value="one">One</ion-radio>
|
||||
<ion-radio value="two">Two</ion-radio>
|
||||
</ion-radio-group>
|
||||
```
|
||||
|
||||
#### Searchbar
|
||||
|
||||
##### Show Cancel Button
|
||||
@ -226,6 +257,54 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
|
||||
<!-- TODO https://gist.github.com/brandyscarney/e6cfe43c359bb2c932e12f8d615e1669 -->
|
||||
|
||||
|
||||
#### Segment Button
|
||||
|
||||
The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button.
|
||||
|
||||
Before
|
||||
|
||||
```html
|
||||
<ion-segment>
|
||||
<ion-segment-button>One</ion-segment-button>
|
||||
<ion-segment-button checked>Two</ion-segment-button>
|
||||
<ion-segment-button>Three</ion-segment-button>
|
||||
</ion-segment>
|
||||
```
|
||||
|
||||
After
|
||||
|
||||
```html
|
||||
<ion-segment value="two">
|
||||
<ion-segment-button value="one">One</ion-segment-button>
|
||||
<ion-segment-button value="two">Two</ion-segment-button>
|
||||
<ion-segment-button value="three">Three</ion-segment-button>
|
||||
</ion-segment>
|
||||
```
|
||||
|
||||
|
||||
#### Select Option
|
||||
|
||||
The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option.
|
||||
|
||||
Before
|
||||
|
||||
```html
|
||||
<ion-select>
|
||||
<ion-select-option>One</ion-select-option>
|
||||
<ion-select-option selected>Two</ion-select-option>
|
||||
</ion-select>
|
||||
```
|
||||
|
||||
After
|
||||
|
||||
```html
|
||||
<ion-select value="two">
|
||||
<ion-select-option value="one">One</ion-select-option>
|
||||
<ion-select-option value="two">Two</ion-select-option>
|
||||
</ion-select>
|
||||
```
|
||||
|
||||
|
||||
#### Skeleton Text
|
||||
|
||||
The `width` property has been removed in favor of using CSS styling.
|
||||
|
||||
@ -534,17 +534,16 @@ export class IonProgressBar {
|
||||
}
|
||||
|
||||
export declare interface IonRadio extends Components.IonRadio {}
|
||||
@ProxyCmp({inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']})
|
||||
@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })
|
||||
@ProxyCmp({inputs: ['color', 'disabled', 'mode', 'name', 'value']})
|
||||
@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'name', 'value'] })
|
||||
export class IonRadio {
|
||||
ionSelect!: EventEmitter<CustomEvent>;
|
||||
ionFocus!: EventEmitter<CustomEvent>;
|
||||
ionBlur!: EventEmitter<CustomEvent>;
|
||||
protected el: HTMLElement;
|
||||
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
|
||||
c.detach();
|
||||
this.el = r.nativeElement;
|
||||
proxyOutputs(this, this.el, ['ionSelect', 'ionFocus', 'ionBlur']);
|
||||
proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
|
||||
}
|
||||
}
|
||||
|
||||
@ -680,15 +679,13 @@ export class IonSegment {
|
||||
}
|
||||
|
||||
export declare interface IonSegmentButton extends Components.IonSegmentButton {}
|
||||
@ProxyCmp({inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value']})
|
||||
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value'] })
|
||||
@ProxyCmp({inputs: ['disabled', 'layout', 'mode', 'type', 'value']})
|
||||
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'layout', 'mode', 'type', 'value'] })
|
||||
export class IonSegmentButton {
|
||||
ionSelect!: EventEmitter<CustomEvent>;
|
||||
protected el: HTMLElement;
|
||||
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
|
||||
c.detach();
|
||||
this.el = r.nativeElement;
|
||||
proxyOutputs(this, this.el, ['ionSelect']);
|
||||
}
|
||||
}
|
||||
|
||||
@ -709,8 +706,8 @@ export class IonSelect {
|
||||
}
|
||||
|
||||
export declare interface IonSelectOption extends Components.IonSelectOption {}
|
||||
@ProxyCmp({inputs: ['disabled', 'selected', 'value']})
|
||||
@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'selected', 'value'] })
|
||||
@ProxyCmp({inputs: ['disabled', 'value']})
|
||||
@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'value'] })
|
||||
export class IonSelectOption {
|
||||
protected el: HTMLElement;
|
||||
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
|
||||
|
||||
@ -790,7 +790,6 @@ ion-progress-bar,css-prop,--buffer-background
|
||||
ion-progress-bar,css-prop,--progress-background
|
||||
|
||||
ion-radio,shadow
|
||||
ion-radio,prop,checked,boolean,false,false,false
|
||||
ion-radio,prop,color,string | undefined,undefined,false,false
|
||||
ion-radio,prop,disabled,boolean,false,false,false
|
||||
ion-radio,prop,mode,"ios" | "md",undefined,false,false
|
||||
@ -798,7 +797,6 @@ ion-radio,prop,name,string,this.inputId,false,false
|
||||
ion-radio,prop,value,any,undefined,false,false
|
||||
ion-radio,event,ionBlur,void,true
|
||||
ion-radio,event,ionFocus,void,true
|
||||
ion-radio,event,ionSelect,RadioChangeEventDetail,true
|
||||
ion-radio,css-prop,--border-radius
|
||||
ion-radio,css-prop,--color
|
||||
ion-radio,css-prop,--color-checked
|
||||
@ -952,13 +950,11 @@ ion-segment,event,ionChange,SegmentChangeEventDetail,true
|
||||
ion-segment,css-prop,--background
|
||||
|
||||
ion-segment-button,shadow
|
||||
ion-segment-button,prop,checked,boolean,false,false,false
|
||||
ion-segment-button,prop,disabled,boolean,false,false,false
|
||||
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
|
||||
ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
|
||||
ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
|
||||
ion-segment-button,event,ionSelect,void,true
|
||||
ion-segment-button,css-prop,--background
|
||||
ion-segment-button,css-prop,--background-checked
|
||||
ion-segment-button,css-prop,--background-disabled
|
||||
@ -1012,7 +1008,6 @@ ion-select,css-prop,--placeholder-opacity
|
||||
|
||||
ion-select-option,shadow
|
||||
ion-select-option,prop,disabled,boolean,false,false,false
|
||||
ion-select-option,prop,selected,boolean,false,false,false
|
||||
ion-select-option,prop,value,any,undefined,false,false
|
||||
|
||||
ion-skeleton-text,shadow
|
||||
|
||||
33
core/src/components.d.ts
vendored
33
core/src/components.d.ts
vendored
@ -33,7 +33,6 @@ import {
|
||||
OverlayEventDetail,
|
||||
PickerButton,
|
||||
PickerColumn,
|
||||
RadioChangeEventDetail,
|
||||
RadioGroupChangeEventDetail,
|
||||
RangeChangeEventDetail,
|
||||
RangeValue,
|
||||
@ -1701,10 +1700,6 @@ export namespace Components {
|
||||
'value': number;
|
||||
}
|
||||
interface IonRadio {
|
||||
/**
|
||||
* If `true`, the radio is selected.
|
||||
*/
|
||||
'checked': boolean;
|
||||
/**
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
@ -2063,10 +2058,6 @@ export namespace Components {
|
||||
'value'?: string | null;
|
||||
}
|
||||
interface IonSegmentButton {
|
||||
/**
|
||||
* If `true`, the segment button is selected.
|
||||
*/
|
||||
'checked': boolean;
|
||||
/**
|
||||
* If `true`, the user cannot interact with the segment button.
|
||||
*/
|
||||
@ -2149,10 +2140,6 @@ export namespace Components {
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* If `true`, the element is selected.
|
||||
*/
|
||||
'selected': boolean;
|
||||
/**
|
||||
* The text value of the option.
|
||||
*/
|
||||
'value'?: any | null;
|
||||
@ -4841,10 +4828,6 @@ declare namespace LocalJSX {
|
||||
'value'?: number;
|
||||
}
|
||||
interface IonRadio {
|
||||
/**
|
||||
* If `true`, the radio is selected.
|
||||
*/
|
||||
'checked'?: boolean;
|
||||
/**
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
@ -4870,10 +4853,6 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'onIonFocus'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the radio button is selected.
|
||||
*/
|
||||
'onIonSelect'?: (event: CustomEvent<RadioChangeEventDetail>) => void;
|
||||
/**
|
||||
* the value of the radio.
|
||||
*/
|
||||
'value'?: any | null;
|
||||
@ -5243,10 +5222,6 @@ declare namespace LocalJSX {
|
||||
'value'?: string | null;
|
||||
}
|
||||
interface IonSegmentButton {
|
||||
/**
|
||||
* If `true`, the segment button is selected.
|
||||
*/
|
||||
'checked'?: boolean;
|
||||
/**
|
||||
* If `true`, the user cannot interact with the segment button.
|
||||
*/
|
||||
@ -5260,10 +5235,6 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'mode'?: "ios" | "md";
|
||||
/**
|
||||
* Emitted when the segment button is clicked.
|
||||
*/
|
||||
'onIonSelect'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* The type of the button.
|
||||
*/
|
||||
'type'?: 'submit' | 'reset' | 'button';
|
||||
@ -5344,10 +5315,6 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* If `true`, the element is selected.
|
||||
*/
|
||||
'selected'?: boolean;
|
||||
/**
|
||||
* The text value of the option.
|
||||
*/
|
||||
'value'?: any | null;
|
||||
|
||||
@ -188,6 +188,7 @@
|
||||
label: 'Radio 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
|
||||
@ -46,10 +46,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled Select</ion-label>
|
||||
<ion-select disabled>
|
||||
<ion-select disabled value="n64">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
<ion-select-option value="n64">Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
|
||||
@ -38,10 +38,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-select name="select" id="select">
|
||||
<ion-select name="select" id="select" value="n64">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
<ion-select-option value="n64">Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
|
||||
@ -2,7 +2,6 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { RadioGroupChangeEventDetail } from '../../interface';
|
||||
import { findCheckedOption, watchForOptions } from '../../utils/watch-options';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-radio-group'
|
||||
@ -11,7 +10,6 @@ export class RadioGroup implements ComponentInterface {
|
||||
|
||||
private inputId = `ion-rg-${radioGroupIds++}`;
|
||||
private labelId = `${this.inputId}-lbl`;
|
||||
private mutationO?: MutationObserver;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@ -32,7 +30,6 @@ export class RadioGroup implements ComponentInterface {
|
||||
|
||||
@Watch('value')
|
||||
valueChanged(value: any | undefined) {
|
||||
this.updateRadios();
|
||||
this.ionChange.emit({ value });
|
||||
}
|
||||
|
||||
@ -52,89 +49,19 @@ export class RadioGroup implements ComponentInterface {
|
||||
this.labelId = label.id = this.name + '-lbl';
|
||||
}
|
||||
}
|
||||
|
||||
if (this.value === undefined) {
|
||||
const radio = findCheckedOption(el, 'ion-radio') as HTMLIonRadioElement | undefined;
|
||||
if (radio !== undefined) {
|
||||
await radio.componentOnReady();
|
||||
if (this.value === undefined) {
|
||||
this.value = radio.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.mutationO = watchForOptions<HTMLIonRadioElement>(el, 'ion-radio', newOption => {
|
||||
if (newOption !== undefined) {
|
||||
newOption.componentOnReady().then(() => {
|
||||
this.value = newOption.value;
|
||||
});
|
||||
} else {
|
||||
this.updateRadios();
|
||||
}
|
||||
});
|
||||
this.updateRadios();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.mutationO) {
|
||||
this.mutationO.disconnect();
|
||||
this.mutationO = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private async updateRadios() {
|
||||
/**
|
||||
* Make sure we get all radios first
|
||||
* so values are up to date prior
|
||||
* to caching the radio group value
|
||||
*/
|
||||
const radios = await this.getRadios();
|
||||
const { value } = this;
|
||||
|
||||
let hasChecked = false;
|
||||
|
||||
// Walk the DOM in reverse order, since the last selected one wins!
|
||||
for (const radio of radios) {
|
||||
if (!hasChecked && radio.value === value) {
|
||||
// correct value for this radio
|
||||
// but this radio isn't checked yet
|
||||
// and we haven't found a checked yet
|
||||
hasChecked = true;
|
||||
radio.checked = true;
|
||||
} else {
|
||||
// this radio doesn't have the correct value
|
||||
// or the radio group has been already checked
|
||||
radio.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset value if
|
||||
if (!hasChecked) {
|
||||
private onClick = (ev: Event) => {
|
||||
const selectedRadio = ev.target && (ev.target as HTMLElement).closest('ion-radio');
|
||||
if (selectedRadio) {
|
||||
const currentValue = this.value;
|
||||
const newValue = selectedRadio.value;
|
||||
if (newValue !== currentValue) {
|
||||
this.value = newValue;
|
||||
} else if (this.allowEmptySelection) {
|
||||
this.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private getRadios() {
|
||||
return Promise.all(
|
||||
Array
|
||||
.from(this.el.querySelectorAll('ion-radio'))
|
||||
.map(r => r.componentOnReady())
|
||||
);
|
||||
}
|
||||
|
||||
private onSelect = (ev: Event) => {
|
||||
const selectedRadio = ev.target as HTMLIonRadioElement | null;
|
||||
if (selectedRadio) {
|
||||
this.value = selectedRadio.value;
|
||||
}
|
||||
}
|
||||
|
||||
private onDeselect = (ev: Event) => {
|
||||
const selectedRadio = ev.target as HTMLIonRadioElement | null;
|
||||
if (selectedRadio) {
|
||||
selectedRadio.checked = false;
|
||||
this.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -142,8 +69,7 @@ export class RadioGroup implements ComponentInterface {
|
||||
<Host
|
||||
role="radiogroup"
|
||||
aria-labelledby={this.labelId}
|
||||
onIonSelect={this.onSelect}
|
||||
onIonDeselect={this.allowEmptySelection ? this.onDeselect : undefined}
|
||||
onClick={this.onClick}
|
||||
class={getIonMode(this)}
|
||||
>
|
||||
</Host>
|
||||
|
||||
@ -90,9 +90,11 @@
|
||||
const item = document.createElement('ion-item');
|
||||
item.innerHTML = `
|
||||
<ion-label>Item ${count}</ion-label>
|
||||
<ion-radio value="item-${count}" slot="start" checked></ion-radio>
|
||||
<ion-radio value="item-${count}" slot="start"></ion-radio>
|
||||
`;
|
||||
group.appendChild(item);
|
||||
|
||||
group.value = `item-${count}`;
|
||||
count++;
|
||||
}
|
||||
function removeSelect() {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value="danger">
|
||||
<ion-radio></ion-radio>
|
||||
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
@ -20,7 +20,7 @@
|
||||
<ion-radio color="tertiary"></ion-radio>
|
||||
<ion-radio color="success"></ion-radio>
|
||||
<ion-radio color="warning"></ion-radio>
|
||||
<ion-radio color="danger" checked></ion-radio>
|
||||
<ion-radio color="danger" value="danger"></ion-radio>
|
||||
<ion-radio color="light"></ion-radio>
|
||||
<ion-radio color="medium"></ion-radio>
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
@ -32,9 +32,9 @@
|
||||
<p>
|
||||
allow-empty-selection="true":
|
||||
<ion-radio-group allow-empty-selection="true">
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
<ion-radio color="secondary"></ion-radio>
|
||||
<ion-radio color="tertiary"></ion-radio>
|
||||
<ion-radio color="primary" value="1"></ion-radio>
|
||||
<ion-radio color="secondary" value="2"></ion-radio>
|
||||
<ion-radio color="tertiary" value="3"></ion-radio>
|
||||
</ion-radio-group>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color, RadioChangeEventDetail, StyleEventDetail } from '../../interface';
|
||||
import { Color, StyleEventDetail } from '../../interface';
|
||||
import { findItemLabel } from '../../utils/helpers';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
|
||||
@ -19,9 +19,15 @@ import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
export class Radio implements ComponentInterface {
|
||||
|
||||
private inputId = `ion-rb-${radioButtonIds++}`;
|
||||
private radioGroup: HTMLIonRadioGroupElement | null = null;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
/**
|
||||
* If `true`, the radio is selected.
|
||||
*/
|
||||
@State() checked = false;
|
||||
|
||||
/**
|
||||
* The color to use from your application's color palette.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
@ -39,15 +45,10 @@ export class Radio implements ComponentInterface {
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* If `true`, the radio is selected.
|
||||
*/
|
||||
@Prop({ mutable: true }) checked = false;
|
||||
|
||||
/**
|
||||
* the value of the radio.
|
||||
*/
|
||||
@Prop({ mutable: true }) value?: any | null;
|
||||
@Prop() value?: any | null;
|
||||
|
||||
/**
|
||||
* Emitted when the styles change.
|
||||
@ -55,17 +56,6 @@ export class Radio implements ComponentInterface {
|
||||
*/
|
||||
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted when the radio button is selected.
|
||||
*/
|
||||
@Event() ionSelect!: EventEmitter<RadioChangeEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted when checked radio button is selected.
|
||||
* @internal
|
||||
*/
|
||||
@Event() ionDeselect!: EventEmitter<RadioChangeEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted when the radio button has focus.
|
||||
*/
|
||||
@ -76,41 +66,45 @@ export class Radio implements ComponentInterface {
|
||||
*/
|
||||
@Event() ionBlur!: EventEmitter<void>;
|
||||
|
||||
@Watch('color')
|
||||
colorChanged() {
|
||||
this.emitStyle();
|
||||
connectedCallback() {
|
||||
const radioGroup = this.radioGroup = this.el.closest('ion-radio-group');
|
||||
if (radioGroup) {
|
||||
this.updateState();
|
||||
radioGroup.addEventListener('ionChange', this.updateState);
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('checked')
|
||||
checkedChanged(isChecked: boolean) {
|
||||
if (isChecked) {
|
||||
this.ionSelect.emit({
|
||||
checked: true,
|
||||
value: this.value
|
||||
});
|
||||
disconnectedCallback() {
|
||||
const radioGroup = this.radioGroup;
|
||||
if (radioGroup) {
|
||||
radioGroup.removeEventListener('ionChange', this.updateState);
|
||||
if (this.checked) {
|
||||
radioGroup.value = undefined;
|
||||
}
|
||||
this.emitStyle();
|
||||
this.radioGroup = null;
|
||||
}
|
||||
|
||||
@Watch('disabled')
|
||||
disabledChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
if (this.value === undefined) {
|
||||
this.value = this.inputId;
|
||||
}
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
private emitStyle() {
|
||||
@Watch('color')
|
||||
@Watch('checked')
|
||||
@Watch('disabled')
|
||||
emitStyle() {
|
||||
this.ionStyle.emit({
|
||||
'radio-checked': this.checked,
|
||||
'interactive-disabled': this.disabled,
|
||||
});
|
||||
}
|
||||
|
||||
private updateState = () => {
|
||||
if (this.radioGroup) {
|
||||
this.checked = this.radioGroup.value === this.value;
|
||||
}
|
||||
}
|
||||
|
||||
private onFocus = () => {
|
||||
this.ionFocus.emit();
|
||||
}
|
||||
@ -119,14 +113,6 @@ export class Radio implements ComponentInterface {
|
||||
this.ionBlur.emit();
|
||||
}
|
||||
|
||||
private onClick = () => {
|
||||
if (this.checked) {
|
||||
this.ionDeselect.emit();
|
||||
} else {
|
||||
this.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { inputId, disabled, checked, color, el } = this;
|
||||
const mode = getIonMode(this);
|
||||
@ -137,7 +123,6 @@ export class Radio implements ComponentInterface {
|
||||
}
|
||||
return (
|
||||
<Host
|
||||
onClick={this.onClick}
|
||||
role="radio"
|
||||
aria-disabled={disabled ? 'true' : null}
|
||||
aria-checked={`${checked}`}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# ion-radio
|
||||
|
||||
Radios are generally used as a set of related options inside of a group, but they can also be used alone. Pressing on a radio will check it. They can also be checked programmatically by setting the `checked` property.
|
||||
Radios should be used inside of an [`ion-radio-group`](../radio-group). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.
|
||||
|
||||
An `ion-radio-group` can be used to group a set of radios. When radios are inside of a [radio group](../radio-group), only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.
|
||||
When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.
|
||||
|
||||
|
||||
|
||||
@ -16,14 +16,14 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value="biff">
|
||||
<ion-list-header>
|
||||
<ion-label>Name</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Biff</ion-label>
|
||||
<ion-radio slot="start" value="biff" checked></ion-radio>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@ -49,14 +49,14 @@ import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, Ion
|
||||
export const RadioExample: React.FC = () => (
|
||||
<IonContent>
|
||||
<IonList>
|
||||
<IonRadioGroup>
|
||||
<IonRadioGroup value="biff">
|
||||
<IonListHeader>
|
||||
<IonLabel>Name</IonLabel>
|
||||
</IonListHeader>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Biff</IonLabel>
|
||||
<IonRadio slot="start" value="biff" checked />
|
||||
<IonRadio slot="start" value="biff" />
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
@ -80,14 +80,14 @@ export const RadioExample: React.FC = () => (
|
||||
```html
|
||||
<template>
|
||||
<ion-list>
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value="biff">
|
||||
<ion-list-header>
|
||||
<ion-label>Name</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Biff</ion-label>
|
||||
<ion-radio slot="start" value="biff" checked></ion-radio>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@ -110,7 +110,6 @@ export const RadioExample: React.FC = () => (
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- |
|
||||
| `checked` | `checked` | If `true`, the radio is selected. | `boolean` | `false` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the radio. | `boolean` | `false` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
@ -121,10 +120,9 @@ export const RadioExample: React.FC = () => (
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ----------- | ------------------------------------------ | ------------------------------------- |
|
||||
| ---------- | ------------------------------------------ | ------------------- |
|
||||
| `ionBlur` | Emitted when the radio button loses focus. | `CustomEvent<void>` |
|
||||
| `ionFocus` | Emitted when the radio button has focus. | `CustomEvent<void>` |
|
||||
| `ionSelect` | Emitted when the radio button is selected. | `CustomEvent<RadioChangeEventDetail>` |
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
<ion-content id="content" class="radio-test outer-content">
|
||||
<ion-list>
|
||||
<ion-radio-group id="fruitRadio">
|
||||
<ion-radio-group id="fruitRadio" value="grape">
|
||||
<ion-item-divider>
|
||||
<ion-label>Fruits (Group w/ values)</ion-label>
|
||||
</ion-item-divider>
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
|
||||
<ion-radio slot="start" id="grapeChecked" value="grape" disabled></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@ -41,22 +41,22 @@
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
|
||||
<ion-radio-group id="pizzaRadio">
|
||||
<ion-radio-group id="pizzaRadio" value="pepperoni">
|
||||
<ion-item-divider>
|
||||
<ion-label>Extra Pizza Topping (Group w/ no values)</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-label>Pepperoni</ion-label>
|
||||
<ion-radio slot="end" name="pepperoni" checked id="pepperoni-radio"></ion-radio>
|
||||
<ion-radio slot="end" name="pepperoni" value="pepperoni" id="pepperoni-radio"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Sausage</ion-label>
|
||||
<ion-radio slot="end" color="danger" name="sausage"></ion-radio>
|
||||
<ion-radio slot="end" color="danger" name="sausage" value="sausage"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
|
||||
<ion-radio-group id="veggiesRadio" allow-empty-selection>
|
||||
<ion-radio-group id="veggiesRadio" value="broccoli" allow-empty-selection>
|
||||
<ion-item-divider>
|
||||
<ion-label>Veggies (Group w/ allow empty)</ion-label>
|
||||
</ion-item-divider>
|
||||
@ -72,14 +72,14 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Broccoli</ion-label>
|
||||
<ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
|
||||
<ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
|
||||
<ion-radio-group allow-empty-selection>
|
||||
<ion-radio-group allow-empty-selection value="custom">
|
||||
<ion-item>
|
||||
<ion-label>Custom</ion-label>
|
||||
<ion-radio slot="end" color="danger" value="custom" style="--border-radius:2px;--inner-border-radius: 10px 0px 10px 0px;" checked></ion-radio>
|
||||
<ion-radio slot="end" color="danger" value="custom" style="--border-radius:2px;--inner-border-radius: 10px 0px 10px 0px;"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
|
||||
@ -105,19 +105,14 @@
|
||||
<ion-radio slot="start" color="secondary"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
|
||||
<ion-radio slot="start" color="light" checked="true"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
||||
<ion-radio slot="end" color="danger" checked></ion-radio>
|
||||
<ion-radio slot="end" color="danger"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-radio slot="end" checked></ion-radio>
|
||||
<ion-radio slot="end"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@ -133,16 +128,19 @@
|
||||
<span id="standAloneCheckedSpan"></span>
|
||||
</p>
|
||||
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox / Toggle</ion-label>
|
||||
<ion-radio slot="start" id="checked"></ion-radio>
|
||||
<ion-toggle id="checked"></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-radio-group>
|
||||
<ion-item>
|
||||
<ion-label>Checked</ion-label>
|
||||
<ion-radio slot="start" checked></ion-radio>
|
||||
<ion-toggle checked></ion-toggle>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-radio slot="start" disabled></ion-radio>
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
<body>
|
||||
<h1>Default</h1>
|
||||
<ion-radio></ion-radio>
|
||||
<ion-radio checked></ion-radio>
|
||||
<ion-radio-group>
|
||||
<ion-radio></ion-radio>
|
||||
</ion-radio-group>
|
||||
|
||||
<h1>Colors: Unchecked</h1>
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
@ -28,27 +30,50 @@
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
|
||||
<h1>Colors: Checked</h1>
|
||||
<ion-radio checked color="primary"></ion-radio>
|
||||
<ion-radio checked color="secondary"></ion-radio>
|
||||
<ion-radio checked color="tertiary"></ion-radio>
|
||||
<ion-radio checked color="success"></ion-radio>
|
||||
<ion-radio checked color="warning"></ion-radio>
|
||||
<ion-radio checked color="danger"></ion-radio>
|
||||
<ion-radio checked color="light"></ion-radio>
|
||||
<ion-radio checked color="medium"></ion-radio>
|
||||
<ion-radio checked color="dark"></ion-radio>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="secondary"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="tertiary"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="success"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="warning"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="danger"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="light"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="medium"></ion-radio>
|
||||
</ion-radio-group>
|
||||
<ion-radio-group>
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
</ion-radio-group>
|
||||
|
||||
<h1>Disabled</h1>
|
||||
<ion-radio disabled></ion-radio>
|
||||
<ion-radio color="secondary" disabled></ion-radio>
|
||||
<ion-radio checked disabled></ion-radio>
|
||||
<ion-radio checked color="secondary" disabled></ion-radio>
|
||||
<ion-radio-group>
|
||||
<ion-radio disabled></ion-radio>
|
||||
<ion-radio color="secondary" disabled></ion-radio>
|
||||
</ion-radio-group>
|
||||
|
||||
<h1>Custom</h1>
|
||||
<ion-radio class="custom"></ion-radio>
|
||||
<ion-radio class="custom" checked></ion-radio>
|
||||
<ion-radio class="custom" checked color="tertiary"></ion-radio>
|
||||
<ion-radio class="custom-size" checked color="danger"></ion-radio>
|
||||
|
||||
<ion-radio-group>
|
||||
<ion-radio class="custom"></ion-radio>
|
||||
<ion-radio class="custom" color="tertiary"></ion-radio>
|
||||
<ion-radio class="custom-size" color="danger"></ion-radio>
|
||||
</ion-radio-group>
|
||||
|
||||
<style>
|
||||
/* to be able to see the radio buttons */
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value="biff">
|
||||
<ion-list-header>
|
||||
<ion-label>Name</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Biff</ion-label>
|
||||
<ion-radio slot="start" value="biff" checked></ion-radio>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value="biff">
|
||||
<ion-list-header>
|
||||
<ion-label>Name</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Biff</ion-label>
|
||||
<ion-radio slot="start" value="biff" checked></ion-radio>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
||||
@ -5,14 +5,14 @@ import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, Ion
|
||||
export const RadioExample: React.FC = () => (
|
||||
<IonContent>
|
||||
<IonList>
|
||||
<IonRadioGroup>
|
||||
<IonRadioGroup value="biff">
|
||||
<IonListHeader>
|
||||
<IonLabel>Name</IonLabel>
|
||||
</IonListHeader>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Biff</IonLabel>
|
||||
<IonRadio slot="start" value="biff" checked />
|
||||
<IonRadio slot="start" value="biff" />
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
```html
|
||||
<template>
|
||||
<ion-list>
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value="biff">
|
||||
<ion-list-header>
|
||||
<ion-label>Name</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Biff</ion-label>
|
||||
<ion-radio slot="start" value="biff" checked></ion-radio>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
||||
@ -22,14 +22,14 @@ Segment buttons are groups of related buttons inside of a [Segment](../segment).
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="paid">
|
||||
<ion-segment-button value="paid">
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="top">
|
||||
<ion-label>Top</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -58,90 +58,90 @@ Segment buttons are groups of related buttons inside of a [Segment](../segment).
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button value="2" disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -178,14 +178,14 @@ export class SegmentButtonExample {
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="paid">
|
||||
<ion-segment-button value="paid">
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="top">
|
||||
<ion-label>Top</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -214,90 +214,90 @@ export class SegmentButtonExample {
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button value="2" disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -334,14 +334,14 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Segment buttons with the first checked and the last disabled --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegment value="paid">
|
||||
<IonSegmentButton value="paid">
|
||||
<IonLabel>Paid</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="free">
|
||||
<IonLabel>Free</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton disabled>
|
||||
<IonSegmentButton disabled value="top">
|
||||
<IonLabel>Top</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
@ -370,90 +370,90 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Label only --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1">
|
||||
<IonLabel>Item One</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="2">
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="3">
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon only --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton>
|
||||
<IonSegment value="heart">
|
||||
<IonSegmentButton value="call">
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegmentButton value="heart">
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="pin">
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon top --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton>
|
||||
<IonSegment value="2">
|
||||
<IonSegmentButton value="1">
|
||||
<IonLabel>Item One</IonLabel>
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegmentButton value="2">
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="3">
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon bottom --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked layout="icon-bottom">
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1" layout="icon-bottom">
|
||||
<IonIcon name="call" />
|
||||
<IonLabel>Item One</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-bottom">
|
||||
<IonSegmentButton value="2" layout="icon-bottom">
|
||||
<IonIcon name="heart" />
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-bottom">
|
||||
<IonSegmentButton value="3" layout="icon-bottom">
|
||||
<IonIcon name="pin" />
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon start --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked layout="icon-start">
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1" layout="icon-start">
|
||||
<IonLabel>Item One</IonLabel>
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-start">
|
||||
<IonSegmentButton value="2" layout="icon-start">
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-start">
|
||||
<IonSegmentButton value="3" layout="icon-start">
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon end --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked layout="icon-end">
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1" layout="icon-end">
|
||||
<IonIcon name="call" />
|
||||
<IonLabel>Item One</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton disabled layout="icon-end">
|
||||
<IonSegmentButton value="2" disabled layout="icon-end">
|
||||
<IonIcon name="heart" />
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-end">
|
||||
<IonSegmentButton value="3" layout="icon-end">
|
||||
<IonIcon name="pin" />
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
</IonSegmentButton>
|
||||
@ -478,14 +478,14 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="paid">
|
||||
<ion-segment-button value="paid">
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="top">
|
||||
<ion-label>Top</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -514,90 +514,90 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button value="2" disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -622,7 +622,6 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| `checked` | `checked` | If `true`, the segment button is selected. | `boolean` | `false` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
|
||||
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
@ -630,13 +629,6 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ----------- | ------------------------------------------- | ------------------- |
|
||||
| `ionSelect` | Emitted when the segment button is clicked. | `CustomEvent<void>` |
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';
|
||||
import { Component, ComponentInterface, Element, Host, Prop, State, h } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { SegmentButtonLayout } from '../../interface';
|
||||
@ -19,12 +19,14 @@ let ids = 0;
|
||||
shadow: true
|
||||
})
|
||||
export class SegmentButton implements ComponentInterface, ButtonInterface {
|
||||
private segmentEl: HTMLIonSegmentElement | null = null;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
/**
|
||||
* If `true`, the segment button is selected.
|
||||
*/
|
||||
@Prop({ mutable: true }) checked = false;
|
||||
@State() checked = false;
|
||||
|
||||
/**
|
||||
* If `true`, the user cannot interact with the segment button.
|
||||
@ -46,17 +48,19 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
|
||||
*/
|
||||
@Prop() value: string = 'ion-sb-' + (ids++);
|
||||
|
||||
/**
|
||||
* Emitted when the segment button is clicked.
|
||||
*/
|
||||
@Event() ionSelect!: EventEmitter<void>;
|
||||
connectedCallback() {
|
||||
const segmentEl = this.segmentEl = this.el.closest('ion-segment');
|
||||
if (segmentEl) {
|
||||
this.updateState();
|
||||
segmentEl.addEventListener('ionChange', this.updateState);
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('checked')
|
||||
checkedChanged(newValue: boolean, oldValue: boolean) {
|
||||
// If the segment button is not already checked
|
||||
// emit the ionSelect event
|
||||
if (newValue && !oldValue) {
|
||||
this.ionSelect.emit();
|
||||
disconnectedCallback() {
|
||||
const segmentEl = this.segmentEl;
|
||||
if (segmentEl) {
|
||||
segmentEl.removeEventListener('ionChange', this.updateState);
|
||||
this.segmentEl = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,8 +72,10 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
|
||||
return !!this.el.querySelector('ion-icon');
|
||||
}
|
||||
|
||||
private onClick = () => {
|
||||
this.checked = true;
|
||||
private updateState = () => {
|
||||
if (this.segmentEl) {
|
||||
this.checked = this.segmentEl.value === this.value;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -77,7 +83,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
|
||||
const mode = getIonMode(this);
|
||||
return (
|
||||
<Host
|
||||
onClick={this.onClick}
|
||||
aria-disabled={disabled ? 'true' : null}
|
||||
class={{
|
||||
[mode]: true,
|
||||
|
||||
@ -10,14 +10,14 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="paid">
|
||||
<ion-segment-button value="paid">
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="top">
|
||||
<ion-label>Top</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -46,90 +46,90 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button value="2" disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
|
||||
@ -10,14 +10,14 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="paid">
|
||||
<ion-segment-button value="paid">
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="top">
|
||||
<ion-label>Top</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -46,90 +46,90 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button value="2" disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
|
||||
@ -15,14 +15,14 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Segment buttons with the first checked and the last disabled --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegment value="paid">
|
||||
<IonSegmentButton value="paid">
|
||||
<IonLabel>Paid</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="free">
|
||||
<IonLabel>Free</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton disabled>
|
||||
<IonSegmentButton disabled value="top">
|
||||
<IonLabel>Top</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
@ -51,90 +51,90 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Label only --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1">
|
||||
<IonLabel>Item One</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="2">
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="3">
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon only --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton>
|
||||
<IonSegment value="heart">
|
||||
<IonSegmentButton value="call">
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegmentButton value="heart">
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="pin">
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon top --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton>
|
||||
<IonSegment value="2">
|
||||
<IonSegmentButton value="1">
|
||||
<IonLabel>Item One</IonLabel>
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegmentButton value="2">
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="3">
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon bottom --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked layout="icon-bottom">
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1" layout="icon-bottom">
|
||||
<IonIcon name="call" />
|
||||
<IonLabel>Item One</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-bottom">
|
||||
<IonSegmentButton value="2" layout="icon-bottom">
|
||||
<IonIcon name="heart" />
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-bottom">
|
||||
<IonSegmentButton value="3" layout="icon-bottom">
|
||||
<IonIcon name="pin" />
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon start --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked layout="icon-start">
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1" layout="icon-start">
|
||||
<IonLabel>Item One</IonLabel>
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-start">
|
||||
<IonSegmentButton value="2" layout="icon-start">
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-start">
|
||||
<IonSegmentButton value="3" layout="icon-start">
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Icon end --*/}
|
||||
<IonSegment>
|
||||
<IonSegmentButton checked layout="icon-end">
|
||||
<IonSegment value="1">
|
||||
<IonSegmentButton value="1" layout="icon-end">
|
||||
<IonIcon name="call" />
|
||||
<IonLabel>Item One</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton disabled layout="icon-end">
|
||||
<IonSegmentButton value="2" disabled layout="icon-end">
|
||||
<IonIcon name="heart" />
|
||||
<IonLabel>Item Two</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton layout="icon-end">
|
||||
<IonSegmentButton value="3" layout="icon-end">
|
||||
<IonIcon name="pin" />
|
||||
<IonLabel>Item Three</IonLabel>
|
||||
</IonSegmentButton>
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="paid">
|
||||
<ion-segment-button value="paid">
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="top">
|
||||
<ion-label>Top</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -47,90 +47,90 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button value="2" disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
|
||||
@ -24,8 +24,8 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment (ionChange)="segmentChanged($event)" disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
<ion-segment (ionChange)="segmentChanged($event)" disabled value="sunny">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
@ -44,26 +44,26 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Segment -->
|
||||
<ion-segment scrollable>
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -134,8 +134,8 @@ export class SegmentExample {
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
<ion-segment disabled value="sunny">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
@ -154,26 +154,26 @@ export class SegmentExample {
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Segment -->
|
||||
<ion-segment scrollable>
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -244,8 +244,8 @@ export const SegmentExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Disabled Segment --*/}
|
||||
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled>
|
||||
<IonSegmentButton value="sunny" checked>
|
||||
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
|
||||
<IonSegmentButton value="sunny">
|
||||
<IonLabel>Sunny</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="rainy">
|
||||
@ -264,26 +264,26 @@ export const SegmentExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Scrollable Segment --*/}
|
||||
<IonSegment scrollable>
|
||||
<IonSegmentButton>
|
||||
<IonSegment scrollable value="heart">
|
||||
<IonSegmentButton value="home">
|
||||
<IonIcon name="home" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegmentButton value="heart">
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="pin">
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="star">
|
||||
<IonIcon name="star" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="call">
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="globe">
|
||||
<IonIcon name="globe" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="basket">
|
||||
<IonIcon name="basket" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
@ -342,8 +342,8 @@ export const SegmentExample: React.FC = () => (
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment @ionChange="segmentChanged($event)" disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
<ion-segment @ionChange="segmentChanged($event)" disabled value="sunny">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
@ -362,26 +362,26 @@ export const SegmentExample: React.FC = () => (
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Segment -->
|
||||
<ion-segment scrollable>
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h, writeTask } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
|
||||
@ -50,6 +50,13 @@ export class Segment implements ComponentInterface {
|
||||
*/
|
||||
@Prop({ mutable: true }) value?: string | null;
|
||||
|
||||
@Watch('value')
|
||||
protected valueChanged(value: string | undefined) {
|
||||
if (this.didInit) {
|
||||
this.ionChange.emit({ value });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emitted when the value property has changed.
|
||||
*/
|
||||
@ -61,14 +68,6 @@ export class Segment implements ComponentInterface {
|
||||
*/
|
||||
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
|
||||
|
||||
@Watch('value')
|
||||
protected valueChanged(value: string | undefined) {
|
||||
if (this.didInit) {
|
||||
this.updateButtons();
|
||||
this.ionChange.emit({ value });
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('disabled')
|
||||
disabledChanged() {
|
||||
if (this.gesture && !this.scrollable) {
|
||||
@ -76,26 +75,7 @@ export class Segment implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
@Listen('ionSelect')
|
||||
segmentClick(ev: CustomEvent) {
|
||||
const current = ev.target as HTMLIonSegmentButtonElement;
|
||||
const previous = this.checked;
|
||||
this.value = current.value;
|
||||
|
||||
if (previous && this.scrollable) {
|
||||
this.checkButton(previous, current);
|
||||
}
|
||||
|
||||
this.checked = current;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (this.value === undefined) {
|
||||
const checked = this.getButtons().find(b => b.checked);
|
||||
if (checked) {
|
||||
this.value = checked.value;
|
||||
}
|
||||
}
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@ -104,7 +84,6 @@ export class Segment implements ComponentInterface {
|
||||
}
|
||||
|
||||
async componentDidLoad() {
|
||||
this.updateButtons();
|
||||
this.setCheckedClasses();
|
||||
|
||||
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||
@ -119,7 +98,6 @@ export class Segment implements ComponentInterface {
|
||||
});
|
||||
this.gesture.enable(!this.scrollable);
|
||||
this.disabledChanged();
|
||||
|
||||
this.didInit = true;
|
||||
}
|
||||
|
||||
@ -142,6 +120,10 @@ export class Segment implements ComponentInterface {
|
||||
this.addRipple(detail);
|
||||
}
|
||||
|
||||
private getButtons() {
|
||||
return Array.from(this.el.querySelectorAll('ion-segment-button'));
|
||||
}
|
||||
|
||||
/**
|
||||
* The gesture blocks the segment button ripple. This
|
||||
* function adds the ripple based on the checked segment
|
||||
@ -149,7 +131,7 @@ export class Segment implements ComponentInterface {
|
||||
*/
|
||||
private addRipple(detail: GestureDetail) {
|
||||
const buttons = this.getButtons();
|
||||
const checked = buttons.find(button => button.checked === true);
|
||||
const checked = buttons.find(button => button.value === this.value);
|
||||
|
||||
const ripple = checked!.shadowRoot!.querySelector('ion-ripple-effect');
|
||||
|
||||
@ -163,7 +145,7 @@ export class Segment implements ComponentInterface {
|
||||
private activate(detail: GestureDetail) {
|
||||
const clicked = detail.event.target as HTMLIonSegmentButtonElement;
|
||||
const buttons = this.getButtons();
|
||||
const checked = buttons.find(button => button.checked === true);
|
||||
const checked = buttons.find(button => button.value === this.value);
|
||||
|
||||
// Make sure we are only checking for activation on a segment button
|
||||
// since disabled buttons will get the click on the segment
|
||||
@ -173,12 +155,12 @@ export class Segment implements ComponentInterface {
|
||||
|
||||
// If there are no checked buttons, set the current button to checked
|
||||
if (!checked) {
|
||||
clicked.checked = true;
|
||||
this.value = clicked.value;
|
||||
}
|
||||
|
||||
// If the gesture began on the clicked button with the indicator
|
||||
// then we should activate the indicator
|
||||
if (clicked.checked) {
|
||||
if (this.value === clicked.value) {
|
||||
this.activated = true;
|
||||
}
|
||||
}
|
||||
@ -220,17 +202,17 @@ export class Segment implements ComponentInterface {
|
||||
currentIndicator.style.setProperty('transform', '');
|
||||
});
|
||||
|
||||
current.checked = true;
|
||||
this.value = current.value;
|
||||
this.setCheckedClasses();
|
||||
}
|
||||
|
||||
private setCheckedClasses() {
|
||||
const buttons = this.getButtons();
|
||||
const index = buttons.findIndex(button => button.checked === true);
|
||||
const index = buttons.findIndex(button => button.value === this.value);
|
||||
const next = index + 1;
|
||||
|
||||
// Keep track of the currently checked button
|
||||
this.checked = buttons.find(button => button.checked === true);
|
||||
this.checked = buttons.find(button => button.value === this.value);
|
||||
|
||||
for (const button of buttons) {
|
||||
button.classList.remove('segment-button-after-checked');
|
||||
@ -244,7 +226,7 @@ export class Segment implements ComponentInterface {
|
||||
const isRTL = document.dir === 'rtl';
|
||||
const activated = this.activated;
|
||||
const buttons = this.getButtons();
|
||||
const index = buttons.findIndex(button => button.checked === true);
|
||||
const index = buttons.findIndex(button => button.value === this.value);
|
||||
const previous = buttons[index];
|
||||
let current;
|
||||
let nextIndex;
|
||||
@ -318,15 +300,16 @@ export class Segment implements ComponentInterface {
|
||||
});
|
||||
}
|
||||
|
||||
private updateButtons() {
|
||||
const value = this.value;
|
||||
for (const button of this.getButtons()) {
|
||||
button.checked = (button.value === value);
|
||||
}
|
||||
private onClick = (ev: Event) => {
|
||||
const current = ev.target as HTMLIonSegmentButtonElement;
|
||||
const previous = this.checked;
|
||||
this.value = current.value;
|
||||
|
||||
if (previous && this.scrollable) {
|
||||
this.checkButton(previous, current);
|
||||
}
|
||||
|
||||
private getButtons() {
|
||||
return Array.from(this.el.querySelectorAll('ion-segment-button'));
|
||||
this.checked = current;
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -334,6 +317,7 @@ export class Segment implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<Host
|
||||
onClick={this.onClick}
|
||||
class={{
|
||||
...createColorClasses(this.color),
|
||||
[mode]: true,
|
||||
|
||||
@ -64,8 +64,8 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment-button value="all" checked>
|
||||
<ion-segment value="all">
|
||||
<ion-segment-button value="all">
|
||||
All
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="missed">
|
||||
@ -89,14 +89,14 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment class="segment-no-animate">
|
||||
<ion-segment-button>
|
||||
<ion-segment class="segment-no-animate" value="is">
|
||||
<ion-segment-button value="animate">
|
||||
<ion-label>Animate</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="is">
|
||||
<ion-label>Is</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="false">
|
||||
<ion-label>False</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@ -59,8 +59,8 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="tertiary">
|
||||
<ion-segment-button value="all" checked>
|
||||
<ion-segment color="tertiary" value="all">
|
||||
<ion-segment-button value="all">
|
||||
All
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="missed">
|
||||
@ -68,8 +68,8 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="success">
|
||||
<ion-segment-button checked value="330">
|
||||
<ion-segment color="success" value="330">
|
||||
<ion-segment-button value="330">
|
||||
<ion-label>330ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="440">
|
||||
@ -108,59 +108,59 @@
|
||||
</ion-segment>
|
||||
|
||||
|
||||
<ion-segment color="light">
|
||||
<ion-segment color="light" value="rainy">
|
||||
<ion-segment-button value="sunny">
|
||||
Sunny
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy" checked>
|
||||
<ion-segment-button value="rainy">
|
||||
Rainy
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="medium">
|
||||
<ion-segment-button checked>
|
||||
<ion-segment color="medium" value="seg1">
|
||||
<ion-segment-button value="seg1">
|
||||
<ion-label>Seg 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="seg2">
|
||||
<ion-label>Seg 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="seg3">
|
||||
<ion-label>Seg 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="dark">
|
||||
<ion-segment-button>
|
||||
<ion-segment color="dark" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment disabled color="danger">
|
||||
<ion-segment-button>
|
||||
<ion-segment disabled color="danger" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment disabled color="medium">
|
||||
<ion-segment-button>
|
||||
<ion-segment disabled color="medium" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@ -19,16 +19,16 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-segment id="modeLayout">
|
||||
<ion-segment-button checked>
|
||||
<ion-segment id="modeLayout" value="compass">
|
||||
<ion-segment-button value="compass">
|
||||
<ion-icon name="compass"></ion-icon>
|
||||
<ion-label>Explore</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="airplane">
|
||||
<ion-icon name="airplane"></ion-icon>
|
||||
<ion-label>Flights</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="briefcase">
|
||||
<ion-icon name="briefcase"></ion-icon>
|
||||
<ion-label>Trips</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -38,148 +38,148 @@
|
||||
|
||||
<ion-content>
|
||||
<!-- Label only -->
|
||||
<ion-segment id="multi-color">
|
||||
<ion-segment-button checked>
|
||||
<ion-segment id="multi-color" value="one">
|
||||
<ion-segment-button value="one">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="two">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="three">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="call">
|
||||
<ion-segment-button layout="icon-bottom" value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button layout="icon-bottom" value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button layout="icon-bottom" value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="call">
|
||||
<ion-segment-button layout="icon-start" value="call">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button layout="icon-start" value="heart">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button layout="icon-start" value="pin">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="call">
|
||||
<ion-segment-button layout="icon-end" value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button disabled layout="icon-end" value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button layout="icon-end" value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled -->
|
||||
<ion-segment scrollable disabled>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment scrollable disabled value="call">
|
||||
<ion-segment-button layout="icon-end" value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button layout="icon-end" value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button layout="icon-end" value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Color -->
|
||||
<ion-segment color="secondary">
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment color="secondary" value="call">
|
||||
<ion-segment-button layout="icon-end" value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-segment-button disabled layout="icon-end" value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button layout="icon-end" value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Icons -->
|
||||
<ion-segment scrollable color="tertiary">
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable color="tertiary" value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -230,6 +230,9 @@
|
||||
setLayout();
|
||||
});
|
||||
});
|
||||
document.querySelector('ion-segment').addEventListener('ionChange', (ev) => {
|
||||
console.log('ionChange', ev);
|
||||
});
|
||||
|
||||
</script>
|
||||
</ion-app>
|
||||
|
||||
@ -104,22 +104,22 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment value="rainy">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy" checked>
|
||||
<ion-segment-button value="rainy">
|
||||
<ion-label>Rainy</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="primary">
|
||||
<ion-segment color="light">
|
||||
<ion-segment color="light" value="rainy">
|
||||
<ion-segment-button value="sunny">
|
||||
Sunny
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy" checked>
|
||||
<ion-segment-button value="rainy">
|
||||
Rainy
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -127,14 +127,14 @@
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-toolbar color="primary">
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -142,14 +142,14 @@
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="heart">
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -157,16 +157,16 @@
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-toolbar color="danger">
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="2">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
@ -175,16 +175,16 @@
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-segment-button value="3" layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -193,16 +193,16 @@
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-toolbar color="dark">
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="2" layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-segment-button value="3" layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
@ -211,16 +211,16 @@
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-toolbar color="medium">
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="2" layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -229,16 +229,16 @@
|
||||
|
||||
<!-- Disabled -->
|
||||
<ion-toolbar color="success">
|
||||
<ion-segment disabled>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment disabled value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="2" layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -247,16 +247,16 @@
|
||||
|
||||
<!-- Color -->
|
||||
<ion-toolbar color="light">
|
||||
<ion-segment color="secondary">
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-segment color="secondary" value="1">
|
||||
<ion-segment-button value="1" layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="2" layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-segment-button value="3" layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment (ionChange)="segmentChanged($event)" disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
<ion-segment (ionChange)="segmentChanged($event)" disabled value="sunny">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
@ -30,26 +30,26 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Segment -->
|
||||
<ion-segment scrollable>
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
<ion-segment disabled value="sunny">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
@ -30,26 +30,26 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Segment -->
|
||||
<ion-segment scrollable>
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@ -15,8 +15,8 @@ export const SegmentExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Disabled Segment --*/}
|
||||
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled>
|
||||
<IonSegmentButton value="sunny" checked>
|
||||
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
|
||||
<IonSegmentButton value="sunny">
|
||||
<IonLabel>Sunny</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="rainy">
|
||||
@ -35,26 +35,26 @@ export const SegmentExample: React.FC = () => (
|
||||
</IonSegment>
|
||||
|
||||
{/*-- Scrollable Segment --*/}
|
||||
<IonSegment scrollable>
|
||||
<IonSegmentButton>
|
||||
<IonSegment scrollable value="heart">
|
||||
<IonSegmentButton value="home">
|
||||
<IonIcon name="home" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton checked>
|
||||
<IonSegmentButton value="heart">
|
||||
<IonIcon name="heart" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="pin">
|
||||
<IonIcon name="pin" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="star">
|
||||
<IonIcon name="star" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="call">
|
||||
<IonIcon name="call" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="globe">
|
||||
<IonIcon name="globe" />
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton>
|
||||
<IonSegmentButton value="basket">
|
||||
<IonIcon name="basket" />
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment @ionChange="segmentChanged($event)" disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
<ion-segment @ionChange="segmentChanged($event)" disabled value="sunny">
|
||||
<ion-segment-button value="sunny">
|
||||
<ion-label>Sunny</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
@ -31,26 +31,26 @@
|
||||
</ion-segment>
|
||||
|
||||
<!-- Scrollable Segment -->
|
||||
<ion-segment scrollable>
|
||||
<ion-segment-button>
|
||||
<ion-segment scrollable value="heart">
|
||||
<ion-segment-button value="home">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="heart">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="pin">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="star">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="call">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="globe">
|
||||
<ion-icon name="globe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="basket">
|
||||
<ion-icon name="basket"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@ -11,7 +11,6 @@ SelectOption is a component that is a child element of Select. For more informat
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ---------- | ----------------------------------------------------------- | --------- | ----------- |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the select option. | `boolean` | `false` |
|
||||
| `selected` | `selected` | If `true`, the element is selected. | `boolean` | `false` |
|
||||
| `value` | `value` | The text value of the option. | `any` | `undefined` |
|
||||
|
||||
|
||||
|
||||
@ -18,11 +18,6 @@ export class SelectOption implements ComponentInterface {
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* If `true`, the element is selected.
|
||||
*/
|
||||
@Prop() selected = false;
|
||||
|
||||
/**
|
||||
* The text value of the option.
|
||||
*/
|
||||
|
||||
@ -26,7 +26,7 @@ export class SelectPopover implements ComponentInterface {
|
||||
/** Array of options for the popover */
|
||||
@Prop() options: SelectPopoverOption[] = [];
|
||||
|
||||
@Listen('ionSelect')
|
||||
@Listen('ionChange')
|
||||
onSelect(ev: any) {
|
||||
const option = this.options.find(o => o.value === ev.target.value);
|
||||
if (option) {
|
||||
@ -35,6 +35,8 @@ export class SelectPopover implements ComponentInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
const checkedOption = this.options.find(o => o.checked);
|
||||
const checkedValue = checkedOption ? checkedOption.value : undefined;
|
||||
return (
|
||||
<Host class={getIonMode(this)}>
|
||||
<ion-list>
|
||||
@ -47,14 +49,13 @@ export class SelectPopover implements ComponentInterface {
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
}
|
||||
<ion-radio-group>
|
||||
<ion-radio-group value={checkedValue}>
|
||||
{this.options.map(option =>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
{option.text}
|
||||
</ion-label>
|
||||
<ion-radio
|
||||
checked={option.checked}
|
||||
value={option.value}
|
||||
disabled={option.disabled}
|
||||
>
|
||||
|
||||
@ -4,8 +4,7 @@ Selects are form controls to select an option, or options, from a set of options
|
||||
|
||||
A select should be used with child `<ion-select-option>` elements. If the child option is not given a `value` attribute then its text will be used as the value.
|
||||
|
||||
If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value. Otherwise, the `selected` attribute can be used on the `<ion-select-option>`.
|
||||
|
||||
If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value.
|
||||
|
||||
## Interfaces
|
||||
|
||||
@ -110,10 +109,10 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select multiple="true" [value]="['bird', 'dog']">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
@ -315,16 +314,21 @@ export class SelectExample {
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select id="multiple" multiple="true">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const select = document.querySelector('multiple');
|
||||
select.value = ['bird', 'dog'];
|
||||
```
|
||||
|
||||
## Objects as Values
|
||||
|
||||
```html
|
||||
@ -372,10 +376,11 @@ export class SelectExample {
|
||||
let selectOption = document.createElement('ion-select-option');
|
||||
selectOption.value = option;
|
||||
selectOption.textContent = option.first + ' ' + option.last;
|
||||
selectOption.selected = (i === 0);
|
||||
|
||||
objectSelectElement.appendChild(selectOption)
|
||||
});
|
||||
|
||||
objectSelectElement.value = objectOptions[0];
|
||||
}
|
||||
```
|
||||
|
||||
@ -564,12 +569,12 @@ export const SelectExample: React.FC = () => (
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Pets</IonLabel>
|
||||
<IonSelect multiple={true}>
|
||||
<IonSelectOption value="bird" selected>
|
||||
<IonSelect multiple={true} value={['bird', 'dog']}>
|
||||
<IonSelectOption value="bird">
|
||||
Bird
|
||||
</IonSelectOption>
|
||||
<IonSelectOption value="cat">Cat</IonSelectOption>
|
||||
<IonSelectOption value="dog" selected>
|
||||
<IonSelectOption value="dog">
|
||||
Dog
|
||||
</IonSelectOption>
|
||||
<IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
|
||||
@ -719,10 +724,10 @@ export const SelectExample: React.FC = () => (
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select multiple="true" :value=['bird', 'dog']>
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
@ -769,7 +774,7 @@ export const SelectExample: React.FC = () => (
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select :interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
|
||||
@ -125,7 +125,6 @@ export class Select implements ComponentInterface {
|
||||
|
||||
@Watch('value')
|
||||
valueChanged() {
|
||||
this.updateOptions();
|
||||
this.emitStyle();
|
||||
if (this.didInit) {
|
||||
this.ionChange.emit({
|
||||
@ -135,25 +134,10 @@ export class Select implements ComponentInterface {
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
if (this.value === undefined) {
|
||||
if (this.multiple) {
|
||||
// there are no values set at this point
|
||||
// so check to see who should be selected
|
||||
const checked = this.childOpts.filter(o => o.selected);
|
||||
this.value = checked.map(o => getOptionValue(o));
|
||||
} else {
|
||||
const checked = this.childOpts.find(o => o.selected);
|
||||
if (checked) {
|
||||
this.value = getOptionValue(checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.updateOptions();
|
||||
this.updateOverlayOptions();
|
||||
this.emitStyle();
|
||||
|
||||
this.mutationO = watchForOptions<HTMLIonSelectOptionElement>(this.el, 'ion-select-option', async () => {
|
||||
this.updateOptions();
|
||||
this.updateOverlayOptions();
|
||||
});
|
||||
}
|
||||
@ -218,30 +202,32 @@ export class Select implements ComponentInterface {
|
||||
return;
|
||||
}
|
||||
const childOpts = this.childOpts;
|
||||
const value = this.value;
|
||||
switch (this.interface) {
|
||||
case 'action-sheet':
|
||||
overlay.buttons = this.createActionSheetButtons(childOpts);
|
||||
overlay.buttons = this.createActionSheetButtons(childOpts, value);
|
||||
break;
|
||||
case 'popover':
|
||||
const popover = overlay.querySelector('ion-select-popover');
|
||||
if (popover) {
|
||||
popover.options = this.createPopoverOptions(childOpts);
|
||||
popover.options = this.createPopoverOptions(childOpts, value);
|
||||
}
|
||||
break;
|
||||
case 'alert':
|
||||
const inputType = (this.multiple ? 'checkbox' : 'radio');
|
||||
overlay.inputs = this.createAlertInputs(childOpts, inputType);
|
||||
overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private createActionSheetButtons(data: any[]): ActionSheetButton[] {
|
||||
private createActionSheetButtons(data: HTMLIonSelectOptionElement[], selectValue: any): ActionSheetButton[] {
|
||||
const actionSheetButtons = data.map(option => {
|
||||
const value = getOptionValue(option);
|
||||
return {
|
||||
role: (option.selected ? 'selected' : ''),
|
||||
role: (isOptionSelected(value, selectValue, this.compareWith) ? 'selected' : ''),
|
||||
text: option.textContent,
|
||||
handler: () => {
|
||||
this.value = getOptionValue(option);
|
||||
this.value = value;
|
||||
}
|
||||
} as ActionSheetButton;
|
||||
});
|
||||
@ -258,38 +244,39 @@ export class Select implements ComponentInterface {
|
||||
return actionSheetButtons;
|
||||
}
|
||||
|
||||
private createAlertInputs(data: any[], inputType: string): AlertInput[] {
|
||||
return data.map(o => {
|
||||
return {
|
||||
type: inputType,
|
||||
label: o.textContent,
|
||||
value: getOptionValue(o),
|
||||
checked: o.selected,
|
||||
disabled: o.disabled
|
||||
} as AlertInput;
|
||||
});
|
||||
}
|
||||
|
||||
private createPopoverOptions(data: any[]): SelectPopoverOption[] {
|
||||
private createAlertInputs(data: HTMLIonSelectOptionElement[], inputType: 'checkbox' | 'radio', selectValue: any): AlertInput[] {
|
||||
return data.map(o => {
|
||||
const value = getOptionValue(o);
|
||||
return {
|
||||
text: o.textContent,
|
||||
type: inputType,
|
||||
label: o.textContent || '',
|
||||
value,
|
||||
checked: o.selected,
|
||||
checked: isOptionSelected(value, selectValue, this.compareWith),
|
||||
disabled: o.disabled
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private createPopoverOptions(data: HTMLIonSelectOptionElement[], selectValue: any): SelectPopoverOption[] {
|
||||
return data.map(o => {
|
||||
const value = getOptionValue(o);
|
||||
return {
|
||||
text: o.textContent || '',
|
||||
value,
|
||||
checked: isOptionSelected(value, selectValue, this.compareWith),
|
||||
disabled: o.disabled,
|
||||
handler: () => {
|
||||
this.value = value;
|
||||
this.close();
|
||||
}
|
||||
} as SelectPopoverOption;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private async openPopover(ev: UIEvent) {
|
||||
const interfaceOptions = this.interfaceOptions;
|
||||
const mode = getIonMode(this);
|
||||
|
||||
const value = this.value;
|
||||
const popoverOpts: PopoverOptions = {
|
||||
mode,
|
||||
...interfaceOptions,
|
||||
@ -301,22 +288,21 @@ export class Select implements ComponentInterface {
|
||||
header: interfaceOptions.header,
|
||||
subHeader: interfaceOptions.subHeader,
|
||||
message: interfaceOptions.message,
|
||||
value: this.value,
|
||||
options: this.createPopoverOptions(this.childOpts)
|
||||
value,
|
||||
options: this.createPopoverOptions(this.childOpts, value)
|
||||
}
|
||||
};
|
||||
return popoverController.create(popoverOpts);
|
||||
}
|
||||
|
||||
private async openActionSheet() {
|
||||
|
||||
const mode = getIonMode(this);
|
||||
const interfaceOptions = this.interfaceOptions;
|
||||
const actionSheetOpts: ActionSheetOptions = {
|
||||
mode,
|
||||
...interfaceOptions,
|
||||
|
||||
buttons: this.createActionSheetButtons(this.childOpts),
|
||||
buttons: this.createActionSheetButtons(this.childOpts, this.value),
|
||||
cssClass: ['select-action-sheet', interfaceOptions.cssClass]
|
||||
};
|
||||
return actionSheetController.create(actionSheetOpts);
|
||||
@ -335,7 +321,7 @@ export class Select implements ComponentInterface {
|
||||
...interfaceOptions,
|
||||
|
||||
header: interfaceOptions.header ? interfaceOptions.header : labelText,
|
||||
inputs: this.createAlertInputs(this.childOpts, inputType),
|
||||
inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
|
||||
buttons: [
|
||||
{
|
||||
text: this.cancelText,
|
||||
@ -368,23 +354,6 @@ export class Select implements ComponentInterface {
|
||||
return this.overlay.dismiss();
|
||||
}
|
||||
|
||||
private updateOptions() {
|
||||
// iterate all options, updating the selected prop
|
||||
let canSelect = true;
|
||||
const { value, childOpts, compareWith, multiple } = this;
|
||||
for (const selectOption of childOpts) {
|
||||
const optValue = getOptionValue(selectOption);
|
||||
const selected = canSelect && isOptionSelected(value, optValue, compareWith);
|
||||
selectOption.selected = selected;
|
||||
|
||||
// if current option is selected and select is single-option, we can't select
|
||||
// any option more
|
||||
if (selected && !multiple) {
|
||||
canSelect = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getLabel() {
|
||||
return findItemLabel(this.el);
|
||||
}
|
||||
@ -490,6 +459,17 @@ export class Select implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
const isOptionSelected = (currentValue: any[] | any, compareValue: any, compareWith?: string | SelectCompareFn | null) => {
|
||||
if (currentValue === undefined) {
|
||||
return false;
|
||||
}
|
||||
if (Array.isArray(currentValue)) {
|
||||
return currentValue.some(val => compareOptions(val, compareValue, compareWith));
|
||||
} else {
|
||||
return compareOptions(currentValue, compareValue, compareWith);
|
||||
}
|
||||
};
|
||||
|
||||
const getOptionValue = (el: HTMLIonSelectOptionElement) => {
|
||||
const value = el.value;
|
||||
return (value === undefined)
|
||||
@ -507,24 +487,13 @@ const parseValue = (value: any) => {
|
||||
return value.toString();
|
||||
};
|
||||
|
||||
const isOptionSelected = (currentValue: any[] | any, compareValue: any, compareWith?: string | SelectCompareFn | null) => {
|
||||
if (currentValue === undefined) {
|
||||
return false;
|
||||
}
|
||||
if (Array.isArray(currentValue)) {
|
||||
return currentValue.some(val => compareOptions(val, compareValue, compareWith));
|
||||
} else {
|
||||
return compareOptions(currentValue, compareValue, compareWith);
|
||||
}
|
||||
};
|
||||
|
||||
const compareOptions = (currentValue: any, compareValue: any, compareWith?: string | SelectCompareFn | null): boolean => {
|
||||
if (typeof compareWith === 'function') {
|
||||
return compareWith(currentValue, compareValue);
|
||||
} else if (typeof compareWith === 'string') {
|
||||
return currentValue[compareWith] === compareValue[compareWith];
|
||||
} else {
|
||||
return currentValue === compareValue;
|
||||
return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<ion-item>
|
||||
<ion-label>Hair Color</ion-label>
|
||||
<ion-select id="hairColor" value="brown" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown" selected>Brown</ion-select-option>
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
@ -81,8 +81,8 @@
|
||||
|
||||
<ion-item color="danger">
|
||||
<ion-label>Alert</ion-label>
|
||||
<ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
|
||||
<ion-select-option value="bacon" selected>Bacon</ion-select-option>
|
||||
<ion-select id="customAlertSelect" value="bacon" interface="alert" multiple="true" placeholder="Select One">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
@ -147,10 +147,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select placeholder="Month" interface="popover">
|
||||
<ion-select placeholder="Month" value="03" interface="popover">
|
||||
<ion-select-option value="01">January</ion-select-option>
|
||||
<ion-select-option value="02">February</ion-select-option>
|
||||
<ion-select-option value="03" selected="true">March</ion-select-option>
|
||||
<ion-select-option value="03">March</ion-select-option>
|
||||
<ion-select-option value="04">April</ion-select-option>
|
||||
<ion-select-option value="05">May</ion-select-option>
|
||||
<ion-select-option value="06">June</ion-select-option>
|
||||
@ -161,18 +161,18 @@
|
||||
<ion-select-option value="11">November</ion-select-option>
|
||||
<ion-select-option value="12">December</ion-select-option>
|
||||
</ion-select>
|
||||
<ion-select placeholder="Year" interface="popover">
|
||||
<ion-select-option>1989</ion-select-option>
|
||||
<ion-select-option>1990</ion-select-option>
|
||||
<ion-select-option>1991</ion-select-option>
|
||||
<ion-select-option>1992</ion-select-option>
|
||||
<ion-select-option>1993</ion-select-option>
|
||||
<ion-select-option selected="true">1994</ion-select-option>
|
||||
<ion-select-option>1995</ion-select-option>
|
||||
<ion-select-option>1996</ion-select-option>
|
||||
<ion-select-option>1997</ion-select-option>
|
||||
<ion-select-option>1998</ion-select-option>
|
||||
<ion-select-option>1999</ion-select-option>
|
||||
<ion-select placeholder="Year" value="94" interface="popover">
|
||||
<ion-select-option value="89">1989</ion-select-option>
|
||||
<ion-select-option value="90">1990</ion-select-option>
|
||||
<ion-select-option value="91">1991</ion-select-option>
|
||||
<ion-select-option value="92">1992</ion-select-option>
|
||||
<ion-select-option value="93">1993</ion-select-option>
|
||||
<ion-select-option value="94">1994</ion-select-option>
|
||||
<ion-select-option value="95">1995</ion-select-option>
|
||||
<ion-select-option value="96">1996</ion-select-option>
|
||||
<ion-select-option value="97">1997</ion-select-option>
|
||||
<ion-select-option value="98">1998</ion-select-option>
|
||||
<ion-select-option value="99">1999</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
@ -256,8 +256,8 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-select multiple disabled="true">
|
||||
<ion-select-option selected="true">Selected Text</ion-select-option>
|
||||
<ion-select multiple value="text" disabled="true">
|
||||
<ion-select-option value="text">Selected Text</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
@ -272,10 +272,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Stacked: selected</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>Default</ion-select-option>
|
||||
<ion-select-option selected>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
<ion-select value="other">
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="other">Other</ion-select-option>
|
||||
<ion-select-option value="na">N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
@ -290,10 +290,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Floating: selected</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option selected="true">Default</ion-select-option>
|
||||
<ion-select-option>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
<ion-select value="default">
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="other">Other</ion-select-option>
|
||||
<ion-select-option value="na">N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
@ -345,11 +345,16 @@
|
||||
let selectOption = document.createElement('ion-select-option');
|
||||
selectOption.value = option;
|
||||
selectOption.textContent = option.first + ' ' + option.last;
|
||||
selectOption.selected = (i === 0);
|
||||
|
||||
objectSelectElement.appendChild(selectOption)
|
||||
});
|
||||
|
||||
objectSelectElement.value = {
|
||||
id: 1,
|
||||
first: 'Alice',
|
||||
last: 'Smith',
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
objectSelectElement.value = {
|
||||
id: 1,
|
||||
|
||||
@ -32,9 +32,9 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Hair Color</ion-label>
|
||||
<ion-select>
|
||||
<ion-select value="">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="" selected>Empty Value</ion-select-option>
|
||||
<ion-select-option value="">Empty Value</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
@ -62,15 +62,15 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-select id="disabled" multiple disabled>
|
||||
<ion-select-option selected="true">Selected Text</ion-select-option>
|
||||
<ion-select id="disabled" multiple disabled value="selected">
|
||||
<ion-select-option value="selected">Selected Text</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Statuses</ion-label>
|
||||
<ion-select id="status" multiple>
|
||||
<ion-select-option value="selected" selected="true">Selected</ion-select-option>
|
||||
<ion-select id="status" value="selected" multiple>
|
||||
<ion-select-option value="selected">Selected</ion-select-option>
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
|
||||
</ion-select>
|
||||
@ -92,10 +92,10 @@
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option selected>1</ion-select-option>
|
||||
<ion-select-option>2</ion-select-option>
|
||||
<ion-select-option selected>3</ion-select-option>
|
||||
<ion-select id="multiple" multiple="true">
|
||||
<ion-select-option value="1">1</ion-select-option>
|
||||
<ion-select-option value="2">2</ion-select-option>
|
||||
<ion-select-option value="3">3</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-button expand="block" type="submit">Submit</ion-button>
|
||||
@ -157,6 +157,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const multiple = document.querySelector('#multiple');
|
||||
multiple.value = ['1', '3'];
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -126,8 +126,8 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Statuses</ion-label>
|
||||
<ion-select id="status">
|
||||
<ion-select-option value="selected" selected>Selected</ion-select-option>
|
||||
<ion-select id="status" value="selected">
|
||||
<ion-select-option value="selected">Selected</ion-select-option>
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select id="hairColor" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown" selected>Brown</ion-select-option>
|
||||
<ion-select id="hairColor" ok-text="Okay" value="brown" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
@ -39,10 +39,10 @@
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select placeholder="Month">
|
||||
<ion-select placeholder="Month" value="03">
|
||||
<ion-select-option value="01">January</ion-select-option>
|
||||
<ion-select-option value="02">February</ion-select-option>
|
||||
<ion-select-option value="03" selected="true">March</ion-select-option>
|
||||
<ion-select-option value="03">March</ion-select-option>
|
||||
<ion-select-option value="04">April</ion-select-option>
|
||||
<ion-select-option value="05">May</ion-select-option>
|
||||
<ion-select-option value="06">June</ion-select-option>
|
||||
@ -54,18 +54,18 @@
|
||||
<ion-select-option value="12">December</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select placeholder="Year">
|
||||
<ion-select-option>1989</ion-select-option>
|
||||
<ion-select-option>1990</ion-select-option>
|
||||
<ion-select-option>1991</ion-select-option>
|
||||
<ion-select-option>1992</ion-select-option>
|
||||
<ion-select-option>1993</ion-select-option>
|
||||
<ion-select-option selected="true">1994</ion-select-option>
|
||||
<ion-select-option>1995</ion-select-option>
|
||||
<ion-select-option>1996</ion-select-option>
|
||||
<ion-select-option>1997</ion-select-option>
|
||||
<ion-select-option>1998</ion-select-option>
|
||||
<ion-select-option>1999</ion-select-option>
|
||||
<ion-select placeholder="Year" value="94">
|
||||
<ion-select-option value="89">1989</ion-select-option>
|
||||
<ion-select-option value="90">1990</ion-select-option>
|
||||
<ion-select-option value="91">1991</ion-select-option>
|
||||
<ion-select-option value="92">1992</ion-select-option>
|
||||
<ion-select-option value="93">1993</ion-select-option>
|
||||
<ion-select-option value="94">1994</ion-select-option>
|
||||
<ion-select-option value="95">1995</ion-select-option>
|
||||
<ion-select-option value="96">1996</ion-select-option>
|
||||
<ion-select-option value="97">1997</ion-select-option>
|
||||
<ion-select-option value="98">1998</ion-select-option>
|
||||
<ion-select-option value="99">1999</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select class="custom" placeholder="Day">
|
||||
|
||||
@ -57,10 +57,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select multiple="true" [value]="['bird', 'dog']">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
@ -57,16 +57,21 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select id="multiple" multiple="true">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const select = document.querySelector('multiple');
|
||||
select.value = ['bird', 'dog'];
|
||||
```
|
||||
|
||||
## Objects as Values
|
||||
|
||||
```html
|
||||
@ -114,10 +119,11 @@
|
||||
let selectOption = document.createElement('ion-select-option');
|
||||
selectOption.value = option;
|
||||
selectOption.textContent = option.first + ' ' + option.last;
|
||||
selectOption.selected = (i === 0);
|
||||
|
||||
objectSelectElement.appendChild(selectOption)
|
||||
});
|
||||
|
||||
objectSelectElement.value = objectOptions[0];
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -104,12 +104,12 @@ export const SelectExample: React.FC = () => (
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Pets</IonLabel>
|
||||
<IonSelect multiple={true}>
|
||||
<IonSelectOption value="bird" selected>
|
||||
<IonSelect multiple={true} value={['bird', 'dog']}>
|
||||
<IonSelectOption value="bird">
|
||||
Bird
|
||||
</IonSelectOption>
|
||||
<IonSelectOption value="cat">Cat</IonSelectOption>
|
||||
<IonSelectOption value="dog" selected>
|
||||
<IonSelectOption value="dog">
|
||||
Dog
|
||||
</IonSelectOption>
|
||||
<IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
|
||||
|
||||
@ -60,10 +60,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select multiple="true" :value=['bird', 'dog']>
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
@ -110,7 +110,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select :interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
|
||||
@ -63,17 +63,17 @@
|
||||
|
||||
<!-- iOS Toolbar -->
|
||||
<ion-toolbar mode="ios">
|
||||
<ion-segment>
|
||||
<ion-segment-button>iOS</ion-segment-button>
|
||||
<ion-segment-button checked>Segment</ion-segment-button>
|
||||
<ion-segment value="segment">
|
||||
<ion-segment-button value="ios">iOS</ion-segment-button>
|
||||
<ion-segment-button value="segment">Segment</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<!-- Material Design Toolbar -->
|
||||
<ion-toolbar mode="md">
|
||||
<ion-segment>
|
||||
<ion-segment-button>MD</ion-segment-button>
|
||||
<ion-segment-button checked>Segment</ion-segment-button>
|
||||
<ion-segment value="segment">
|
||||
<ion-segment-button value="md">MD</ion-segment-button>
|
||||
<ion-segment-button value="segment">Segment</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
|
||||
@ -170,9 +170,9 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
<ion-segment value="all">
|
||||
<ion-segment-button value="all">All</ion-segment-button>
|
||||
<ion-segment-button value="favorites">Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
@ -186,9 +186,9 @@
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
<ion-segment value="all">
|
||||
<ion-segment-button value="all">All</ion-segment-button>
|
||||
<ion-segment-button value="favorites">Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
@ -197,9 +197,9 @@
|
||||
<ion-menu-button auto-hide="false"></ion-menu-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
<ion-segment value="all">
|
||||
<ion-segment-button value="all">All</ion-segment-button>
|
||||
<ion-segment-button value="favorites">Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
@ -208,9 +208,9 @@
|
||||
<ion-menu-button auto-hide="false"></ion-menu-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
<ion-segment value="all">
|
||||
<ion-segment-button value="all">All</ion-segment-button>
|
||||
<ion-segment-button value="favorites">Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
@ -93,8 +93,8 @@
|
||||
|
||||
<div slot="end" class="right-container">
|
||||
<ion-label>Select a Theme:</ion-label>
|
||||
<ion-select interface="popover" class="theme-picker">
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select interface="popover" class="theme-picker" value="default">
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="oceanic">Oceanic</ion-select-option>
|
||||
<ion-select-option value="vibrant">Vibrant</ion-select-option>
|
||||
<ion-select-option value="dark">Dark</ion-select-option>
|
||||
@ -102,17 +102,17 @@
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment value="active">
|
||||
<ion-segment-button value="favorites">
|
||||
<ion-label>Favorites</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="all">
|
||||
<ion-label>All</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-segment-button disabled value="disabled">
|
||||
<ion-label>Disabled</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-segment-button value="active">
|
||||
<ion-label>Active</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -250,7 +250,7 @@
|
||||
|
||||
<section>
|
||||
<ion-list>
|
||||
<ion-radio-group id="fruitRadio">
|
||||
<ion-radio-group id="fruitRadio" value="grape">
|
||||
<ion-item-divider>
|
||||
<ion-label>Fruits</ion-label>
|
||||
</ion-item-divider>
|
||||
@ -261,7 +261,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
|
||||
<ion-radio slot="start" id="grapeChecked" value="grape" disabled></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@ -272,7 +272,7 @@
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-radio-group id="fruitRadio">
|
||||
<ion-radio-group id="fruitRadio" value="lettuce">
|
||||
<ion-item-divider>
|
||||
<ion-label>Veggies</ion-label>
|
||||
</ion-item-divider>
|
||||
@ -283,7 +283,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Lettuce, checked, disabled</ion-label>
|
||||
<ion-radio color="tertiary" slot="start" value="lettuce" checked disabled></ion-radio>
|
||||
<ion-radio color="tertiary" slot="start" value="lettuce" disabled></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
||||
@ -28,5 +28,5 @@ export const findCheckedOption = (el: any, tagName: string) => {
|
||||
? [el]
|
||||
: Array.from(el.querySelectorAll(tagName));
|
||||
|
||||
return options.find((o: any) => o.checked === true);
|
||||
return options.find((o: any) => o.value === el.value);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user