javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +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

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