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(checkbox): add parts support for container, mark (#20950)

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

2
core/api.txt
View File

@ -235,6 +235,8 @@ ion-checkbox,css-prop,--checkmark-color
ion-checkbox,css-prop,--checkmark-width ion-checkbox,css-prop,--checkmark-width
ion-checkbox,css-prop,--size ion-checkbox,css-prop,--size
ion-checkbox,css-prop,--transition ion-checkbox,css-prop,--transition
ion-checkbox,part,container
ion-checkbox,part,mark
ion-chip,shadow ion-chip,shadow
ion-chip,prop,color,string | undefined,undefined,false,false ion-chip,prop,color,string | undefined,undefined,false,false

13
core/src/components/checkbox/checkbox.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. * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part container - The container for the checkbox mark.
* @part mark - The checkmark used to indicate the checked state.
*/ */
@Component({ @Component({
tag: 'ion-checkbox', tag: 'ion-checkbox',
@ -136,13 +139,13 @@ export class Checkbox implements ComponentInterface {
renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled); renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled);
let path = indeterminate let path = indeterminate
? <path d="M6 12L18 12"/> ? <path d="M6 12L18 12" part="mark" />
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8" />; : <path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />;
if (mode === 'md') { if (mode === 'md') {
path = indeterminate path = indeterminate
? <path d="M2 12H22"/> ? <path d="M2 12H22" part="mark" />
: <path d="M1.73,12.91 8.1,19.28 22.79,4.59"/>; : <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />;
} }
return ( return (
@ -162,7 +165,7 @@ export class Checkbox implements ComponentInterface {
'interactive': true 'interactive': true
}} }}
> >
<svg class="checkbox-icon" viewBox="0 0 24 24"> <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
{path} {path}
</svg> </svg>
<button <button

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

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

12
core/src/components/checkbox/test/basic/index.html
View File

@ -10,7 +10,12 @@
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<style>
ion-checkbox.checkbox-part::part(mark) {
transform: scale(.5);
transform-origin: center;
}
</style>
<body> <body>
<ion-app> <ion-app>
@ -81,6 +86,11 @@
<ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox> <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox>
</ion-item> </ion-item>
<ion-item>
<ion-label>Checkmark ::part</ion-label>
<ion-checkbox checked color="dark" slot="start" class="checkbox-part"></ion-checkbox>
</ion-item>
<ion-item> <ion-item>
<ion-label>Unchecked by Default</ion-label> <ion-label>Unchecked by Default</ion-label>
<ion-checkbox></ion-checkbox> <ion-checkbox></ion-checkbox>