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 }}
+
+
+ 全选
+
+
+
+ 选项一
+ 选项二
+ 选项三
+