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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user