diff --git a/src/components/button/button-group.vue b/src/components/button/button-group.vue
index 0cac2a2..4d51996 100644
--- a/src/components/button/button-group.vue
+++ b/src/components/button/button-group.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
}
]
}
diff --git a/src/styles/components/button.less b/src/styles/components/button.less
index a5c7c54..dd3c97c 100644
--- a/src/styles/components/button.less
+++ b/src/styles/components/button.less
@@ -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);
+ }
}
diff --git a/src/styles/mixins/button.less b/src/styles/mixins/button.less
index 783e7ef..c6dd9f5 100644
--- a/src/styles/mixins/button.less
+++ b/src/styles/mixins/button.less
@@ -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;
+ }
+}
diff --git a/test/routers/button.vue b/test/routers/button.vue
index cdaa53a..496faa5 100644
--- a/test/routers/button.vue
+++ b/test/routers/button.vue
@@ -92,6 +92,71 @@
+