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

update Button style

Browse source
This commit is contained in:
梁灏 2019-09-12 15:21:37 +08:00
parent aaa7e9927c
commit df6bf15242
4 changed files with 122 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
examples/routers/button.vue
View file

@ -1,14 +1,18 @@
<template>
<div>
<Button icon="logo-github" size="small" shape="circle"></Button>
<Button icon="logo-github" size="large" shape="circle"></Button>
<Button icon="logo-github" shape="circle"></Button>
<Button icon="logo-github" size="large" shape="circle"></Button>
<Button icon="logo-github" size="small"></Button>
<Button size="small">EN</Button>
<Button icon="logo-github"></Button>
<Button>EN</Button>
<Button icon="logo-github" size="large"></Button>
<Button size="large">EN</Button>
<ButtonGroup size="small">
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
@ -16,13 +20,15 @@
EN
</Button>
</ButtonGroup>
<ButtonGroup>
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
<Button>
EN
ENs
</Button>
</ButtonGroup>
<ButtonGroup size="large">
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
@ -155,8 +161,8 @@
</Button>
</Button-group>
<Button-group>
<Button type="primary" icon="ios-skipbackward"></Button>
<Button type="primary" icon="ios-skipforward"></Button>
<Button type="primary" icon="ios-skip-backward"></Button>
<Button type="primary" icon="ios-skip-forward"></Button>
</Button-group>
<Button-group>
<Button type="default" icon="ios-color-wand-outline"></Button>
@ -178,8 +184,8 @@
</Button>
</Button-group>
<Button-group shape="circle">
<Button type="primary" icon="ios-skipbackward"></Button>
<Button type="primary" icon="ios-skipforward"></Button>
<Button type="primary" icon="ios-skip-backward"></Button>
<Button type="primary" icon="ios-skip-forward"></Button>
</Button-group>
<Button-group shape="circle">
<Button type="default" icon="ios-color-wand-outline"></Button>
@ -223,6 +229,24 @@
<br><br>
<Button to="/icon">Open New Window</Button>
<br><br><br>
<ButtonGroup vertical size="small">
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
<ButtonGroup vertical>
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
<ButtonGroup vertical size="large">
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
</div>
</template>
<script>

11
src/components/button/button.vue
View file

@ -61,12 +61,10 @@
default: false
}
},
data () {
return {
showSlot: true
};
},
computed: {
showSlot () {
return !!this.$slots.default;
},
classes () {
return [
`${prefixCls}`,
@ -109,9 +107,6 @@
this.handleCheckClick(event, openInNewWindow);
}
},
mounted () {
this.showSlot = this.$slots.default !== undefined;
}
};
</script>

28
src/styles/custom.less
View file

@ -34,7 +34,7 @@
@heading-color-dark: fade(@white, 100%);
@font-size-base : 14px;
@font-size-small : 12px;
@font-size-large : 16px;
@font-size-large : @font-size-base + 2px;
@line-height-base : 1.5;
@line-height-computed : floor((@font-size-base * @line-height-base));
@border-radius-base : 6px;
@ -78,15 +78,21 @@
@shadow-right : 1px 0 6px @shadow-color;
// Button
@btn-height-base : 32px;
@btn-height-large : 40px;
@btn-height-small : 24px;
@btn-padding-base : 0 @padding-md - 1px;
@btn-padding-large : @btn-padding-base;
@btn-padding-small : 0 @padding-xs - 1px;
@btn-font-weight : normal;
@btn-padding-base : 5px 15px 6px;
@btn-padding-large : 6px 15px 6px 15px;
@btn-padding-small : 1px 7px 2px;
@btn-padding-base-icon : 5px 15px 6px;
@btn-padding-large-icon : 6px 15px 6px 15px;
@btn-padding-small-icon : 1px 7px 2px;
@btn-font-size : 12px;
@btn-font-size-large : 14px;
@btn-font-size : @font-size-base;
@btn-font-size-large : @font-size-large;
@btn-font-size-small : @font-size-base;
@btn-border-radius : 4px;
@btn-border-radius-small: 3px;
@btn-group-border : shade(@primary-color, 5%);
@ -106,9 +112,13 @@
@btn-ghost-bg : #fff;
@btn-ghost-border : @border-color-base;
@btn-circle-size : 32px;
@btn-circle-size-large : 36px;
@btn-circle-size-small : 24px;
@btn-circle-size : @btn-height-base;
@btn-circle-size-large : @btn-height-large;
@btn-circle-size-small : @btn-height-small;
@btn-square-size : @btn-height-base;
@btn-square-size-large : @btn-height-large;
@btn-square-size-small : @btn-height-small;
// Layout and Grid
@grid-columns : 24;

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

@ -1,4 +1,5 @@
.button-size(@padding; @font-size; @border-radius) {
.button-size(@height; @padding; @font-size; @border-radius) {
height: @height;
padding: @padding;
font-size: @font-size;
border-radius: @border-radius;
@ -65,21 +66,22 @@
}
}
& .@{btnClassName}-icon-only .ivu-icon {
font-size: 13px;
position: relative;
//top: 1px;
}
&-large .@{btnClassName}-icon-only .ivu-icon{
font-size: 15px;
//top: 2px;
}
&-small .@{btnClassName}-icon-only .ivu-icon{
font-size: 12px;
//top: 0;
}
//& .@{btnClassName}-icon-only .ivu-icon {
// font-size: 13px;
// position: relative;
// //top: 1px;
//}
//
//&-large .@{btnClassName}-icon-only .ivu-icon{
// font-size: 15px;
// //top: 2px;
//}
//
//&-small .@{btnClassName}-icon-only .ivu-icon{
// font-size: 12px;
// //top: 0;
//}
&-circle .@{btnClassName} {
border-radius: @btn-circle-size;
@ -91,7 +93,7 @@
}
&-large {
& > .@{btnClassName} {
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
.button-size(@btn-height-large; @btn-padding-large; @btn-font-size-large; @btn-border-radius);
}
}
@ -100,19 +102,21 @@
}
&-small {
& > .@{btnClassName}{
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
.button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius-small);
> .@{css-prefix-iconfont} {
font-size: @btn-font-size;
}
}
}
//&-small .@{btnClassName}-icon-only{
// .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
//}
//&-large .@{btnClassName}-icon-only{
// .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
//}
&-small .@{btnClassName}-icon-only{
.square(@btn-height-small);
padding: 0;
}
&-large .@{btnClassName}-icon-only{
.square(@btn-height-large);
padding: 0;
}
}
.button-group-vertical-base(@btnClassName) {
@ -123,6 +127,41 @@
width: 100%;
max-width: 100%;
float: none;
min-width: @btn-height-base;
}
&.@{btnClassName}-group-small > .@{btnClassName}{
min-width: @btn-height-small;
}
&.@{btnClassName}-group-large > .@{btnClassName}{
min-width: @btn-height-large;
}
//> .@{btnClassName}-icon-only {
// height: @btn-height-base;
// padding: 0;
//}
//> .@{btnClassName}-small.@{btnClassName}-icon-only {
// height: @btn-height-small;
// padding: 0;
//}
//> .@{btnClassName}-large.@{btnClassName}-icon-only {
// height: @btn-height-large;
// padding: 0;
//}
}
// square button: the content only contains icon
.btn-square(@btnClassName) {
.square(@btn-square-size);
.button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius);
&.@{btnClassName}-large {
.square(@btn-square-size-large);
.button-size(@btn-square-size-large; 0; @btn-font-size-large + 2px; @btn-border-radius);
}
&.@{btnClassName}-small {
.square(@btn-square-size-small);
.button-size(@btn-square-size-small; 0; @font-size-base; @btn-border-radius);
}
}
@ -139,7 +178,7 @@
white-space: nowrap;
line-height: @line-height-base;
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
.button-size(@btn-height-base; @btn-padding-base; @btn-font-size; @btn-border-radius);
//transform: translate3d(0, 0, 0);
//transition: all @transition-time linear;
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
@ -181,21 +220,15 @@
}
&-large {
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
.button-size(@btn-height-large; @btn-padding-large; @btn-font-size-large; @btn-border-radius);
}
&-small {
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
.button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius-small);
}
&-icon-only{
.button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
}
&-icon-only&-small{
.button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
}
&-icon-only&-large{
.button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
.btn-square(@btn-prefix-cls);
}
}
@ -324,16 +357,16 @@
&.@{btnClassName}-icon-only{
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
.button-size(@btn-height-base; 0; @font-size-base + 2; 50%);
&.@{btnClassName}-large{
.square(@btn-circle-size-large);
.button-size(0; @btn-font-size-large + 2; 50%);
.button-size(@btn-height-large; 0; @btn-font-size-large + 2; 50%);
}
&.@{btnClassName}-small{
.square(@btn-circle-size-small);
.button-size(0; @font-size-base; 50%);
.button-size(@btn-height-small; 0; @font-size-base; 50%);
}
}
}