mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user