From 15cdf2699b7746b8e2e2372015ac90a2e19fa834 Mon Sep 17 00:00:00 2001 From: xushengni Date: Fri, 17 Sep 2021 17:33:30 +0800 Subject: [PATCH] feat: weui 2.5.0 --- CHANGELOG.md | 18 + dist/example/example.css | 2 +- dist/example/example.js | 10 + dist/example/index.html | 1309 ++++++++++------- dist/example/wah.js | 1 + dist/style/weui.css | 488 ++++-- dist/style/weui.min.css | 4 +- gulpfile.js | 155 +- package-lock.json | 1211 ++++++++++----- package.json | 4 +- src/example/actionsheet/actionsheet.html | 45 +- src/example/article/article.html | 6 +- src/example/badge/badge.html | 63 +- src/example/button/button.html | 31 +- src/example/button/button_bottom_fixed.html | 10 + src/example/button/button_default.html | 37 + src/example/dialog/dialog.html | 48 +- src/example/example.js | 10 + src/example/example.less | 30 +- src/example/footer/footer.html | 10 +- src/example/form/form.html | 20 +- src/example/form/form_checkbox.html | 8 +- src/example/form/form_input_status.html | 52 +- src/example/form/form_page.html | 39 +- src/example/form/form_radio.html | 6 +- src/example/form/form_select.html | 8 +- src/example/form/form_select_primary.html | 10 +- src/example/form/form_switch.html | 26 +- src/example/form/form_textarea.html | 4 +- src/example/form/form_vcode.html | 69 +- src/example/gallery/gallery.html | 19 +- src/example/grid/grid.html | 20 +- .../half-screen-dialog.html | 135 +- src/example/home.html | 142 +- src/example/icons/icons.html | 64 +- src/example/index.html | 12 +- src/example/input/input.html | 2 +- src/example/list/list.html | 74 +- src/example/loading/loading.html | 8 +- src/example/loadmore/loadmore.html | 9 +- src/example/msg/msg.html | 14 +- src/example/msg/msg_custom_area_cell.html | 12 +- src/example/msg/msg_custom_area_preview.html | 8 +- src/example/msg/msg_custom_area_tips.html | 10 +- src/example/msg/msg_success.html | 8 +- src/example/msg/msg_text.html | 4 +- src/example/msg/msg_text_primary.html | 6 +- src/example/msg/msg_warn.html | 8 +- src/example/navbar/navbar.html | 20 +- src/example/panel/panel.html | 58 +- src/example/picker/picker.html | 4 +- src/example/preview/preview.html | 28 +- src/example/progress/progress.html | 33 +- src/example/searchbar/searchbar.html | 27 +- src/example/slider/slider.html | 8 +- src/example/tabbar/tabbar.html | 39 +- src/example/toast/toast.html | 20 +- src/example/top-tips/top-tips.html | 8 +- src/example/uploader/uploader.html | 48 +- src/example/wah.js | 1 + src/style/base/a11y.less | 62 + src/style/base/reset.less | 1 + src/style/base/variable/weui-button.less | 4 +- src/style/icon/weui-icon.less | 15 +- src/style/weui.less | 2 + src/style/widget/weui-agree/weui-agree.less | 5 +- .../weui-button/weui-btn_bottom-fixed.less | 94 ++ .../widget/weui-button/weui-btn_disabled.less | 2 +- .../widget/weui-button/weui-btn_global.less | 2 - src/style/widget/weui-button/weui-button.less | 14 +- .../widget/weui-cell/weui-cell_global.less | 1 + .../widget/weui-cell/weui-cells__group.less | 79 +- .../weui-check/weui-check_common.less | 5 +- .../weui-cell/weui-form/weui-select.less | 5 +- src/style/widget/weui-cell/weui-switch.less | 5 +- .../widget/weui-loading/weui-loading.less | 5 +- .../widget/weui-media-box/weui-media-box.less | 2 + src/style/widget/weui-page/weui-form.less | 23 +- src/style/widget/weui-page/weui-msg.less | 2 + .../widget/weui-searchbar/weui-searchbar.less | 54 +- src/style/widget/weui-slider/weui-slider.less | 2 +- src/style/widget/weui-tab/weui-tabbar.less | 6 +- .../widget/weui-tips/weui-actionsheet.less | 1 + src/style/widget/weui-tips/weui-badge.less | 2 +- src/style/widget/weui-tips/weui-dialog.less | 10 +- .../weui-tips/weui-half-screen-dialog.less | 28 +- src/style/widget/weui-tips/weui-toast.less | 6 +- 87 files changed, 3323 insertions(+), 1697 deletions(-) create mode 100644 dist/example/wah.js create mode 100644 src/example/button/button_bottom_fixed.html create mode 100644 src/example/button/button_default.html create mode 100644 src/example/wah.js create mode 100644 src/style/base/a11y.less create mode 100644 src/style/widget/weui-button/weui-btn_bottom-fixed.less diff --git a/CHANGELOG.md b/CHANGELOG.md index 750aec40..aa849783 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,21 @@ +### v2.5.0 (2021-09-17) + +#### Features +* feat: WeUI组件库适配无障碍 +* feat: WeUI组件库适配大字号 +* feat: 新增无障碍、热区工具类(见`/style/base/a11y.less`) +* feat: 按钮组件UI升级：高度、圆角属性 +* feat: 新增底部悬浮按钮 +* feat: 统一各平台组件样式（涉及dialog、actionsheet） +* feat: 构建支持Node.js 12+的环境 + +#### Bugfixes +* fix: msg组件extra-area新增水平间距 +* fix: 修复toast文字场景默认宽度问题 + + + + ### v2.4.4 (2021-03-23) #### Features diff --git a/dist/example/example.css b/dist/example/example.css index f5f85efe..084508a7 100644 --- a/dist/example/example.css +++ b/dist/example/example.css @@ -1 +1 @@ -body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:10px;padding-bottom:calc(10px + constant(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:pointer}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.1em}.page.form_page .weui-label{width:4.1em}.page.form_select .weui-cells__group_form .weui-cell_select-before .weui-select{width:3.1em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_select .weui-label,.page.form_select_primary .weui-label,.page.form_vcode .weui-label{width:3.1em}.page.button{background-color:var(--weui-BG-0)}.page.button .weui-btn_mini{vertical-align:middle}.page.button .page__bd{padding:0}.page.button .button-sp-area{margin:15px auto;padding:15px;text-align:center}.page.button .button-sp-area.cell{padding:15px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3em;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.gallery{overflow:hidden}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.loading_demo .weui-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}} \ No newline at end of file +body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page{outline:0}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:10px;padding-bottom:calc(10px + constant(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=button_] .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:pointer}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{display:block;font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.14em}.page.form_page .weui-label{width:4.1em}.page.form_select .weui-cells__group_form .weui-cell_select-before .weui-select{width:3.14em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_select .weui-label,.page.form_select_primary .weui-label,.page.form_vcode .weui-label{width:3.14em}.page.button,.page.button_default{background-color:var(--weui-BG-0)}.page.button .weui-btn_mini,.page.button_default .weui-btn_mini{vertical-align:middle;margin:0 12px}.page.button .page__bd,.page.button_default .page__bd{padding:0}.page.button .button-sp-area,.page.button_default .button-sp-area{margin:15px auto;padding:15px;text-align:center}.page.button .button-sp-area.cell,.page.button_default .button-sp-area.cell{padding:15px 0}.page.button_bottom_fixed{background-color:var(--weui-BG-2)}.page.button_bottom_fixed .weui-bottom-fixed-opr-demo{padding:32px 32px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.gallery{overflow:hidden}.page.navbar .weui-tab__panel,.page.tabbar .weui-tab__panel{padding:32px}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.loading_demo .weui-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}} \ No newline at end of file diff --git a/dist/example/example.js b/dist/example/example.js index aa38883b..8748f6cd 100644 --- a/dist/example/example.js +++ b/dist/example/example.js @@ -64,7 +64,9 @@ $(function () { var $html = $(html).addClass('slideIn').addClass(config.name); $html.on('animationend webkitAnimationEnd', function(){ $html.removeClass('slideIn').addClass('js_show'); + setPageA11y(); }); + this.$container.append($html); this._pageAppend.call(this, $html); this._pageStack.push({ @@ -108,6 +110,7 @@ $(function () { stack.dom.addClass('slideOut').on('animationend webkitAnimationEnd', function () { stack.dom.remove(); + setPageA11y(); }); return this; @@ -284,6 +287,13 @@ $(function () { .setDefault('home') .init(); } + function setPageA11y() { + var $pages = $('.page'); + var $lastPage = $pages.eq($pages.length - 1); + + $pages.attr('aria-hidden','true'); // 所有page都加 + $lastPage.removeAttr('aria-hidden').attr('tabindex','-1').trigger('focus'); // 最后一个page不用加 + } function init(){ preload(); diff --git a/dist/example/index.html b/dist/example/index.html index 02bdacf7..b5a5043a 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -8,7 +8,9 @@ -
错误提示
+ + +
@@ -21,47 +23,47 @@

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

-
+ + + + @@ -882,58 +947,58 @@

输入框状态

表单报错：置顶tipsbar报错信息
-
-
+
-
-
+ +
+
表单报错：当前项位置报错
-
-
+
+
- +
表单只读、置灰
-
-
+
-
-
+ +
+
- 确定 + 确定
-