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

Button add circle shape and dashed、text type

Browse source 
Button add circle shape and dashed、text type
This commit is contained in:
梁灏 2016-11-01 20:22:38 +08:00
parent 698e3b614d
commit f1b3ed30ab
6 changed files with 119 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/styles/iview.all.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

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

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

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

@ -65,15 +65,29 @@
}
}
// size
&-large > .@{btnClassName} {
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
&-circle .@{btnClassName} {
border-radius: @btn-circle-size;
}
&-small > .@{btnClassName} {
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
> .@{css-prefix-iconfont} {
font-size: @btn-font-size;
// size
&-large&-circle .@{btnClassName} {
border-radius: @btn-circle-size-large;
}
&-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;
}
& > & {

4
src/styles/themes/default/custom.less
View file

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

84
test/routers/button.vue
View file

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