Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(divider): use css variable #656

Merged
merged 1 commit into from
Jul 25, 2022
Merged

feat(divider): use css variable #656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/divider/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ isComponent: true
}
```

### 主题定制

CSS 变量名|说明
--|--
--td-divider-color | 分割线颜色
--td-divider-content-color | 分割线文本颜色


## 代码演示

### 基础分割符
Expand Down
11 changes: 0 additions & 11 deletions src/divider/_example/api.md
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/divider/_example/base/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
5 changes: 4 additions & 1 deletion src/divider/_example/base/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"t-divider": "tdesign-miniprogram/divider/divider"
}
}
10 changes: 5 additions & 5 deletions src/divider/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<view>直线拉通</view>
<view class="divider-demo__title">直线拉通</view>
<t-divider></t-divider>

<view>虚线拉通</view>
<view class="divider-demo__title">虚线拉通</view>
<t-divider dashed></t-divider>

<view>左右间距</view>
<view class="divider-demo__title">左右间距</view>
<t-divider t-class="demo-2"></t-divider>

<view>右侧拉通</view>
<view class="divider-demo__title">右侧拉通</view>
<t-divider t-class="demo-3"></t-divider>

<view>自定义左侧间距</view>
<view class="divider-demo__title">自定义左侧间距</view>
<t-divider t-class="demo-4"></t-divider>
7 changes: 7 additions & 0 deletions src/divider/_example/base/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.divider-demo__title {
font-size: 24rpx;
color: rgba(0, 0, 0, 0.4);
padding: 16rpx 32rpx;
line-height: 40rpx;
}

.demo-2 {
margin: 0 32rpx;
}
Expand Down
35 changes: 0 additions & 35 deletions src/divider/_example/divider.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,38 +22,3 @@ page {
align-items: center;
}
}

.t-class-content {
margin-right: 20rpx;
margin-left: 20rpx;
}

.demo-2 {
margin: 0 32rpx;
}

.demo-3 {
margin-left: 32rpx;
}

.demo-4 {
margin-left: 152rpx;
}

.demo-5 {
margin: 0 32rpx;
}

.demo-6 {
display: flex;
height: 20px;
line-height: center;
align-items: center;
margin: 0 32rpx;
font-size: 12px;

&--text-color {
color: #000;
opacity: 0.4;
}
}
2 changes: 1 addition & 1 deletion src/divider/_example/divider.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<view class="t-divider-list">
<base />
<text-line />
<text />
<text-only />
</view>
</t-demo>
</view>
1 change: 1 addition & 0 deletions src/divider/_example/text-line/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
5 changes: 4 additions & 1 deletion src/divider/_example/text-line/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"t-divider": "tdesign-miniprogram/divider/divider"
}
}
10 changes: 5 additions & 5 deletions src/divider/_example/text-line/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<view>文字+直线</view>
<t-divider t-class="demo-5" t-class-content="t-class-content">
<text>文字信息</text>
<view class="divider-demo__title">文字+直线</view>
<t-divider t-class="demo-5">
<text slot="content">文字信息</text>
</t-divider>

<view>文字+虚线</view>
<t-divider t-class="demo-5" t-class-content="t-class-content" dashed content="文字信息" />
<view class="divider-demo__title">文字+虚线</view>
<t-divider t-class="demo-5" dashed content="文字信息" />
11 changes: 7 additions & 4 deletions src/divider/_example/text-line/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
.divider-demo__title {
font-size: 24rpx;
color: rgba(0, 0, 0, 0.4);
padding: 0 32rpx 16rpx;
line-height: 40rpx;
}

.demo-5 {
margin: 0 32rpx;
}
.t-class-content {
margin-right: 20rpx;
margin-left: 20rpx;
}
1 change: 1 addition & 0 deletions src/divider/_example/text-only/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
5 changes: 4 additions & 1 deletion src/divider/_example/text-only/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"t-divider": "tdesign-miniprogram/divider/divider"
}
}
12 changes: 6 additions & 6 deletions src/divider/_example/text-only/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<view>纯文字</view>
<view class="divider-demo__title">纯文字</view>
<t-divider lineColor="transparent">
<text>没有更多了~</text>
<text slot="content">没有更多了~</text>
</t-divider>

<view>垂直分割</view>
<view class="divider-demo__title">垂直分割</view>
<view class="demo-6">
<text class="demo-6--text-color">文字信息</text>
<text class="demo-6__text-color">文字信息</text>
<t-divider layout="vertical" />
<text class="demo-6--text-color">文字信息</text>
<text class="demo-6__text-color">文字信息</text>
<t-divider layout="vertical" />
<text class="demo-6--text-color">文字信息</text>
<text class="demo-6__text-color">文字信息</text>
</view>
13 changes: 10 additions & 3 deletions src/divider/_example/text-only/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.divider-demo__title {
font-size: 24rpx;
color: rgba(0, 0, 0, 0.4);
padding: 0 32rpx 16rpx;
line-height: 40rpx;
}

.demo-6 {
display: flex;
height: 20px;
Expand All @@ -6,7 +13,7 @@
margin: 0 32rpx;
font-size: 12px;
}
.demo-6--text-color {
color: #000;
opacity: 0.4;

.demo-6__text-color {
color: rgba(0, 0, 0, 0.4);
}
26 changes: 20 additions & 6 deletions src/divider/divider.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
// @import (css) '../common/index.wxss';
@import '../common/style/index.less';

@divider-color: rgba(231, 231, 231, 1);
@divider-content-color: rgba(0, 0, 0, 0.4);

@divider-content-font-size: 24rpx;
@divider-content-line-height: 40rpx;

page {
--td-divider-color: @divider-color;
--td-divider-content-color: @divider-content-color;
}

.@{prefix}-divider {
&--horizontal {
display: flex;
align-items: center;
color: @divider-color;
border-color: @divider-color;
color: var(--td-divider-color);
border-color: var(--td-divider-color);
border-style: solid;
border-width: 0;
margin-top: 20rpx;
Expand All @@ -27,15 +35,19 @@
&::before {
content: '';
}

.@{prefix}-divider__content:not(:empty) {
margin: 0 @spacer * 1.5;
}
}

&--vertical {
display: flex;
flex-direction: column;
height: 1em;
margin: 0 @spacer;
color: @divider-color;
border-color: @divider-color;
color: var(--td-divider-color);
border-color: var(--td-divider-color);
border-style: solid;
border-width: 0;

Expand All @@ -62,7 +74,9 @@
}

&__content {
color: rgba(0, 0, 0, .4);
font-size: @divider-content-font-size;
line-height: @divider-content-line-height;
color: var(--td-divider-content-color);
}

// horizontal: 文本位置
Expand Down