Button add ghost prop

梁灏
1 parent bfeab68f
Showing 5 changed files with 115 additions and 37 deletions Show diff stats
examples/routers/button.vue
src/components/button/button.vue
src/styles/components/button.less
src/styles/custom.less
src/styles/mixins/button.less
 <template>
     <div>
+        <Button type="default">Default</Button>
+        <Button type="primary">Primary</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="info">Info</Button>
+        <Button type="success">Success</Button>
+        <Button type="warning">Warning</Button>
+        <Button type="error">Error</Button>
+        <Button type="text">Text</Button>
+        <br><br><br>
+        <div style="padding: 20px;background: #dddee1">
+            <Button type="default" ghost>Default</Button>
+            <Button type="primary" ghost>Primary</Button>
+            <Button type="dashed" ghost>Dashed</Button>
+            <Button type="info" ghost>Info</Button>
+            <Button type="success" ghost>Success</Button>
+            <Button type="warning" ghost>Warning</Button>
+            <Button type="error" ghost>Error</Button>
+            <Button type="text" ghost>Text</Button>
+        </div>
+        <br><br><br>
         <Button type="primary" icon="ios-information-circle" size="small">Search</Button>
         <Button type="primary" icon="ios-information-circle" size="default">Search</Button>
         <Button type="primary" icon="ios-information-circle" size="large">Search</Button>
@@ -19,7 +39,7 @@
         <hr>
         <Button>Default</Button>
         <Button type="primary">Primary</Button>
-        <Button type="ghost">Ghost</Button>
+        <Button type="default">Ghost</Button>
         <Button type="dashed">Dashed</Button>
         <Button type="text">Text</Button>
         <br><br>
@@ -33,10 +53,10 @@
         <Button type="primary" shape="circle" icon="ios-search">Search</Button>
         <Button type="primary" shape="circle">Circle</Button>
         <br><br>
-        <Button type="ghost" shape="circle" icon="ios-search"></Button>
-        <Button type="ghost" icon="ios-search">Search</Button>
-        <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
-        <Button type="ghost" shape="circle">Circle</Button>
+        <Button type="default" shape="circle" icon="ios-search"></Button>
+        <Button type="default" icon="ios-search">Search</Button>
+        <Button type="default" shape="circle" icon="ios-search">Search</Button>
+        <Button type="default" shape="circle">Circle</Button>
         <br><br>
         <Button>Default</Button>
         <Button disabled>Default(Disabled)</Button>
@@ -44,8 +64,8 @@
         <Button type="primary">Primary</Button>
         <Button type="primary" disabled>Primary(Disabled)</Button>
         <br>
-        <Button type="ghost">Ghost</Button>
-        <Button type="ghost" disabled>Ghost(Disabled)</Button>
+        <Button type="default">Ghost</Button>
+        <Button type="default" disabled>Ghost(Disabled)</Button>
         <br>
         <Button type="dashed">Dashed</Button>
         <Button type="dashed" disabled>Dashed(Disabled)</Button>
@@ -69,7 +89,7 @@
         <Button-group>
             <Button type="primary">L</Button>
             <Button>M</Button>
-            <Button type="ghost">M</Button>
+            <Button type="default">M</Button>
             <Button type="dashed">R</Button>
         </Button-group>
         <br><br>
@@ -90,10 +110,10 @@
             <Button type="primary" icon="ios-skipforward"></Button>
         </Button-group>
         <Button-group>
-            <Button type="ghost" icon="ios-color-wand-outline"></Button>
-            <Button type="ghost" icon="ios-sunny-outline"></Button>
-            <Button type="ghost" icon="ios-crop"></Button>
-            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+            <Button type="default" icon="ios-color-wand-outline"></Button>
+            <Button type="default" icon="ios-sunny-outline"></Button>
+            <Button type="default" icon="ios-crop"></Button>
+            <Button type="default" icon="ios-color-filter-outline"></Button>
         </Button-group>
         <br><br>
         <h4>圆角</h4>
@@ -113,38 +133,38 @@
             <Button type="primary" icon="ios-skipforward"></Button>
         </Button-group>
         <Button-group shape="circle">
-            <Button type="ghost" icon="ios-color-wand-outline"></Button>
-            <Button type="ghost" icon="ios-sunny-outline"></Button>
-            <Button type="ghost" icon="ios-crop"></Button>
-            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+            <Button type="default" icon="ios-color-wand-outline"></Button>
+            <Button type="default" icon="ios-sunny-outline"></Button>
+            <Button type="default" icon="ios-crop"></Button>
+            <Button type="default" icon="ios-color-filter-outline"></Button>
         </Button-group>
         <br><br>
         <h4>尺寸</h4>
         <br><br>
         <Button-group size="large">
-            <Button type="ghost">Large</Button>
-            <Button type="ghost">Large</Button>
+            <Button type="default">Large</Button>
+            <Button type="default">Large</Button>
         </Button-group>
         <Button-group>
-            <Button type="ghost">Default</Button>
-            <Button type="ghost">Default</Button>
+            <Button type="default">Default</Button>
+            <Button type="default">Default</Button>
         </Button-group>
         <Button-group size="small">
-            <Button type="ghost">Small</Button>
-            <Button type="ghost">Small</Button>
+            <Button type="default">Small</Button>
+            <Button type="default">Small</Button>
         </Button-group>
         <br><br>
         <Button-group size="large" shape="circle">
-            <Button type="ghost">Large</Button>
-            <Button type="ghost">Large</Button>
+            <Button type="default">Large</Button>
+            <Button type="default">Large</Button>
         </Button-group>
         <Button-group shape="circle">
-            <Button type="ghost">Default</Button>
-            <Button type="ghost">Default</Button>
+            <Button type="default">Default</Button>
+            <Button type="default">Default</Button>
         </Button-group>
         <Button-group size="small" shape="circle">
-            <Button type="ghost">Small</Button>
-            <Button type="ghost">Small</Button>
+            <Button type="default">Small</Button>
+            <Button type="default">Small</Button>
         </Button-group>
     </div>
 </template>
@@ -35,8 +35,9 @@
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default']);
-                }
+                    return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
+                },
+                default: 'default'
             },
             shape: {
                 validator (value) {
@@ -68,6 +69,10 @@
                 type: Boolean,
                 default: false
             },
+            ghost: {
+                type: Boolean,
+                default: false
+            }
         },
         data () {
             return {
@@ -84,7 +89,8 @@
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-loading`]: this.loading != null && this.loading,
-                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading)
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
+                        [`${prefixCls}-ghost`]: this.ghost
                     }
                 ];
             }
@@ -60,9 +60,9 @@
         }
     }
-    &-ghost {
-        .btn-ghost;
-    }
+    //&-ghost {
+    //    .btn-ghost;
+    //}
     &-dashed{
         .btn-dashed;
@@ -125,4 +125,56 @@
     &-group-vertical {
         .btn-group-vertical(@btn-prefix-cls);
     }
+
+    // The new ghost in 3.0
+    &-ghost{
+        color: #fff;
+        background: transparent;
+        &:hover{
+            background: transparent;
+        }
+    }
+    &-ghost&-dashed, &-ghost&-default{
+        color: #fff;
+        border-color: #fff;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            border-color: tint(@primary-color, 20%);
+        }
+    }
+    &-ghost&-primary{
+        color: @primary-color;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            background: fade(tint(@primary-color, 95%), 50%);
+        }
+    }
+    &-ghost&-info{
+        color: @info-color;
+        &:hover{
+            color: tint(@info-color, 20%);
+            background: fade(tint(@info-color, 95%), 50%);
+        }
+    }
+    &-ghost&-success{
+        color: @success-color;
+        &:hover{
+            color: tint(@success-color, 20%);
+            background: fade(tint(@success-color, 95%), 50%);
+        }
+    }
+    &-ghost&-warning{
+        color: @warning-color;
+        &:hover{
+            color: tint(@warning-color, 20%);
+            background: fade(tint(@warning-color, 95%), 50%);
+        }
+    }
+    &-ghost&-error{
+        color: @error-color;
+        &:hover{
+            color: tint(@error-color, 20%);
+            background: fade(tint(@error-color, 95%), 50%);
+        }
+    }
 }
@@ -81,14 +81,14 @@
 @btn-disable-border     : @border-color-base;
 @btn-default-color      : @text-color;
-@btn-default-bg         : @background-color-base;
+@btn-default-bg         : #fff;
 @btn-default-border     : @border-color-base;
 @btn-primary-color      : #fff;
 @btn-primary-bg         : @primary-color;
 @btn-ghost-color        : @text-color;
-@btn-ghost-bg           : transparent;
+@btn-ghost-bg           : #fff;
 @btn-ghost-border       : @border-color-base;
 @btn-circle-size        : 32px;
@@ -246,7 +246,7 @@
 // Text
 .btn-text() {
-    .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
+    .button-variant(@btn-ghost-color, transparent, transparent);
     // for disabled
     &.disabled,