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

feat(checkbox): implement indeterminate state (#16951)

Browse Source 
This adds an `indeterminate` prop to the `ion-checkbox` component, which visually renders the checkbox with a dash to indicate an indeterminate state.

closes #16943
This commit is contained in:
Simon Hänisch
2019-03-04 17:16:41 +01:00
committed by Brandy Carney
parent 28fd75ee6b
commit c641ae10ed
10 changed files with 278 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/checkbox/checkbox.tsx
View File

@ -41,6 +41,11 @@ export class Checkbox implements ComponentInterface {
*/
@Prop({ mutable: true }) checked = false;
/**
* If `true`, the checkbox will visually appear as indeterminate.
*/
@Prop({ mutable: true }) indeterminate = false;
/**
* If `true`, the user cannot interact with the checkbox.
*/
@ -101,6 +106,7 @@ export class Checkbox implements ComponentInterface {
onClick() {
this.setFocus();
this.checked = !this.checked;
this.indeterminate = false;
}
private setFocus() {
@ -134,6 +140,7 @@ export class Checkbox implements ComponentInterface {
'in-item': hostContext('ion-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': this.indeterminate,
'interactive': true
}
};
@ -142,12 +149,19 @@ export class Checkbox implements ComponentInterface {
render() {
renderHiddenInput(true, this.el, this.name, (this.checked ? this.value : ''), this.disabled);
let path = this.indeterminate
? <path d="M6 12L18 12"/>
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8" />;
if (this.mode === 'md') {
path = this.indeterminate
? <path d="M2 12H22"/>
: <path d="M1.73,12.91 8.1,19.28 22.79,4.59"/>;
}
return [
<svg class="checkbox-icon" viewBox="0 0 24 24">
{ this.mode === 'md'
? <path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8"/>
}
{path}
</svg>,
<button
type="button"