feat(module: swipe-action): add className api (#436)

NG-ZORRO · May 14, 2019 · 3a976c5 · 3a976c5
1 parent c09b85e
commit 3a976c5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/components/swipe-action/demo/basic.ts b/components/swipe-action/demo/basic.ts
@@ -79,7 +79,15 @@ import { Component } from '@angular/core';
         </ListItem>
       </SwipeAction>
     </List>
-  `
+  `,
+  styles : [
+    `
+      /deep/.btnClass {
+        background-color: #F4333C;
+        color: white
+      }
+    `
+  ]
 })
 export class DemoSwipeActionBasicComponent {
   isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(window.navigator.userAgent);
@@ -92,7 +100,7 @@ export class DemoSwipeActionBasicComponent {
     {
       text: 'Delete',
       onPress: () => console.log('delete'),
-      style: { backgroundColor: '#F4333C', color: 'white' }
+      className: 'btnClass'
     }
   ];
 
@@ -105,7 +113,7 @@ export class DemoSwipeActionBasicComponent {
     {
       text: 'long text',
       onPress: () => console.log('delete'),
-      style: { backgroundColor: '#F4333C', color: 'white' }
+      className: 'btnClass'
     }
   ];
 

diff --git a/components/swipe-action/doc/index.en-US.md b/components/swipe-action/doc/index.en-US.md
@@ -34,4 +34,5 @@ Properties | Descrition | Type | Default
 | text       | text of button    | String | `Click` |
 | style       | style of button     | Object | `{}` |
 | onPress       | callback function that is triggered when button will be pressed   | (): void | `function() {}` |
+| className       | class name of button     | String |  |
 
diff --git a/components/swipe-action/doc/index.zh-CN.md b/components/swipe-action/doc/index.zh-CN.md
@@ -34,4 +34,5 @@ subtitle: 滑动操作
 | text       | 按钮文案     | String | `Click` |
 | style       | 按钮样式     | Object | `{}` |
 | onPress       | 按钮点击事件     | (): void | `function() {}` |
+| className       | 按钮样式类     | String |  |
 
diff --git a/components/swipe-action/swipe-action.component.html b/components/swipe-action/swipe-action.component.html
@@ -4,7 +4,7 @@
        class="{{prefixCls}}-actions {{prefixCls}}-actions-left"
        #leftBtnRef>
     <div *ngFor="let btn of left"
-         class="{{prefixCls}}-btn"
+         class="{{prefixCls}}-btn {{btn.className}}"
          [ngStyle]="btn.style"
          role="button"
          (click)="onBtnClick($event, btn)">
@@ -17,11 +17,11 @@
        class="{{prefixCls}}-actions {{prefixCls}}-actions-right"
        #rightBtnRef>
     <div *ngFor="let btn of right"
-         class="{{prefixCls}}-btn"
+         class="{{prefixCls}}-btn {{btn.className}}"
          [ngStyle]="btn.style"
          role="button"
          (click)="onBtnClick($event, btn)"
-         >
+    >
       <div class="{{prefixCls}}-btn-text">
         {{btn.text || 'Click'}}
       </div>