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
@ -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