From b82e01cadd4b0e77335703a5ebbcae2557f5b9cd Mon Sep 17 00:00:00 2001 From: xushengni Date: Thu, 29 Aug 2019 16:09:50 +0800 Subject: [PATCH] docs: form example --- dist/example/index.html | 378 +++++++++++++++--- dist/style/weui.css | 50 +-- dist/style/weui.min.css | 2 +- src/example/fragment/form.html | 257 +----------- src/example/fragment/form_checkbox.html | 61 +++ src/example/fragment/form_input_status.html | 59 +++ src/example/fragment/form_page.html | 71 ++++ src/example/fragment/form_radio.html | 57 +++ src/example/fragment/form_select.html | 69 ++++ src/example/fragment/form_switch.html | 50 +++ src/example/fragment/form_textarea.html | 24 ++ src/example/fragment/form_vcode.html | 60 +++ src/example/fragment/icons.html | 2 + src/example/index.html | 8 + src/style/icon/weui-icon.less | 16 +- .../widget/weui-cell/weui-cell_global.less | 5 + .../widget/weui-cell/weui-cells__group.less | 3 + .../weui-cell/weui-form/weui-form_common.less | 29 +- 18 files changed, 843 insertions(+), 358 deletions(-) create mode 100644 src/example/fragment/form_checkbox.html create mode 100644 src/example/fragment/form_input_status.html create mode 100644 src/example/fragment/form_page.html create mode 100644 src/example/fragment/form_radio.html create mode 100644 src/example/fragment/form_select.html create mode 100644 src/example/fragment/form_switch.html create mode 100644 src/example/fragment/form_textarea.html create mode 100644 src/example/fragment/form_vcode.html diff --git a/dist/example/index.html b/dist/example/index.html index b8bd55d..9c04b43 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -683,15 +683,34 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/example/fragment/form_checkbox.html b/src/example/fragment/form_checkbox.html new file mode 100644 index 0000000..0729aec --- /dev/null +++ b/src/example/fragment/form_checkbox.html @@ -0,0 +1,61 @@ +
+
+
+

表单页标题

+
复选框
+
+
+
+
+ + + +
添加更多
+ +
+
+
+
+ 下一步 +
+
+

+ 点击下一步即表示同意用户协议 +

+
+
+
+ + diff --git a/src/example/fragment/form_input_status.html b/src/example/fragment/form_input_status.html new file mode 100644 index 0000000..73bbccc --- /dev/null +++ b/src/example/fragment/form_input_status.html @@ -0,0 +1,59 @@ +
+
+
+

表单页标题

+
状态展示
+
+
+
+
表单报错
+
+
+
+
+ +
+
+
+
+
+
表单只读、置灰
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+ 确定 +
+
+
+ + diff --git a/src/example/fragment/form_page.html b/src/example/fragment/form_page.html new file mode 100644 index 0000000..dd0d059 --- /dev/null +++ b/src/example/fragment/form_page.html @@ -0,0 +1,71 @@ +
+
+
+

表单页标题

+
表单页描述
+
+
+
+
表单组标题
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+

+ 表单页提示，居中对齐 +

+
+
+ 确定 +
+
+

+ 表单页提示，居中对齐 +

+
+
+
+

+ 底部链接文本 +

+

Copyright © 2008-2019 weui.io

+
+
+
+
+ diff --git a/src/example/fragment/form_radio.html b/src/example/fragment/form_radio.html new file mode 100644 index 0000000..3d1049b --- /dev/null +++ b/src/example/fragment/form_radio.html @@ -0,0 +1,57 @@ +
+
+
+

表单页标题

+
单选框
+
+
+
+
+ + + +
添加更多
+ +
+
+
+
+ 确定 +
+
+
+ + diff --git a/src/example/fragment/form_select.html b/src/example/fragment/form_select.html new file mode 100644 index 0000000..1cd8e43 --- /dev/null +++ b/src/example/fragment/form_select.html @@ -0,0 +1,69 @@ +
+
+
+

表单页标题

+
选择框
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ 确定 +
+
+
+ + diff --git a/src/example/fragment/form_switch.html b/src/example/fragment/form_switch.html new file mode 100644 index 0000000..cebe7ff --- /dev/null +++ b/src/example/fragment/form_switch.html @@ -0,0 +1,50 @@ +
+
+
+

表单页标题

+
开关
+
+
+
+
+
+
标题文字
+
+ +
+
+
+
兼容IE Edge的版本
+
+ +
+
+
+
+
+
+ 确定 +
+
+
+ + diff --git a/src/example/fragment/form_textarea.html b/src/example/fragment/form_textarea.html new file mode 100644 index 0000000..c428c39 --- /dev/null +++ b/src/example/fragment/form_textarea.html @@ -0,0 +1,24 @@ +
+
+
+

表单页标题

+
文本域
+
+
+
+
文本域
+
+
+
+ +
0/200
+
+
+
+
+
+
+ 确定 +
+
+
diff --git a/src/example/fragment/form_vcode.html b/src/example/fragment/form_vcode.html new file mode 100644 index 0000000..c47ba99 --- /dev/null +++ b/src/example/fragment/form_vcode.html @@ -0,0 +1,60 @@ +
+
+
+

表单页标题

+
验证码
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
收不到验证码
+
+
+
+ +
+
+ 确定 +
+
+
+ + diff --git a/src/example/fragment/icons.html b/src/example/fragment/icons.html index e4c07fe..0d345c0 100644 --- a/src/example/fragment/icons.html +++ b/src/example/fragment/icons.html @@ -39,6 +39,7 @@

用于表示等待

+
diff --git a/src/example/index.html b/src/example/index.html index cb37f25..91391d8 100644 --- a/src/example/index.html +++ b/src/example/index.html @@ -17,6 +17,14 @@ + + + + + + + + diff --git a/src/style/icon/weui-icon.less b/src/style/icon/weui-icon.less index e123e54..dcd6249 100644 --- a/src/style/icon/weui-icon.less +++ b/src/style/icon/weui-icon.less @@ -26,15 +26,16 @@ mask-size:100%; background-color:currentColor; - &:before{ - // 平滑升级 - display: inline-block; - margin-left: .2em; - margin-right: .2em; - } + // 平滑升级 + //&:not([class^="weui-icon_"]):not([class*=" weui-icon_"]){ + // font-size:14px; + // margin-left: .2em; + // margin-right: .2em; + //} } +// icon map .weui-icon-circle{ mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E); } @@ -111,6 +112,7 @@ mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E); } +// icon setting .weui-icon-success { color: @weuiColorPrimary; } @@ -141,7 +143,7 @@ } .weui-icon-info-circle { - color: @weuiColorPrimary; + color: @weuiTextColorTips; } .weui-icon-safe-success { diff --git a/src/style/widget/weui-cell/weui-cell_global.less b/src/style/widget/weui-cell/weui-cell_global.less index 449f6e7..33f43d4 100644 --- a/src/style/widget/weui-cell/weui-cell_global.less +++ b/src/style/widget/weui-cell/weui-cell_global.less @@ -81,6 +81,11 @@ z-index: display: none; } } + &:not(.weui-cell_readonly):not(.weui-cell_disabled){ + &:active{ + background-color:#ECECEC; + } + } } .weui-cell_primary{ align-items: flex-start; diff --git a/src/style/widget/weui-cell/weui-cells__group.less b/src/style/widget/weui-cell/weui-cells__group.less index d4a7434..d753705 100644 --- a/src/style/widget/weui-cell/weui-cells__group.less +++ b/src/style/widget/weui-cell/weui-cells__group.less @@ -104,6 +104,9 @@ } .weui-cell_select-after{ padding-left:32px; + .weui-select{ + padding-left:0; + } } diff --git a/src/style/widget/weui-cell/weui-form/weui-form_common.less b/src/style/widget/weui-cell/weui-form/weui-form_common.less index 16316c9..778fbea 100644 --- a/src/style/widget/weui-cell/weui-form/weui-form_common.less +++ b/src/style/widget/weui-cell/weui-form/weui-form_common.less @@ -37,32 +37,17 @@ -webkit-appearance: none; margin: 0; } - &:disabled{ - opacity:1; - -webkit-text-fill-color:@weuiTextColorDesc; - } - &[disabled], - &[readonly]{ - color:@weuiTextColorDesc; - } } .weui-textarea { display: block; border: 0; resize: none; + background:transparent; width: 100%; color: inherit; font-size: 1em; line-height: inherit; outline: 0; - &:disabled{ - opacity:1; - -webkit-text-fill-color:@weuiTextColorDesc; - } - &[disabled], - &[readonly]{ - color:@weuiTextColorDesc; - } } .weui-textarea-counter{ @@ -106,3 +91,15 @@ color:@weuiTextColorWarn; .weui-icon-warn{display:inline-block;} } +.weui-cell_readonly,.weui-cell_disabled{ + .weui-input,.weui-textarea { + &:disabled{ + opacity:1; + -webkit-text-fill-color:@weuiTextColorDesc; + } + &[disabled], + &[readonly]{ + color:@weuiTextColorDesc; + } + } +}