feat: v2.6.0

Tencent · Jun 21, 2023 · 6c236c6 · 6c236c6
1 parent 898d4f8
commit 6c236c6
Show file tree

Hide file tree

Showing 55 changed files with 2,675 additions and 1,321 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+### v2.6.0 (2023-06-21)
+
+#### Features
+* feat: 新增informationBar组件
+* feat: cell组件支持上下结构
+* feat: actionsheet菜单新增副标题
+* feat: form新增weui-form__bd和weui-form__ft结构，布局向后兼容
+* feat: form新增底部悬浮效果
+* feat: button UI升级
+
+
+
 ### v2.5.16 (2023-01-16)
 
 #### Features

diff --git a/dist/example/example.css b/dist/example/example.css
diff --git a/dist/example/index.html b/dist/example/index.html
diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "weui",
-    "version": "2.5.16",
+    "version": "2.6.0",
     "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
     "keywords": [
         "weui",

diff --git a/src/example/actionsheet/actionsheet.html b/src/example/actionsheet/actionsheet.html
@@ -15,7 +15,10 @@ <h1 class="page__title">ActionSheet</h1>
             </div>
             <div class="weui-actionsheet__menu">
                 <div id="current1" tabindex="0" role="button" class="weui-actionsheet__cell">示例菜单</div>
-                <div role="button" tabindex="0" class="weui-actionsheet__cell">示例菜单</div>
+                <div role="button" tabindex="0" class="weui-actionsheet__cell weui-actionsheet__cell_tips">
+                  示例菜单
+                  <div class="weui-actionsheet__cell__tips">副标题</div>
+                </div>
                 <div role="button" tabindex="0" class="weui-actionsheet__cell weui-actionsheet__cell_warn">负向菜单</div>
             </div>
             <div class="weui-actionsheet__action">

diff --git a/src/example/button/button_bottom_fixed.html b/src/example/button/button_bottom_fixed.html
@@ -3,9 +3,17 @@
     <div class="weui-bottom-fixed-opr-page__content">
       <div class="weui-bottom-fixed-opr-demo">Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? </div>
     </div>
-    <div class="weui-bottom-fixed-opr" id="js_opr">
-      <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn">阅读并同意</a>
-      <a href="javascript:;" role="button" class="weui-btn weui-btn_default">取消</a>
+    <div class="weui-bottom-fixed-opr-page__tool">
+      <div class="weui-bottom-fixed-opr-page__tips">
+        <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
+        <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox">
+        <span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a></span>
+      </label>
+      </div>
+      <div class="weui-bottom-fixed-opr" id="js_opr">
+        <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn">阅读并同意</a>
+        <a href="javascript:;" role="button" class="weui-btn weui-btn_default">取消</a>
+      </div>
     </div>
   </div>
   <script type="text/javascript">

diff --git a/src/example/button/button_default.html b/src/example/button/button_default.html
@@ -6,18 +6,28 @@ <h1 class="page__title">Button</h1>
     <div class="page__bd">
 
         <div class="button-sp-area">
-        <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
-        <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
-        <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i></span>主要操作</a>
-        <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
-        <a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
-		<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
-        <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
-        <a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
-		<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
-        <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
+          <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
+          <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
+          <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
         </div>
 
+        <div class="button-sp-area">
+          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_medium">medium 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_medium">medium 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_medium">medium 按钮</a>
+        </div>
+
+        <div class="button-sp-area overlay">
+          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay weui-btn_medium">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay weui-btn_mini">overlay 按钮</a>
+        </div>
 
         <div class="button-sp-area cell">
           <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a>

diff --git a/src/example/example.less b/src/example/example.less
@@ -349,7 +349,17 @@ body,
         margin: 15px auto;
         padding: 15px;
         text-align: center;
-        &.cell { padding: 15px 0; }
+        &.cell {
+          padding: 15px 0; 
+          display:none;
+        }
+        &.overlay { 
+          padding: 15px 0;
+          background:var(--weui-BRAND);
+          .weui-btn_mini{
+            margin-top:16px;
+          }
+        }
     }
 }
 .page.button_bottom_fixed {
@@ -569,6 +579,12 @@ body,
         }
     }
 }
+.page.information-bar {
+  .weui-information-bar{
+    position:static;
+    margin-bottom:20px;
+  }
+}
 
 .page.gallery {
     overflow: hidden;

diff --git a/src/example/form/form.html b/src/example/form/form.html
@@ -8,12 +8,14 @@ <h1 class="page__title">Form</h1>
       <a style="display:none;" href="#form_primary" role="button" class="weui-btn weui-btn_default">反色表单</a>
       <a href="#form_input_status" role="button" class="weui-btn weui-btn_default">输入框状态</a>
       <a href="#form_vcode" role="button" class="weui-btn weui-btn_default">验证码</a>
+      <a href="#form_bottom_fixed" role="button" class="weui-btn weui-btn_default">底部悬浮</a>
       <a href="#form_checkbox" role="button" class="weui-btn weui-btn_default">复选框</a>
       <a href="#form_access" role="button" class="weui-btn weui-btn_default">跳转列表项</a>
       <a href="#form_radio" role="button" class="weui-btn weui-btn_default">单选框</a>
       <a href="#form_switch" role="button" class="weui-btn weui-btn_default">开关</a>
       <a href="#form_select" role="button" class="weui-btn weui-btn_default">原生选择框</a>
       <a href="#form_select_primary" role="button" class="weui-btn weui-btn_default">模拟选择框</a>
       <a href="#form_textarea" role="button" class="weui-btn weui-btn_default">文本域</a>
+      <a href="#form_vertical" role="button" class="weui-btn weui-btn_default">上下结构</a>
   </div>
 </div>
diff --git a/src/example/form/form_access.html b/src/example/form/form_access.html
@@ -1,19 +1,21 @@
 <div class="page">
   <div class="weui-form">
-    <div class="weui-form__text-area">
-      <h2 class="weui-form__title">跳转列表项</h2>
-    </div>
-    <div class="weui-form__control-area">
-      <div class="weui-cells__group weui-cells__group_form">
-        <div class="weui-cells">
-          <a class="weui-cell weui-cell_access" href="javascript:">
-            <div class="weui-cell__bd"><p>cell standard</p></div>
-            <div class="weui-cell__ft"></div>
-          </a>
-          <a class="weui-cell weui-cell_access" href="javascript:">
-            <div class="weui-cell__bd"><p>cell standard</p></div>
-            <div class="weui-cell__ft"></div>
-          </a>
+    <div class="weui-form__bd">
+      <div class="weui-form__text-area">
+        <h2 class="weui-form__title">跳转列表项</h2>
+      </div>
+      <div class="weui-form__control-area">
+        <div class="weui-cells__group weui-cells__group_form">
+          <div class="weui-cells">
+            <a class="weui-cell weui-cell_access" href="javascript:">
+              <div class="weui-cell__bd"><p>cell standard</p></div>
+              <div class="weui-cell__ft"></div>
+            </a>
+            <a class="weui-cell weui-cell_access" href="javascript:">
+              <div class="weui-cell__bd"><p>cell standard</p></div>
+              <div class="weui-cell__ft"></div>
+            </a>
+          </div>
         </div>
       </div>
     </div>