fix(page-demo): fix the usage of button in multiple pages

Tencent · Mar 8, 2022 · 3eb2316 · 3eb2316
1 parent a5ff0ca
commit 3eb2316
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 19 deletions.
diff --git a/example/components/demo-block/index.wxml b/example/components/demo-block/index.wxml
@@ -12,6 +12,7 @@
       <t-button
         t-class="demo-block__oper-btn"
         size="large"
+        block
         data-type="{{ btnItem.type }}"
         bind:tap="clickHandle"
       >

diff --git a/example/pages/back-top/back-top.less b/example/pages/back-top/back-top.less
@@ -5,7 +5,7 @@ page {
     margin-top: 32rpx;
 
     &-item {
-      margin-bottom: 32rpx;
+      margin: 0 32rpx 32rpx;
 
       .t-class-button {
         font-size: 32rpx;
@@ -17,7 +17,6 @@ page {
     display: flex;
   }
 
-
   .skeleton-text {
     border-radius: 16rpx;
   }

diff --git a/example/pages/back-top/back-top.wxml b/example/pages/back-top/back-top.wxml
@@ -6,22 +6,46 @@
     <view class="demo-section__desc">圆型返回顶部</view>
     <view class="button-group">
       <view class="button-group-item">
-        <t-button t-class="t-class-button" size="large" bindtap="onBtnClick" data-index="{{0}}">
+        <t-button
+          t-class="t-class-button"
+          size="large"
+          block
+          bindtap="onBtnClick"
+          data-index="{{0}}"
+        >
           圆白底
         </t-button>
       </view>
       <view class="button-group-item">
-        <t-button t-class="t-class-button" size="large" bindtap="onBtnClick" data-index="{{1}}">
+        <t-button
+          t-class="t-class-button"
+          size="large"
+          block
+          bindtap="onBtnClick"
+          data-index="{{1}}"
+        >
           圆黑底
         </t-button>
       </view>
       <view class="button-group-item">
-        <t-button t-class="t-class-button" size="large" bindtap="onBtnClick" data-index="{{2}}">
+        <t-button
+          t-class="t-class-button"
+          size="large"
+          block
+          bindtap="onBtnClick"
+          data-index="{{2}}"
+        >
           圆白底纯图标
         </t-button>
       </view>
       <view class="button-group-item">
-        <t-button t-class="t-class-button" size="large" bindtap="onBtnClick" data-index="{{3}}">
+        <t-button
+          t-class="t-class-button"
+          size="large"
+          block
+          bindtap="onBtnClick"
+          data-index="{{3}}"
+        >
           圆黑底纯图标
         </t-button>
       </view>
@@ -30,12 +54,24 @@
     <view class="demo-section__desc">半圆型返回顶部</view>
     <view class="button-group">
       <view class="button-group-item">
-        <t-button t-class="t-class-button" size="large" bindtap="onBtnClick" data-index="{{4}}">
+        <t-button
+          t-class="t-class-button"
+          size="large"
+          block
+          bindtap="onBtnClick"
+          data-index="{{4}}"
+        >
           半圆白底
         </t-button>
       </view>
       <view class="button-group-item">
-        <t-button t-class="t-class-button" size="large" bindtap="onBtnClick" data-index="{{5}}">
+        <t-button
+          t-class="t-class-button"
+          size="large"
+          block
+          bindtap="onBtnClick"
+          data-index="{{5}}"
+        >
           半圆黑底
         </t-button>
       </view>

diff --git a/example/pages/indexes/indexes.less b/example/pages/indexes/indexes.less
@@ -2,10 +2,14 @@
   background-color: #fff;
   font-size: 32rpx;
   line-height: 48rpx;
-  color: rgba(0, 0, 0, .9);
+  color: rgba(0, 0, 0, 0.9);
   padding: 48rpx 0rpx 96rpx 0rpx;
   min-height: 100vh;
 
+  .box {
+    margin: 0 32rpx;
+  }
+
   .sub-title {
     margin-top: 40rpx;
     font-weight: bold;
@@ -25,7 +29,7 @@
     align-items: center;
     justify-content: center;
     font-size: 28rpx;
-    color: rgba(0, 0, 0, .9);
+    color: rgba(0, 0, 0, 0.9);
     margin-bottom: 18px;
   }
 }
diff --git a/example/pages/indexes/indexes.wxml b/example/pages/indexes/indexes.wxml
@@ -2,11 +2,13 @@
   <view class="demo-title">Indexes 索引</view>
   <view class="demo-desc">用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。</view>
   <t-demo title="01 类型" desc="基础索引类型">
-    <t-button t-class="type-button" size="large" bind:tap="tapShowLetter">
-      <navigator url="/pages/indexes/display">字母索引</navigator>
-    </t-button>
-    <t-button t-class="type-button" size="large" bind:tap="tapShowNumber">
-      <navigator url="/pages/indexes/display">数字索引</navigator>
-    </t-button>
+    <view class="box">
+      <t-button t-class="type-button" variant="plain" size="large" block bind:tap="tapShowLetter">
+        <navigator url="/pages/indexes/display">字母索引</navigator>
+      </t-button>
+      <t-button t-class="type-button" variant="plain" size="large" block bind:tap="tapShowNumber">
+        <navigator url="/pages/indexes/display">数字索引</navigator>
+      </t-button>
+    </view>
   </t-demo>
 </view>
diff --git a/example/pages/loading/loading.less b/example/pages/loading/loading.less
@@ -42,6 +42,10 @@ page {
   font-size: 24rpx;
 }
 
+.box {
+  margin: 0 32rpx;
+}
+
 .t-slider__container {
   margin: 0 32rpx;
 }

diff --git a/example/pages/loading/loading.wxml b/example/pages/loading/loading.wxml
@@ -44,9 +44,11 @@
     <view class="demo-section__desc">加载失败</view>
     <t-loading theme="error" class="loading-style" loading bind:reload="reloadPage"></t-loading>
     <view class="demo-section__desc">进度条加载</view>
-    <t-button size="large" plain class="progress-btn" bind:tap="goToProgress"
-      >页面进度条加载</t-button
-    >
+    <view class="box">
+      <t-button size="large" plain class="progress-btn" block bind:tap="goToProgress"
+        >页面进度条加载</t-button
+      >
+    </view>
   </t-demo>
 
   <t-demo title="02 状态" desc="如果加载状态在延迟内结束，则不显示">