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

docs: divider代码演示 #608

Merged
merged 4 commits into from
Jul 22, 2022
Merged

docs: divider代码演示 #608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c953535
docs: divider代码演示
Jul 13, 2022
802258d
docs: 优化代码显示
Jul 14, 2022
5d9a2e1
Merge branch 'develop' into docs/divider/demo
Jul 19, 2022
25a2229
docs(Divider): 更新代码示例
Jul 19, 2022
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
33 changes: 5 additions & 28 deletions src/divider/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,38 +23,15 @@ isComponent: true

<img src="https://tdesign.gtimg.com/miniprogram/readme/divider.png" width="375px" height="50%">

```html
<!-- 直线拉通 -->
<t-divider></t-divider>
{{ base }}

<!-- 虚线拉通 -->
<t-divider dashed></t-divider>
### 文字 + 直线

<!-- 左右间距 -->
<t-divider t-class="demo-1"></t-divider>
{{ text-line }}

<!-- 自定义左侧间距 -->
<t-divider t-class="demo-2"></t-divider>
### 纯文字 + 分割

<!-- 文字+直线 -->
<t-divider t-class="demo-1" t-class-content="t-class-content">
<text slot="content">文字信息</text>
</t-divider>

<!-- 纯文字 -->
<t-divider lineColor="transparent">
<text slot="content">没有更多了~</text>
</t-divider>

<!-- 垂直分割 -->
<view class="demo-3">
<text class="demo-3--text-color">文字信息</text>
<t-divider layout="vertical"></t-divider>
<text class="demo-3--text-color">文字信息</text>
<t-divider layout="vertical"></t-divider>
<text class="demo-3--text-color">文字信息</text>
</view>
```
{{ text-only }}

## API

Expand Down
Empty file added src/divider/_example/base/index.js
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions src/divider/_example/base/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"component": true
}
14 changes: 14 additions & 0 deletions src/divider/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<view>直线拉通</view>
<t-divider></t-divider>

<view>虚线拉通</view>
<t-divider dashed></t-divider>

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

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

<view>自定义左侧间距</view>
<t-divider t-class="demo-4"></t-divider>
11 changes: 11 additions & 0 deletions src/divider/_example/base/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.demo-2 {
margin: 0 32rpx;
}

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

.demo-4 {
margin-left: 152rpx;
}
5 changes: 4 additions & 1 deletion src/divider/_example/divider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"navigationBarTitleText": "Divider",
"navigationBarBackgroundColor": "#fff",
"usingComponents": {
"t-demo": "../../components/demo-block/index"
"t-demo": "../../components/demo-block/index",
"base": "./base",
"text-line": "./text-line",
"text-only": "./text-only"
}
}
7 changes: 1 addition & 6 deletions src/divider/_example/divider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
Page({
/**
* 页面的初始数据
*/
data: {},
});
Page({});
66 changes: 3 additions & 63 deletions src/divider/_example/divider.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,9 @@
<view class="demo-desc">用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。</view>
<t-demo title="01 类型" desc="分割符主要是由直线和文字组成">
<view class="t-divider-list">
<view class="demo-block">
<view class="demo-block__desc">直线拉通</view>
<view class="demo-block__wrapper">
<t-divider />
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">虚线拉通</view>
<view class="demo-block__wrapper">
<t-divider dashed />
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">左右间距</view>
<view class="demo-block__wrapper">
<t-divider t-class="demo-2" />
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">右侧拉通</view>
<view class="demo-block__wrapper">
<t-divider t-class="demo-3" />
</view>
</view>

<view class="demo-block">
<view class="demo-block__desc">自定义左侧间距</view>
<view class="demo-block__wrapper">
<t-divider t-class="demo-4" />
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">文字+直线</view>
<view class="demo-block__wrapper">
<t-divider t-class="demo-5" t-class-content="t-class-content">
<text slot="content">文字信息</text>
</t-divider>
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">文字+虚线</view>
<view class="demo-block__wrapper">
<t-divider t-class="demo-5" t-class-content="t-class-content" dashed content="文字信息" />
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">纯文字</view>
<view class="demo-block__wrapper">
<t-divider lineColor="transparent">
<text slot="content">没有更多了~</text>
</t-divider>
</view>
</view>
<view class="demo-block">
<view class="demo-block__desc">垂直分割</view>
<view class="demo-6">
<text class="demo-6--text-color">文字信息</text>
<t-divider layout="vertical" />
<text class="demo-6--text-color">文字信息</text>
<t-divider layout="vertical" />
<text class="demo-6--text-color">文字信息</text>
</view>
</view>
<base />
<text-line />
<text />
</view>
</t-demo>
</view>
Empty file added src/divider/_example/text-line/index.js
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions src/divider/_example/text-line/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"component": true
}
7 changes: 7 additions & 0 deletions src/divider/_example/text-line/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<view>文字+直线</view>
<t-divider t-class="demo-5" t-class-content="t-class-content">
<text>文字信息</text>
</t-divider>

<view>文字+虚线</view>
<t-divider t-class="demo-5" t-class-content="t-class-content" dashed content="文字信息" />
7 changes: 7 additions & 0 deletions src/divider/_example/text-line/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.demo-5 {
margin: 0 32rpx;
}
.t-class-content {
margin-right: 20rpx;
margin-left: 20rpx;
}
Empty file added src/divider/_example/text-only/index.js
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions src/divider/_example/text-only/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"component": true
}
13 changes: 13 additions & 0 deletions src/divider/_example/text-only/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<view>纯文字</view>
<t-divider lineColor="transparent">
<text>没有更多了~</text>
</t-divider>

<view>垂直分割</view>
<view class="demo-6">
<text class="demo-6--text-color">文字信息</text>
<t-divider layout="vertical" />
<text class="demo-6--text-color">文字信息</text>
<t-divider layout="vertical" />
<text class="demo-6--text-color">文字信息</text>
</view>
12 changes: 12 additions & 0 deletions src/divider/_example/text-only/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.demo-6 {
display: flex;
height: 20px;
line-height: center;
align-items: center;
margin: 0 32rpx;
font-size: 12px;
}
.demo-6--text-color {
color: #000;
opacity: 0.4;
}