drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implemented vertical align mode of button

Browse source
This commit is contained in:
Rijn 2016-11-29 13:08:47 -06:00
parent 39311a508f
commit fd6512a92e
4 changed files with 155 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/button/button-group.vue
View file

@ -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
}
]
}

34
src/styles/components/button.less
View file

@ -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);
}
}

58
src/styles/mixins/button.less
View file

@ -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;
}
}

65
test/routers/button.vue
View file

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