diff --git a/src/checkbox/checkbox.component.html b/src/checkbox/checkbox.component.html index 3432e25fa..287570ae3 100644 --- a/src/checkbox/checkbox.component.html +++ b/src/checkbox/checkbox.component.html @@ -3,6 +3,7 @@ class="aui-checkbox" [class.isDisabled]="disabled" [class.isChecked]="value$ | async" + [class.isIndeterminate]="indeterminate" [class.isTag]="type === 'tag'" > diff --git a/src/checkbox/checkbox.component.scss b/src/checkbox/checkbox.component.scss index 8092010ff..aceb2ab7a 100644 --- a/src/checkbox/checkbox.component.scss +++ b/src/checkbox/checkbox.component.scss @@ -48,4 +48,5 @@ $block: 'aui-checkbox'; } @include pointer('isChecked'); + @include pointer('isIndeterminate'); } diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts index fb0716612..bbeec2979 100644 --- a/src/checkbox/checkbox.component.ts +++ b/src/checkbox/checkbox.component.ts @@ -57,12 +57,22 @@ export class CheckboxComponent extends CommonFormControl this.label$$.next(val); } + @Input() + get indeterminate(): boolean { + return this._indeterminate; + } + + set indeterminate(value: boolean) { + this._indeterminate = value; + } + @ViewChild('elRef', { static: true }) elRef: ElementRef; private readonly checkboxGroup: CheckboxGroupComponent; private _label: unknown; private readonly label$$ = new BehaviorSubject(this.label); + private _indeterminate = false; private readonly destroy$$ = new Subject(); constructor( @@ -111,6 +121,9 @@ export class CheckboxComponent extends CommonFormControl if (this.disabled) { return; } + if (this.indeterminate) { + this._indeterminate = false; + } this.emitValueChange(!this.snapshot.value); if (this.checkboxGroup) { this.checkboxGroup.onCheckboxChange(this); diff --git a/src/checkbox/mixin.scss b/src/checkbox/mixin.scss index 0e5ad3034..0b082b903 100644 --- a/src/checkbox/mixin.scss +++ b/src/checkbox/mixin.scss @@ -20,6 +20,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + margin-left: 0; } } diff --git a/stories/checkbox/checkbox.stories.mdx b/stories/checkbox/checkbox.stories.mdx index e57decab1..0d966da3a 100644 --- a/stories/checkbox/checkbox.stories.mdx +++ b/stories/checkbox/checkbox.stories.mdx @@ -1,6 +1,8 @@ import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; import { moduleMetadata } from '@storybook/angular'; +import { IndeterminateCheckboxComponent } from './indeterminate-checkbox/component'; + import { CheckboxModule } from '@alauda/ui'; @@ -98,6 +101,14 @@ import { CheckboxModule } from '@alauda/ui'; +## 部分选中状态 + + + + {{ component: IndeterminateCheckboxComponent }} + + + ## 垂直布局 diff --git a/stories/checkbox/indeterminate-checkbox/component.ts b/stories/checkbox/indeterminate-checkbox/component.ts new file mode 100644 index 000000000..900831a20 --- /dev/null +++ b/stories/checkbox/indeterminate-checkbox/component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './template.html', +}) +export class IndeterminateCheckboxComponent { + model = ['label1']; + checkAll = false; + indeterminate = true; + + handleCheckAllChange(val: boolean) { + this.model = val ? ['label1', 'label2', 'label3'] : []; + this.indeterminate = false; + } + + handleCheckBoxGroupChange(value: string[]) { + const checkedCount = value.length; + this.checkAll = checkedCount === 3; + this.indeterminate = checkedCount > 0 && checkedCount < 3; + } +} diff --git a/stories/checkbox/indeterminate-checkbox/template.html b/stories/checkbox/indeterminate-checkbox/template.html new file mode 100644 index 000000000..f75c50e78 --- /dev/null +++ b/stories/checkbox/indeterminate-checkbox/template.html @@ -0,0 +1,19 @@ +value: {{ model }} +
+ + 全选 + +
+ + 选项一 + 选项二 + 选项三 +