Button add circle shape and dashed、text type

Button add circle shape and dashed、text type

src/components/button/button-group.vue

@@ -15,13 +15,19 @@
                     return oneOf(value, ['small', 'large']);
                 }
             },
+            shape: {
+                validator (value) {
+                    return oneOf(value, ['circle', 'circle-outline']);
+                }
+            }
         },
         computed: {
             classes () {
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-${this.shape}`]: !!this.shape
                     }
                 ]
             }

src/styles/mixins/button.less

@@ -65,15 +65,29 @@
         }
     }
 
-    // size
+    &-circle .@{btnClassName} {
-    &-large > .@{btnClassName} {
+        border-radius: @btn-circle-size;
-        .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
     }
 
-    &-small > .@{btnClassName} {
+    // size
-        .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+    &-large&-circle .@{btnClassName} {
-        > .@{css-prefix-iconfont} {
+        border-radius: @btn-circle-size-large;
-            font-size: @btn-font-size;
+    }
+    &-large {
+        & > .@{btnClassName} {
+            .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+        }
+    }
+
+    &-small&-circle .@{btnClassName} {
+        border-radius: @btn-circle-size-small;
+    }
+    &-small {
+        & > .@{btnClassName}{
+            .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+            > .@{css-prefix-iconfont} {
+                font-size: @btn-font-size;
+            }
         }
     }
 }
@@ -220,14 +234,14 @@
 
 // Circle for Icon
 .btn-circle(@btnClassName: ivu-btn) {
-    border-radius: 28px;
+    border-radius: @btn-circle-size;
 
     &.@{btnClassName}-large{
-        border-radius: 36px;
+        border-radius: @btn-circle-size-large;
     }
 
     &.@{btnClassName}-size{
-        border-radius: 24px;
+        border-radius: @btn-circle-size-small;
     }
 
     &.@{btnClassName}-icon-only{
@@ -259,8 +273,6 @@
 
     .@{btnClassName}:not(:first-child):not(:last-child) {
         border-radius: 0;
-        padding-left: 8px;
-        padding-right: 8px;
     }
 
     > .@{btnClassName}:first-child {
@@ -268,14 +280,12 @@
         &:not(:last-child) {
             border-bottom-right-radius: 0;
             border-top-right-radius: 0;
-            padding-right: 8px;
         }
     }
 
     > .@{btnClassName}:last-child:not(:first-child) {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
-        padding-left: 8px;
     }
 
     & > & {

src/styles/themes/default/custom.less

@@ -71,8 +71,8 @@
 @btn-ghost-border       : @border-color-base;
 
 @btn-circle-size        : 28px;
-@btn-circle-size-large  : 32px;
+@btn-circle-size-large  : 36px;
-@btn-circle-size-small  : 22px;
+@btn-circle-size-small  : 24px;
 
 // Layout and Grid
 @grid-columns           : 24;

test/routers/button.vue

@@ -1,4 +1,88 @@
 <template>
+    <h4>基本</h4>
+    <br><br>
+    <Button-group>
+        <i-button>取消</i-button>
+        <i-button type="primary">确定</i-button>
+    </Button-group>
+    <Button-group>
+        <i-button disabled>昨日</i-button>
+        <i-button disabled>今日</i-button>
+        <i-button disabled>明日</i-button>
+    </Button-group>
+    <Button-group>
+        <i-button type="primary">L</i-button>
+        <i-button>M</i-button>
+        <i-button type="ghost">M</i-button>
+        <i-button type="dashed">R</i-button>
+    </Button-group>
+    <br><br>
+    <h4>配合图标</h4>
+    <br><br>
+    <Button-group>
+        <i-button type="primary">
+            <Icon type="chevron-left"></Icon>
+            前进
+        </i-button>
+        <i-button type="primary">
+            后退
+            <Icon type="chevron-right"></Icon>
+        </i-button>
+    </Button-group>
+    <Button-group>
+        <i-button type="primary" icon="ios-skipbackward"></i-button>
+        <i-button type="primary" icon="ios-skipforward"></i-button>
+    </Button-group>
+    <Button-group>
+        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
+        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
+        <i-button type="ghost" icon="ios-crop"></i-button>
+        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
+    </Button-group>
+    <br><br>
+    <h4>圆角</h4>
+    <br><br>
+    <Button-group shape="circle">
+        <i-button type="primary">
+            <Icon type="chevron-left"></Icon>
+            前进
+        </i-button>
+        <i-button type="primary">
+            后退
+            <Icon type="chevron-right"></Icon>
+        </i-button>
+    </Button-group>
+    <Button-group shape="circle">
+        <i-button type="primary" icon="ios-skipbackward"></i-button>
+        <i-button type="primary" icon="ios-skipforward"></i-button>
+    </Button-group>
+    <Button-group shape="circle">
+        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
+        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
+        <i-button type="ghost" icon="ios-crop"></i-button>
+        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
+    </Button-group>
+    <Button-group shape="circle" size="large">
+        <i-button type="primary" icon="ios-skipbackward"></i-button>
+        <i-button type="primary" icon="ios-skipforward"></i-button>
+    </Button-group>
+    <Button-group shape="circle" size="large">
+        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
+        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
+        <i-button type="ghost" icon="ios-crop"></i-button>
+        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
+    </Button-group>
+    <Button-group shape="circle" size="small">
+        <i-button type="primary" icon="ios-skipbackward"></i-button>
+        <i-button type="primary" icon="ios-skipforward"></i-button>
+    </Button-group>
+    <Button-group shape="circle" size="small">
+        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
+        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
+        <i-button type="ghost" icon="ios-crop"></i-button>
+        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
+    </Button-group>
+    <br><br>
     <i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
     <i-button type="primary" icon="ios-search" shape="circle"></i-button>
     <i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>