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 @@ + +

+

Vertical

+

+ + + 取消 + 确定 + + + 取消 + 确定 + + + 昨日 + 今日 + 明日 + + + L + M + M + R + + + + + 前进 + + + 后退 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

-- libgit2 0.21.4