javascript/weui
1
0
Fork 0
mirror of https://github.com/Tencent/weui.git synced 2026-03-13 08:02:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

btn

Browse Source
This commit is contained in:
xushengni
2019-03-05 11:48:04 +08:00
parent 67e2d8136f
commit be4d2df0ca
10 changed files with 137 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/example/example.css vendored
View File

File diff suppressed because one or more lines are too long

12
dist/example/index.html vendored
View File

@@ -288,7 +288,17 @@
<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a>
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-primary">强调行按钮</a>
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-primary">
<img class="weui-btn_cell__icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=">
强调行按钮
</a>
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-warn">警告行按钮</a>
</div>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>

58
dist/style/weui.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/style/weui.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
src/example/example.less
View File

@@ -173,9 +173,9 @@ body, .page {
padding: 0 15px;
}
.button-sp-area {
margin: 0 auto;
margin: 15px auto;
padding: 15px 0;
width: 60%;
background-color:#F8F8F8;
}
}

12
src/example/fragment/button.html
View File

@@ -13,7 +13,17 @@
<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a>
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-primary">强调行按钮</a>
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-primary">
<img class="weui-btn_cell__icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=">
强调行按钮
</a>
<a href="javascript:;" class="weui-btn_cell weui-btn_cell-warn">警告行按钮</a>
</div>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>

6
src/style/base/variable/color.less
View File

@@ -15,11 +15,11 @@
*/
// color
@weuiColorPrimary: #1AAD19;
@weuiColorWarn: #E64340;
@weuiColorPrimary: #07C160;
@weuiColorWarn: #FA5151;
// link
@weuiLinkColorDefault: #586C94;
@weuiLinkColorDefault: #576B95;
// background
@weuiBgColorDefault: #EFEFF4;

4
src/style/base/variable/weui-button.less
View File

@@ -22,6 +22,10 @@
@weuiBtnMiniFontSize:16px;
@weuiBtnMiniHeight:32px;
@weuiBtnCellHeight:56px;
@weuiBtnCellGap:16px;
@weuiBtnCellLineHeight: unit((@weuiBtnCellHeight - 2 * @weuiBtnCellGap) / @weuiBtnFontSize);
@weuiBtnFontColor:#FFFFFF;
@weuiBtnActiveFontColor:#FFFFFF;
@weuiBtnDisabledFontColor:rgba(0,0,0,.18);

56
src/style/widget/weui-button/weui-btn_cell.less Normal file
View File

@@ -0,0 +1,56 @@
/*
* Tencent is pleased to support the open source community by making WeUI available.
*
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://opensource.org/licenses/MIT
*
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../base/fn";
.weui-btn_cell{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
font-weight:700;
font-size: @weuiBtnFontSize;
text-align: center;
text-decoration: none;
color: @weuiBtnFontColor;
line-height: @weuiBtnCellLineHeight;
padding:@weuiBtnCellGap;
.setTapColor();
overflow: hidden;
background-color:#FFFFFF;
& + &{
margin-top:@weuiBtnDefaultGap;
}
}
.weui-btn_cell__icon{
display:inline-block;
vertical-align:middle;
width:24px;
height:24px;
margin:-.2em .34em 0 0;
}
.weui-btn_cell-default{
color:rgba(0,0,0,.9);
}
.weui-btn_cell-primary{
color:@weuiLinkColorDefault;
}
.weui-btn_cell-warn{
color:@weuiColorWarn;
}

1
src/style/widget/weui-button/weui-button.less
View File

@@ -22,6 +22,7 @@
@import "weui-btn_disabled";
@import "weui-btn_loading";
@import "weui-btn_plain";
@import "weui-btn_cell";
button, input {
&.weui-btn {