Skip to content

Commit 59ac11f

Browse files
uxsiuxsi
committed
feat: form
1 parent 5a0bee8 commit 59ac11f

File tree

11 files changed

+433
-3
lines changed

11 files changed

+433
-3
lines changed

‎dist/example/example.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/example/index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ <h1 class="page__title">
4141
</div>
4242
<div class="weui-cell__ft"></div>
4343
</a>
44+
<a class="weui-cell weui-cell_access js_item" data-id="form" href="javascript:;">
45+
<div class="weui-cell__bd">
46+
<p>Form</p>
47+
</div>
48+
<div class="weui-cell__ft"></div>
49+
</a>
4450
<a class="weui-cell weui-cell_access js_item" data-id="list" href="javascript:;">
4551
<div class="weui-cell__bd">
4652
<p>List</p>
@@ -675,6 +681,92 @@ <h1 class="page__title">Input</h1>
675681
});
676682
});
677683
</script>
684+
</script>
685+
<script type="text/html" id="tpl_form">
686+
<div class="page">
687+
<div class="weui-form">
688+
<div class="weui-form__text-area">
689+
<h2 class="weui-form__title">表单标题</h2>
690+
<div class="weui-form__desc">表单描述示意</div>
691+
</div>
692+
<div class="weui-form__control-area">
693+
<div class="weui-cells__group weui-cells__group_form">
694+
<div class="weui-cells__title">输入框</div>
695+
<div class="weui-cells weui-cells_form">
696+
<div class="weui-cell">
697+
<div class="weui-cell__hd"><label class="weui-label">QQ号</label></div>
698+
<div class="weui-cell__bd">
699+
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入QQ号"/>
700+
</div>
701+
</div>
702+
</div>
703+
</div>
704+
<div class="weui-cells__group weui-cells__group_form">
705+
<div class="weui-cells__title">验证码</div>
706+
<div class="weui-cells weui-cells_form">
707+
<div class="weui-cell">
708+
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
709+
<div class="weui-cell__bd">
710+
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号"/>
711+
</div>
712+
</div>
713+
<div class="weui-cell weui-cell_vcode">
714+
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
715+
<div class="weui-cell__bd">
716+
<input class="weui-input" type="number" pattern="[0-9]*" placeholder=""/>
717+
</div>
718+
<div class="weui-cell__ft">
719+
<button class="weui-btn weui-btn_default weui-vcode-btn">获取验证码</button>
720+
</div>
721+
</div>
722+
</div>
723+
<div class="weui-cells__tips"><a href="javascript:;">收不到验证码</a></div>
724+
</div>
725+
</div>
726+
<div class="weui-form__tips-area">
727+
<label for="weuiAgree" class="weui-agree">
728+
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
729+
<span class="weui-agree__text">
730+
阅读并同意<a href="javascript:void(0);">《相关条款》</a>
731+
</span>
732+
</label>
733+
</div>
734+
<div class="weui-form__opr-area">
735+
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
736+
</div>
737+
<div class="weui-form__tips-area">
738+
<p class="weui-form__tips">
739+
点击下一步即表示<a href="javascript:;">同意用户协议</a>
740+
</p>
741+
</div>
742+
<div class="weui-form__extra-area">
743+
<div class="weui-footer">
744+
<p class="weui-footer__links">
745+
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
746+
</p>
747+
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
748+
</div>
749+
</div>
750+
</div>
751+
</div>
752+
<script type="text/javascript">
753+
$(function(){
754+
var $tooltips = $('.js_tooltips');
755+
756+
$('#showTooltips').on('click', function(){
757+
if ($tooltips.css('display') != 'none') return;
758+
759+
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
760+
$('.page.cell').removeClass('slideIn');
761+
762+
$tooltips.css('display', 'block');
763+
setTimeout(function () {
764+
$tooltips.css('display', 'none');
765+
}, 2000);
766+
});
767+
});
768+
</script>
769+
678770
</script>
679771
<script type="text/html" id="tpl_toast">
680772
<div class="page">

‎dist/style/weui.css‎

Lines changed: 102 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style/weui.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/example/example.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,11 @@ body, .page {
181181
}
182182
}
183183

184+
.page.form{
185+
.weui-label{
186+
width:3em;
187+
}
188+
}
184189
.page.button {
185190
background-color:#EDEDED;
186191
.page__bd {

‎src/example/fragment/form.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<div class="page">
2+
<div class="weui-form">
3+
<div class="weui-form__text-area">
4+
<h2 class="weui-form__title">表单标题</h2>
5+
<div class="weui-form__desc">表单描述示意</div>
6+
</div>
7+
<div class="weui-form__control-area">
8+
<div class="weui-cells__group weui-cells__group_form">
9+
<div class="weui-cells__title">输入框</div>
10+
<div class="weui-cells weui-cells_form">
11+
<div class="weui-cell">
12+
<div class="weui-cell__hd"><label class="weui-label">QQ号</label></div>
13+
<div class="weui-cell__bd">
14+
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入QQ号"/>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="weui-cells__group weui-cells__group_form">
20+
<div class="weui-cells__title">验证码</div>
21+
<div class="weui-cells weui-cells_form">
22+
<div class="weui-cell">
23+
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
24+
<div class="weui-cell__bd">
25+
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号"/>
26+
</div>
27+
</div>
28+
<div class="weui-cell weui-cell_vcode">
29+
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
30+
<div class="weui-cell__bd">
31+
<input class="weui-input" type="number" pattern="[0-9]*" placeholder=""/>
32+
</div>
33+
<div class="weui-cell__ft">
34+
<button class="weui-btn weui-btn_default weui-vcode-btn">获取验证码</button>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="weui-cells__tips"><a href="javascript:;">收不到验证码</a></div>
39+
</div>
40+
</div>
41+
<div class="weui-form__tips-area">
42+
<label for="weuiAgree" class="weui-agree">
43+
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
44+
<span class="weui-agree__text">
45+
阅读并同意<a href="javascript:void(0);">《相关条款》</a>
46+
</span>
47+
</label>
48+
</div>
49+
<div class="weui-form__opr-area">
50+
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
51+
</div>
52+
<div class="weui-form__tips-area">
53+
<p class="weui-form__tips">
54+
点击下一步即表示<a href="javascript:;">同意用户协议</a>
55+
</p>
56+
</div>
57+
<div class="weui-form__extra-area">
58+
<div class="weui-footer">
59+
<p class="weui-footer__links">
60+
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
61+
</p>
62+
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
<script type="text/javascript">
68+
$(function(){
69+
var $tooltips = $('.js_tooltips');
70+
71+
$('#showTooltips').on('click', function(){
72+
if ($tooltips.css('display') != 'none') return;
73+
74+
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
75+
$('.page.cell').removeClass('slideIn');
76+
77+
$tooltips.css('display', 'block');
78+
setTimeout(function () {
79+
$tooltips.css('display', 'none');
80+
}, 2000);
81+
});
82+
});
83+
</script>

‎src/example/fragment/home.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ <h1 class="page__title">
2626
</div>
2727
<div class="weui-cell__ft"></div>
2828
</a>
29+
<a class="weui-cell weui-cell_access js_item" data-id="form" href="javascript:;">
30+
<div class="weui-cell__bd">
31+
<p>Form</p>
32+
</div>
33+
<div class="weui-cell__ft"></div>
34+
</a>
2935
<a class="weui-cell weui-cell_access js_item" data-id="list" href="javascript:;">
3036
<div class="weui-cell__bd">
3137
<p>List</p>

‎src/example/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<link rel="import" href="./fragment/button.html">
1717
<link rel="import" href="./fragment/list.html">
1818
<link rel="import" href="./fragment/input.html">
19+
<link rel="import" href="./fragment/form.html">
1920
<link rel="import" href="./fragment/toast.html">
2021
<link rel="import" href="./fragment/dialog.html">
2122
<link rel="import" href="./fragment/half-screen-dialog.html">

‎src/style/weui.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@
3737
// msg
3838
@import "./widget/weui-page/weui-msg";
3939

40+
// form
41+
@import "./widget/weui-page/weui-form";
42+
4043
// article
4144
@import "./widget/weui-page/weui-article";
4245

‎src/style/widget/weui-cell/weui-cells__group.less‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Tencent is pleased to support the open source community by making WeUI available.
3+
*
4+
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
5+
*
6+
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
7+
* with the License. You may obtain a copy of the License at
8+
*
9+
* http://opensource.org/licenses/MIT
10+
*
11+
* Unless required by applicable law or agreed to in writing, software distributed under the License is
12+
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
13+
* either express or implied. See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import "../../base/fn";
18+
19+
.weui-cells__group{}
20+
.weui-cells__group_form{
21+
.weui-cells__title{
22+
margin-top:24px;
23+
margin-bottom:8px;
24+
padding:0 32px;
25+
}
26+
.weui-cells,.weui-cell{
27+
&:before{
28+
left:32px;
29+
right:32px;
30+
}
31+
}
32+
.weui-cells{
33+
&:after{
34+
left:32px;
35+
right:32px;
36+
}
37+
}
38+
.weui-cell{
39+
padding:16px 32px;
40+
}
41+
.weui-cells__tips{
42+
margin-top:8px;
43+
font-weight:700;
44+
padding:0 32px;
45+
color:rgba(0,0,0,.3);
46+
}
47+
.weui-cell_vcode{
48+
padding:12px 32px;
49+
}
50+
.weui-vcode-btn{
51+
font-size:16px;
52+
padding:0 12px;
53+
margin-left:16px;
54+
height:auto;
55+
width:auto;
56+
line-height:2em;
57+
color: #06AE56;
58+
background-color: #F2F2F2;
59+
&:before{
60+
display:none;
61+
}
62+
}
63+
.weui-label{
64+
max-width:5em;
65+
width:auto;
66+
margin-right:24px;
67+
}
68+
}

0 commit comments

Comments
 (0)