javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(radio): add parts support for container, mark (#20952)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-04-23 12:18:58 -04:00
committed by GitHub
parent ba20209604
commit 228ca2b093
4 changed files with 42 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -826,6 +826,8 @@ ion-radio,css-prop,--border-radius
ion-radio,css-prop,--color
ion-radio,css-prop,--color-checked
ion-radio,css-prop,--inner-border-radius
ion-radio,part,container
ion-radio,part,mark
ion-radio-group,none
ion-radio-group,prop,allowEmptySelection,boolean,false,false,false

7
core/src/components/radio/radio.tsx
View File

@ -7,6 +7,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part container - The container for the radio mark.
* @part mark - The checkmark or dot used to indicate the checked state.
*/
@Component({
tag: 'ion-radio',
@ -136,8 +139,8 @@ export class Radio implements ComponentInterface {
'radio-disabled': disabled,
}}
>
<div class="radio-icon">
<div class="radio-inner"/>
<div class="radio-icon" part="container">
<div class="radio-inner" part="mark" />
</div>
<button
type="button"

8
core/src/components/radio/readme.md
View File

@ -137,6 +137,14 @@ export const RadioExamples: React.FC = () => {
| `ionFocus` | Emitted when the radio button has focus. | `CustomEvent<void>` |
## Shadow Parts
| Part | Description |
| ------------- | -------------------------------------------------------- |
| `"container"` | The container for the radio mark. |
| `"mark"` | The checkmark or dot used to indicate the checked state. |
## CSS Custom Properties
| Name | Description |

25
core/src/components/radio/test/basic/index.html
View File

@ -83,6 +83,13 @@
</ion-item>
</ion-radio-group>
<ion-radio-group allow-empty-selection value="custom">
<ion-item>
<ion-label>Radio ::part</ion-label>
<ion-radio slot="end" value="custom" class="radio-part"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Checked</ion-button>
<ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Disabled</ion-button>
@ -205,6 +212,24 @@
margin-top: -20px;
}
.radio-part::part(container) {
background: rgba(255, 0, 0, 0.3);
border-color: darkred;
}
.radio-part::part(mark) {
background: hotpink;
}
.radio-part.radio-checked::part(container) {
background: rgba(0, 255, 0, 0.3);
border-color: darkgreen;
}
.radio-part.radio-checked::part(mark) {
background: purple;
}
</style>
</ion-app>