mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +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
@ -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>
|
||||
@ -512,92 +512,92 @@ export const SegmentButtonExample: React.FC = () => (
|
||||
<ion-label>Shared Links</ion-label>
|
||||
</ion-segment-button>
|
||||
</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>
|
||||
@ -45,92 +45,92 @@
|
||||
<ion-label>Shared Links</ion-label>
|
||||
</ion-segment-button>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user