feat(indexes): add css variable

Tencent · Jul 25, 2022 · 222d816 · 222d816
1 parent df8026d
commit 222d816
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/src/indexes/README.md b/src/indexes/README.md
@@ -14,6 +14,18 @@ isComponent: true
   "t-indexes": "tdesign-miniprogram/indexes/indexes"
 }
 ```
+### 主题定制
+CSS 变量名|说明
+--|--
+--td-indexes-title-color | 索引标题颜色;
+--td-indexes-title-bg-color | 索引标题背景颜色;
+--td-indexes-children-text-color | 索引内容文本颜色;
+--td-indexes-children-bg-color | 索引内容背景颜色;
+--td-indexes-index-text-color | 索引文本颜色;
+--td-indexes-index-text-active-color | 索引文本激活态颜色;
+--td-indexes-index-bg-color | 索引背景颜色;
+--td-indexes-tips-text-color | 索引提示信息颜色;
+--td-indexes-tips-bg-color | 索引提示信息颜色;
 
 ## 代码演示
 

diff --git a/src/indexes/indexes.less b/src/indexes/indexes.less
@@ -1,3 +1,5 @@
+@import '../common/style/index.less';
+
 @font-size: 32rpx;
 @color: #000;
 
@@ -9,21 +11,36 @@
 
 @primary-color: #0071ce;
 
-@background-color: #f8f8f8;
 @front-background-color: white;
 
 @active-color: #0052d9;
 @active-font-size: 32rpx;
 @active-line-height: 56rpx;
 
-.t-indexes {
-  background-color: @background-color;
+page {
+  --td-indexes-title-color: @text-level-3-color;
+  --td-indexes-title-bg-color: @bg-color-fade;
+  --td-indexes-children-text-color: @color;
+  --td-indexes-children-bg-color: @front-background-color;
+  --td-indexes-index-text-color: @hint-color;
+  --td-indexes-index-text-active-color: @active-color;
+  --td-indexes-index-bg-color: @front-background-color;
+  --td-indexes-tips-text-color: @front-background-color;
+  --td-indexes-tips-bg-color: @active-color;
+}
+
+.@{prefix}-indexes {
   position: relative;
 
+  &__title {
+    color: var(--td-indexes-title-color);
+    background-color: var(--td-indexes-title-bg-color);
+  }
+
   &__row {
     font-size: @font-size;
-    color: @color;
-    background-color: @front-background-color;
+    color: var(--td-indexes-children-text-color);
+    background-color: var(--td-indexes-children-bg-color);
     height: @cell-height;
     display: flex;
     align-items: center;
@@ -40,7 +57,8 @@
     right: 0;
     width: 100rpx;
     font-size: 24rpx;
-    color: @hint-color;
+    color: var(--td-indexes-index-text-color);
+    background-color: var(--td-indexes-index-bg-color);
     font-size: @hint-font-size;
     line-height: @hint-line-height;
     text-align: center;
@@ -63,7 +81,7 @@
     position: relative;
 
     &.is-actived {
-      color: @active-color;
+      color: var(--td-indexes-index-text-active-color);
       font-size: @active-font-size;
       line-height: @active-line-height;
     }
@@ -77,8 +95,8 @@
     vertical-align: middle;
     font-size: 40rpx;
     font-weight: 700;
-    color: white;
-    background-color: @active-color;
+    color: var(--td-indexes-tips-text-color);
+    background-color: var(--td-indexes-tips-bg-color);
     border-radius: 40rpx 40rpx 0;
     position: absolute;
     top: 0;

diff --git a/src/indexes/indexes.ts b/src/indexes/indexes.ts
@@ -9,7 +9,7 @@ const topOffset = 40; // 滑动选中高亮的顶部偏移(px)
 
 @wxComponent()
 export default class IndexBar extends SuperComponent {
-  externalClasses = ['t-class', 't-class-index'];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-index`];
 
   properties = props;
 
@@ -30,6 +30,7 @@ export default class IndexBar extends SuperComponent {
   };
 
   data = {
+    prefix,
     classPrefix,
     clientHeight: 0,
     groups: [],

diff --git a/src/indexes/indexes.wxml b/src/indexes/indexes.wxml
@@ -1,4 +1,4 @@
-<view class="{{classPrefix}} t-class">
+<view class="{{classPrefix}} {{prefix}}-class">
   <scroll-view
     class="{{classPrefix}}__content"
     scroll-y
@@ -8,7 +8,7 @@
     bindscroll="onListScroll"
   >
     <t-cell-group
-      t-class="{{classPrefix}}__group"
+      t-class-title="{{classPrefix}}__title"
       class="{{classPrefix}}__group"
       wx:for="{{ groups }}"
       wx:key="index"
@@ -29,7 +29,7 @@
       ></t-cell>
     </t-cell-group>
   </scroll-view>
-  <view class="{{classPrefix}}__index t-class-index">
+  <view class="{{classPrefix}}__index {{prefix}}-class-index">
     <view
       class="{{classPrefix}}__bar"
       id="id-{{classPrefix}}__bar"
@@ -46,10 +46,7 @@
         data-group="{{ group }}"
       >
         {{ group.index }}
-        <view
-          class="{{classPrefix}}__tips"
-          wx:if="{{ showScrollTip && currentGroup.index === group.index }}"
-        >
+        <view class="{{classPrefix}}__tips" wx:if="{{ showScrollTip && currentGroup.index === group.index }}">
           <view class="{{classPrefix}}__tips-text">{{ currentGroup.index }}</view>
         </view>
       </view>