feat(module: checkboxItem&radioItem): API sync with listItem (#408)

NG-ZORRO · Apr 30, 2019 · 6cf232f · 6cf232f
1 parent acb2a95
commit 6cf232f
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 13 deletions.
diff --git a/components/checkbox/checkbox-item.component.html b/components/checkbox/checkbox-item.component.html
@@ -1,7 +1,13 @@
 <ListItem [className]="'am-checkbox-item ' + (disabled ? 'am-checkbox-item-disabled' : '')"
-          [disabled]="disabled"
-          [thumb]="checkbox"
           [wrap]="wrap"
+          [align]="align"
+          [arrow]="arrow"
+          [error]="error"
+          [extra]="extra"
+          [thumb]="checkbox"
+          [disabled]="disabled"
+          [platform]="platform"
+          [multipleLine]="multipleLine"
           (onClick)="onCheckboxClick($event)"
 >
   <ng-content></ng-content>

diff --git a/components/checkbox/checkbox-item.component.ts b/components/checkbox/checkbox-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, Input, Output, EventEmitter, ChangeDetectionStrategy, TemplateRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CheckboxStatus } from './PropsType';
 
@@ -27,8 +27,20 @@ export class CheckboxItem implements ControlValueAccessor {
   @Input()
   value: string;
   @Input()
+  arrow: string;
+  @Input()
+  extra: string | TemplateRef<any>;
+  @Input()
   wrap: boolean = false;
   @Input()
+  error: boolean = false;
+  @Input()
+  multipleLine: boolean = false;
+  @Input()
+  platform: string = 'ios';
+  @Input()
+  align: string = 'middle';
+  @Input()
   get disabled(): boolean {
     return this._disabled;
   }

diff --git a/components/checkbox/doc/index.en-US.md b/components/checkbox/doc/index.en-US.md
@@ -20,15 +20,14 @@ Checkbox
 
 ### CheckboxItem
 
-The encapsulation about `Checkbox` based on `ListItem`, the property `thumb` of `ListItem` will be passed to `Checkbox`, while other properties remain the same.
+The encapsulation about `Checkbox` based on `ListItem`, the property `thumb` of `ListItem` will be passed to `Checkbox`, while other properties remain the same (except for onClick, which has been changed to onChange).
 
 | Properties | Descrition                             | Type                                                    | Default              |
 | ---------- | -------------------------------------- | ------------------------------------------------------- | -------------------- |
 | name       | name                                   | String                                                  | -                    |
 | value      | value                                  | String                                                  | -                    |
 | ngModel    | whether is checked now, double binding | Boolean                                                 | <span> false </span> |
 | disabled   | whether is been disabled               | Boolean                                                 | false                |
-| wrap    | Whether to wrap long texts, otherwise it will be hidden by default. | Boolean  | `false`  |
 | onChange   | callback when check status is changed  | (name: string, value: string, checked: boolean) => void | -                    |
 
 ### AgreeItem

diff --git a/components/checkbox/doc/index.zh-CN.md b/components/checkbox/doc/index.zh-CN.md
@@ -21,15 +21,14 @@ subtitle: 复选框
 
 ### CheckboxItem
 
-基于`ListItem`对`Checkbox`进行封装,`ListItem`的`thumb`属性固定传入`Checkbox`,其他属性和`ListItem`一致。
+基于`ListItem`对`Checkbox`进行封装,`ListItem`的`thumb`属性固定传入`Checkbox`,其他属性和`ListItem`一致(除了onClick回调事件，在这里它被onChange回调事件所替代)。
 
 | 属性     | 说明                         | 类型                                                    | 默认值 |
 | -------- | ---------------------------- | ------------------------------------------------------- | ------ |
 | name     | name                         | String                                                  | -      |
 | value    | value                        | String                                                  | -      |
 | ngModel  | 指定当前是否选中，可双向绑定 | Boolean                                                 | false  |
 | disabled | 是否禁用                     | Boolean                                                 | false  |
-| wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |
 | onChange | change 事件触发的回调函数    | (name: string, value: string, checked: boolean) => void | 无     |
 
 ### AgreeItem

diff --git a/components/radio/doc/index.en-US.md b/components/radio/doc/index.en-US.md
@@ -29,11 +29,10 @@ Properties | Descrition | Type | Default
 
 ### RadioItem
 
-The encapsulation about `Radio` based on `ListItem`, the property `extra` of `ListItem` will be passed to `Radio`, while other properties remain the same.
+The encapsulation about `Radio` based on `ListItem`, the property `extra` of `ListItem` will be passed to `Radio`, while other properties remain the same(except for onClick, cause RadioItemGroup will emit the onChange output).
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | name    |   name  | String |   -  |
 | value    |  value  | String |   -  |
-| disabled      |  whether disabled  | Boolean |  false  |
-| wrap    | Whether to wrap long texts, otherwise it will be hidden by default. | Boolean  | `false`  |
+| disabled      |  whether disabled  | Boolean |  false  |
diff --git a/components/radio/doc/index.zh-CN.md b/components/radio/doc/index.zh-CN.md
@@ -30,11 +30,10 @@ subtitle: 单选框
 
 ### RadioItem
 
-基于`ListItem`对`Radio`进行封装,`ListItem`的`extra`属性固定传入`Radio`,其他属性和`ListItem`一致。
+基于`ListItem`对`Radio`进行封装,`ListItem`的`extra`属性固定传入`Radio`,其他属性和`ListItem`一致(除了onClick回调事件不可用之外，因为在这里是由RadioItemGroup传递回调事件)。
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
 | name    |   name  | String |   无  |
 | value    |  value  | String |   无  |
 | disabled      |  禁用  | Boolean |  false  |
-| wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |
diff --git a/components/radio/radio-item.component.html b/components/radio/radio-item.component.html
@@ -1,5 +1,13 @@
 <ListItem [className]="'am-radio-item ' + (disabled ? 'am-radio-item-disabled' : '')"
+          [wrap]="wrap"
+          [align]="align"
+          [arrow]="arrow"
+          [error]="error"
           [extra]="radio"
+          [thumb]="thumb"
+          [disabled]="disabled"
+          [platform]="platform"
+          [multipleLine]="multipleLine"
           [disabled]="disabled"
           [wrap]="wrap"
           (onClick)="onRadioItemClick($event)"

diff --git a/components/radio/radio-item.component.ts b/components/radio/radio-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { Component, ChangeDetectorRef, Input, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -26,8 +26,20 @@ export class RadioItem {
   @Input()
   value: string;
   @Input()
+  arrow: string;
+  @Input()
+  thumb: string | TemplateRef<any>;
+  @Input()
   wrap: boolean = false;
   @Input()
+  error: boolean = false;
+  @Input()
+  multipleLine: boolean = false;
+  @Input()
+  platform: string = 'ios';
+  @Input()
+  align: string = 'middle';
+  @Input()
   get disabled(): boolean {
     return this._disabled;
   }