implemented vertical align mode of button

Rijn
1 parent 39311a50
Showing 4 changed files with 155 additions and 9 deletions Show diff stats
src/components/button/button-group.vue
src/styles/components/button.less
src/styles/mixins/button.less
test/routers/button.vue
@@ -19,6 +19,10 @@
                 validator (value) {
                     return oneOf(value, ['circle', 'circle-outline']);
                 }
+            },
+            vertical: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {
@@ -27,7 +31,8 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.size}`]: !!this.size,
-                        [`${prefixCls}-${this.shape}`]: !!this.shape
+                        [`${prefixCls}-${this.shape}`]: !!this.shape,
+                        [`${prefixCls}-vertical`]: this.vertical
                     }
                 ]
             }
@@ -15,12 +15,12 @@
     &-primary {
         .btn-primary;
-        .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
             border-right-color: @btn-group-border;
             border-left-color: @btn-group-border;
         }
-        .@{btn-prefix-cls}-group &:first-child {
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
             &:not(:last-child) {
                 border-right-color: @btn-group-border;
                 &[disabled] {
@@ -29,13 +29,35 @@
             }
         }
-        .@{btn-prefix-cls}-group &:last-child:not(:first-child),
-        .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
             border-left-color: @btn-group-border;
             &[disabled] {
                 border-left-color: @btn-default-border;
             }
         }
+
+        .@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
+            border-top-color: @btn-group-border;
+            border-bottom-color: @btn-group-border;
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:first-child {
+            &:not(:last-child) {
+                border-bottom-color: @btn-group-border;
+                &[disabled] {
+                    border-top-color: @btn-default-border;
+                }
+            }
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
+        .@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
+            border-top-color: @btn-group-border;
+            &[disabled] {
+                border-bottom-color: @btn-default-border;
+            }
+        }
     }
     &-ghost {
@@ -99,4 +121,8 @@
     &-group {
         .btn-group(@btn-prefix-cls);
     }
+
+    &-group-vertical {
+        .btn-group-vertical(@btn-prefix-cls);
+    }
 }
@@ -108,6 +108,17 @@
     }
 }
+.button-group-vertical-base(@btnClassName) {
+    display: inline-block;
+    vertical-align: middle;
+    > .@{btnClassName} {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        float: none;
+    }
+}
+
 .btn() {
     display: inline-block;
     margin-bottom: 0;
@@ -303,7 +314,7 @@
         border-radius: 0;
     }
-    > .@{btnClassName}:first-child {
+    &:not(&-vertical) > .@{btnClassName}:first-child {
         margin-left: 0;
         &:not(:last-child) {
             border-bottom-right-radius: 0;
@@ -311,7 +322,7 @@
         }
     }
-    > .@{btnClassName}:last-child:not(:first-child) {
+    &:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
     }
@@ -324,7 +335,7 @@
         border-radius: 0;
     }
-    & > &:first-child:not(:last-child) {
+    &:not(&-vertical) > &:first-child:not(:last-child) {
         > .@{btnClassName}:last-child {
             border-bottom-right-radius: 0;
             border-top-right-radius: 0;
@@ -332,9 +343,48 @@
         }
     }
-    & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+    &:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
         padding-left: 8px;
     }
 }
+
+.btn-group-vertical(@btnClassName: ivu-btn) {
+    .button-group-vertical-base(@btnClassName);
+
+    .@{btnClassName} + .@{btnClassName},
+    .@{btnClassName} + &,
+    & + .@{btnClassName},
+    & + & {
+        margin-top: -1px;
+        margin-left: 0px;
+    }
+
+    > .@{btnClassName}:first-child {
+        margin-top: 0;
+        &:not(:last-child) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    > .@{btnClassName}:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    & > &:first-child:not(:last-child) {
+        > .@{btnClassName}:last-child {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            padding-bottom: 8px;
+        }
+    }
+
+    & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        padding-top: 8px;
+    }
+}
@@ -92,6 +92,71 @@
         <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>Vertical</h4>
+    <br><br>
+
+    <Button-group vertical>
+        <i-button>取消</i-button>
+        <i-button type="primary">确定</i-button>
+    </Button-group>
+    <Button-group vertical>
+        <i-button>取消</i-button>
+        <i-button type="primary">确定</i-button>
+    </Button-group>
+    <Button-group vertical>
+        <i-button disabled>昨日</i-button>
+        <i-button disabled>今日</i-button>
+        <i-button disabled>明日</i-button>
+    </Button-group>
+    <Button-group vertical>
+        <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>
+    <Button-group vertical>
+        <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 vertical>
+        <i-button type="primary" icon="ios-skipbackward"></i-button>
+        <i-button type="primary" icon="ios-skipforward"></i-button>
+    </Button-group>
+    <Button-group vertical>
+        <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 vertical 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" vertical 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" vertical 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" vertical 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>