feat(module: button): feat add dashed type (#273)

NG-ZORRO · Jan 31, 2019 · 8759db0 · 8759db0 · Guoyuanqiang · Jan 31, 2019
1 parent 55ae6d2
commit 8759db0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/components/button/demo/basic.ts b/components/button/demo/basic.ts
@@ -4,21 +4,23 @@ import { Component } from '@angular/core';
   selector: 'demo-button-basic',
   template: `
     <WingBlank>
-      <div Button (onClick)="onClick()">default</div>
+    <div Button [type]="'dashed'" (onClick)="onClick()">dashed</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [disabled]="true">default diasbled</div>
+    <div Button (onClick)="onClick()">default</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [type]="'primary'">primary</div>
+    <div Button [disabled]="true">default diasbled</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [type]="'primary'" [disabled]="true">primary diasbled</div>
+    <div Button [type]="'primary'">primary</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [type]="'warning'">warning</div>
+    <div Button [type]="'primary'" [disabled]="true">primary diasbled</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [type]="'warning'" [disabled]="true">warning</div>
+    <div Button [type]="'warning'">warning</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [loading]="true" >loading</div>
+    <div Button [type]="'warning'" [disabled]="true">warning</div>
     <WhiteSpace ></WhiteSpace>
-      <div Button [icon]="'check-circle-o'">with icon</div>
+    <div Button [loading]="true" >loading</div>
+    <WhiteSpace ></WhiteSpace>
+    <div Button [icon]="'check-circle-o'">with icon</div>
     <WhiteSpace ></WhiteSpace>
     <div Button [icon]="img">
       with custom icon

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -107,4 +107,14 @@
   > .@{buttonPrefixCls}-icon {
     margin-right: 0.5em;
   }
+
+  &-dashed {
+    .hairline-remove('all');
+    border: 1px dashed @color-text-disabled !important;
+
+    &.@{buttonPrefixCls}-disabled {
+      color: fade(@color-text-base-inverse, 60%);
+      opacity: 0.4;
+    }
+  }
 }