javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +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,--size
ion-checkbox,css-prop,--transition
ion-checkbox,part,container
ion-checkbox,part,mark
ion-chip,shadow
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.
*
* @part container - The container for the checkbox mark.
* @part mark - The checkmark used to indicate the checked state.
*/
@Component({
tag: 'ion-checkbox',
@ -136,13 +139,13 @@ export class Checkbox implements ComponentInterface {
renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled);
let path = indeterminate
? <path d="M6 12L18 12"/>
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8" />;
? <path d="M6 12L18 12" part="mark" />
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />;
if (mode === 'md') {
path = indeterminate
? <path d="M2 12H22"/>
: <path d="M1.73,12.91 8.1,19.28 22.79,4.59"/>;
? <path d="M2 12H22" part="mark" />
: <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />;
}
return (
@ -162,7 +165,7 @@ export class Checkbox implements ComponentInterface {
'interactive': true
}}
>
<svg class="checkbox-icon" viewBox="0 0 24 24">
<svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
{path}
</svg>
<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>` |
## Shadow Parts
| Part | Description |
| ------------- | ------------------------------------------------- |
| `"container"` | The container for the checkbox mark. |
| `"mark"` | The checkmark used to indicate the checked state. |
## CSS Custom Properties
| 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 nomodule src="../../../../../dist/ionic/ionic.js"></script>
<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>
<ion-app>
@ -81,6 +86,11 @@
<ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox>
</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-label>Unchecked by Default</ion-label>
<ion-checkbox></ion-checkbox>