Authored by ccbikai

add button

... ... @@ -26,7 +26,17 @@ iconfont 新建项目,使用 class 控制图标样式,不要用 unicode<br>
<h2>button</h2>
三种尺寸,圆角直角,实心空心,选中未选中
三种尺寸,圆角直角,实心空心<br>
<button class="button">空心</button>
<button class="button button-solid">实心</button>
<button class="button button-round">圆角</button>
<button class="button button-round button-solid">圆角,实心</button>
<hr>
<button class="button button-large"></button>
<button class="button button-small"></button>
<hr>
<button class="button button-large button-round button-solid">大,圆角,实心</button>
<h2>badge</h2>
一个数字的时候是圆形,数字长的时候圆角长方形,类似跑道
... ...
.button {
display: inline-block;
min-width: 100px;
height: 40px;
border: 1px solid $black;
background: $white;
color: $black;
font-size: 20px;
&.button-solid {
background: $black;
color: $white;
}
&.button-round {
border-radius: 4px;
}
&.button-small {
min-width: 50px;
}
&.button-large {
min-width: 300px;
}
&:disabled {
border: 1px solid $grey;
color: $grey;
}
}
... ...
... ... @@ -4,4 +4,5 @@
@import "icon";
@import "tip";
@import "modal";
@import "button";
@import "swiper";
... ...