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

feat(toggle): add parts support for handle, track (#20962)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-04-23 12:17:17 -04:00
committed by GitHub
parent 15a603b397
commit d2b772f19f
4 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -1262,6 +1262,8 @@ ion-toggle,css-prop,--border-radius
ion-toggle,css-prop,--handle-background ion-toggle,css-prop,--handle-background
ion-toggle,css-prop,--handle-background-checked ion-toggle,css-prop,--handle-background-checked
ion-toggle,css-prop,--handle-border-radius ion-toggle,css-prop,--handle-border-radius
ion-toggle,part,handle
ion-toggle,part,track
ion-toolbar,shadow ion-toolbar,shadow
ion-toolbar,prop,color,string | undefined,undefined,false,false ion-toolbar,prop,color,string | undefined,undefined,false,false

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

@ -223,6 +223,14 @@ export const ToggleExamples: React.FC = () => {
| `ionFocus` | Emitted when the toggle has focus. | `CustomEvent<void>` | | `ionFocus` | Emitted when the toggle has focus. | `CustomEvent<void>` |
## Shadow Parts
| Part | Description |
| ---------- | ------------------------------------------------------------- |
| `"handle"` | The toggle handle, or knob, used to change the checked state. |
| `"track"` | The background track of the toggle. |
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |

22
core/src/components/toggle/test/basic/index.html
View File

@ -33,7 +33,7 @@
<ion-item> <ion-item>
<ion-label>Banana</ion-label> <ion-label>Banana</ion-label>
<ion-toggle slot="start" name="banana" checked></ion-toggle> <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
@ -70,7 +70,7 @@
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label> <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon> <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Custom</ion-label> <ion-label>Custom</ion-label>
<ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle> <ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
@ -92,6 +92,24 @@
</p> </p>
</ion-content> </ion-content>
<style>
.toggle-part.toggle-checked::part(handle) {
background: red;
}
.toggle-part.toggle-checked::part(track) {
background: purple;
}
.toggle-part::part(handle) {
background: green;
}
.toggle-part::part(track) {
background: hotpink;
}
</style>
<script> <script>
function printForm(ev) { function printForm(ev) {

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

@ -8,6 +8,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
/** /**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part track - The background track of the toggle.
* @part handle - The toggle handle, or knob, used to change the checked state.
*/ */
@Component({ @Component({
tag: 'ion-toggle', tag: 'ion-toggle',
@ -200,8 +203,8 @@ export class Toggle implements ComponentInterface {
'interactive': true 'interactive': true
}} }}
> >
<div class="toggle-icon"> <div class="toggle-icon" part="track">
<div class="toggle-inner"/> <div class="toggle-inner" part="handle" />
</div> </div>
<button <button
type="button" type="button"