feat(module: checkboxitem&radioitem): support wrap API (#406)

NG-ZORRO · Apr 29, 2019 · db8a6c8 · db8a6c8
1 parent 9c39051
commit db8a6c8
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 1 deletion.
diff --git a/components/checkbox/checkbox-item.component.html b/components/checkbox/checkbox-item.component.html
@@ -1,6 +1,7 @@
 <ListItem [className]="'am-checkbox-item ' + (disabled ? 'am-checkbox-item-disabled' : '')"
           [disabled]="disabled"
           [thumb]="checkbox"
+          [wrap]="wrap"
           (onClick)="onCheckboxClick($event)"
 >
   <ng-content></ng-content>

diff --git a/components/checkbox/checkbox-item.component.ts b/components/checkbox/checkbox-item.component.ts
@@ -27,6 +27,8 @@ export class CheckboxItem implements ControlValueAccessor {
   @Input()
   value: string;
   @Input()
+  wrap: boolean = false;
+  @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
@@ -28,6 +28,7 @@ The encapsulation about `Checkbox` based on `ListItem`, the property `thumb` of
 | 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
@@ -29,6 +29,7 @@ subtitle: 复选框
 | 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
@@ -35,4 +35,5 @@ Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | name    |   name  | String |   -  |
 | value    |  value  | String |   -  |
-| disabled      |  whether disabled  | Boolean |  false  |
+| disabled      |  whether disabled  | Boolean |  false  |
+| wrap    | Whether to wrap long texts, otherwise it will be hidden by default. | Boolean  | `false`  |
diff --git a/components/radio/doc/index.zh-CN.md b/components/radio/doc/index.zh-CN.md
@@ -37,3 +37,4 @@ subtitle: 单选框
 | 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,6 +1,7 @@
 <ListItem [className]="'am-radio-item ' + (disabled ? 'am-radio-item-disabled' : '')"
           [extra]="radio"
           [disabled]="disabled"
+          [wrap]="wrap"
           (onClick)="onRadioItemClick($event)"
 >
   <ng-content></ng-content>

diff --git a/components/radio/radio-item.component.ts b/components/radio/radio-item.component.ts
@@ -26,6 +26,8 @@ export class RadioItem {
   @Input()
   value: string;
   @Input()
+  wrap: boolean = false;
+  @Input()
   get disabled(): boolean {
     return this._disabled;
   }

diff --git a/components/radio/style/addon.less b/components/radio/style/addon.less
@@ -1,3 +1,16 @@
+@radioWarpPrefixCls: am-radio;
+@listPrefixCls: am-list;
+
 radioitem {
   display: block;
+}
+
+.@{listPrefixCls} {
+  & .@{radioWarpPrefixCls}-item {
+    .@{listPrefixCls}-line {
+      .@{listPrefixCls}-content {
+        padding-right: 20px;
+      }
+    }
+  }
 }