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(slider): update code sample #671

Merged
merged 2 commits into from
Aug 1, 2022
Merged

docs(slider): update code sample #671

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
edd5d6e
docs(slider): update code sample
anlyyao Jul 27, 2022
100e432
docs(slider): update demo
anlyyao Aug 1, 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
28 changes: 23 additions & 5 deletions src/slider/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,31 @@ isComponent: true

## 代码演示

### 带数值滑动的选择器

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

```html
<t-slider value="{{value}}" label="${value}%" bind:change="valueChange"></t-slider>
```
### 基础滑动选择器

{{ base }}

### 带数值滑动选择器

{{ label }}

### 起始非零滑动选择器

{{ max }}

### 带刻度滑动选择器

{{ step }}

### 区间滑动选择器

{{ range }}

### 有标题滑动选择器

{{ title }}

## API
### Slider Props
Expand Down
10 changes: 10 additions & 0 deletions src/slider/_example/base/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
Component({
properties: {
LeeJim marked this conversation as resolved.
Show resolved Hide resolved
disabled: Boolean,
disabledColor: Array,
},
data: {
/** 滑动条的颜色 */
colors: ['#0052D9', '#E7E7E7'],
},
});
6 changes: 6 additions & 0 deletions src/slider/_example/base/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-slider": "tdesign-miniprogram/slider/slider"
}
}
1 change: 1 addition & 0 deletions src/slider/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<t-slider defaultValue="60" colors="{{colors}}" disabled="{{disabled}}" disabledColor="{{disabledColor}}" />
Empty file added src/slider/_example/base/index.wxss
View file
Open in desktop
Empty file.
19 changes: 19 additions & 0 deletions src/slider/_example/label/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Component({
properties: {
disabled: Boolean,
disabledColor: Array,
},
data: {
value: 50,
/** 滑动条的颜色 */
colors: ['#0052D9', '#E7E7E7'],
},

methods: {
handleChange(e) {
this.setData({
value: e.detail.value,
});
},
},
});
6 changes: 6 additions & 0 deletions src/slider/_example/label/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-slider": "tdesign-miniprogram/slider/slider"
}
}
8 changes: 8 additions & 0 deletions src/slider/_example/label/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<t-slider
value="{{value}}"
label="${value}"
colors="{{colors}}"
disabled="{{disabled}}"
disabledColor="{{disabledColor}}"
bind:change="handleChange"
></t-slider>
Empty file added src/slider/_example/label/index.wxss
View file
Open in desktop
Empty file.
10 changes: 10 additions & 0 deletions src/slider/_example/max/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
Component({
properties: {
disabled: Boolean,
disabledColor: Array,
},
data: {
/** 滑动条的颜色 */
colors: ['#0052D9', '#E7E7E7'],
},
});
6 changes: 6 additions & 0 deletions src/slider/_example/max/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-slider": "tdesign-miniprogram/slider/slider"
}
}
9 changes: 9 additions & 0 deletions src/slider/_example/max/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<t-slider
defaultValue="30"
min="{{30}}"
max="{{200}}"
label
colors="{{colors}}"
disabled="{{disabled}}"
disabledColor="{{disabledColor}}"
></t-slider>
Empty file added src/slider/_example/max/index.wxss
View file
Open in desktop
Empty file.
10 changes: 10 additions & 0 deletions src/slider/_example/range/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
Component({
properties: {
disabled: Boolean,
disabledColor: Array,
},
data: {
/** 滑动条的颜色 */
colors: ['#0052D9', '#E7E7E7'],
},
});
6 changes: 6 additions & 0 deletions src/slider/_example/range/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-slider": "tdesign-miniprogram/slider/slider"
}
}
9 changes: 9 additions & 0 deletions src/slider/_example/range/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<t-slider
range
label
showExtremeValue
defaultValue="{{[30, 70]}}"
colors="{{colors}}"
disabled="{{disabled}}"
disabledColor="{{disabledColor}}"
></t-slider>
Empty file added src/slider/_example/range/index.wxss
View file
Open in desktop
Empty file.
8 changes: 7 additions & 1 deletion src/slider/_example/slider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
"navigationBarTitleText": "Slider 滑块",
"navigationBarBackgroundColor": "#fff",
"usingComponents": {
"t-demo": "../../components/demo-block/index"
"t-demo": "../../components/demo-block/index",
"base": "./base",
"labelDemo": "./label",
"max": "./max",
"step": "./step",
"range": "./range",
"title": "./title"
}
}
69 changes: 1 addition & 68 deletions src/slider/_example/slider.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,4 @@
page {
background: #fff;
padding-bottom: 100rpx;
}

.t-slider {
&-title,
&-desc {
margin: 0 32rpx;
}

&-title {
padding-top: 48rpx;
font-size: 40rpx;
font-weight: 500;
line-height: 56rpx;
}

&-desc {
color: rgba(0, 0, 0, 0.4);
margin-top: 16rpx;
font-size: 26rpx;
line-height: 36rpx;
}
}

.t-slider-wrapper {
margin-top: 40rpx;
margin-bottom: 8rpx;

&-title,
&-desc {
margin: 0 32rpx;
}

&-title {
color: rgba(0, 0, 0, 0.9);
font-size: 32rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 16rpx;
margin-top: 48rpx;
}

&-desc {
margin: 32rpx;
color: rgba(0, 0, 0, 0.4);
font-size: 24rpx;
line-height: 36rpx;
white-space: pre-line;
}

.space-container {
margin-bottom: 48rpx;
}
}

.label {
display: flex;
align-items: center;
width: 718rpx;
padding-left: 32rpx;
}

.label-class {
flex-grow: 1;
}

.t-slider__mark {
margin: 0 12rpx;
padding-bottom: 32rpx;
}
28 changes: 0 additions & 28 deletions src/slider/_example/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,6 @@
Page({
data: {
value: 40,
value1: 10,
value2: 10,
value3: 50,
valueStep: 24,
valueRange: [],
valueRange2: [],
mask1: [0, 50, 100],
mask2: {
0: '￥0',
50: '￥50',
100: '￥100',
},
mask3: {
0: '小',
50: '中',
100: '大',
},
/** 滑动条的颜色 */
colors: ['#0052D9', '#E7E7E7'],
/** 禁用状态滑动条的颜色） */
disabledColor: ['#BBD3FB', '#E7E7E7'],
},
handleChange(e) {
this.setData({
value3: e.detail.value,
});
},
handleChange2(e) {
console.log(e);
},
});
113 changes: 52 additions & 61 deletions src/slider/_example/slider.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,53 @@
<view class="t-slider-title">Slider 滑动选择器</view>
<view class="t-slider-desc">用于选择横轴上的数值、区间、档位。</view>
<t-demo title="01 类型" desc="基础滑动选择器">
<view>
<t-slider defaultValue="60" colors="{{colors}}" />
</view>
<view class="t-slider-wrapper-desc">带数值滑动选择器</view>
<view>
<t-slider value="{{value3}}" bind:change="handleChange" label="${value}" colors="{{colors}}"></t-slider>
</view>
<view class="t-slider-wrapper-desc">起始非零滑动选择器</view>
<view>
<t-slider defaultValue="30" min="{{30}}" max="{{200}}" label colors="{{colors}}"></t-slider>
</view>
<view class="t-slider-wrapper-desc">带刻度滑动选择器</view>
<view class="t-slider__mark">
<t-slider marks="{{mask3}}" step="{{50}}" defaultValue="{{50}}" bind:change="handleChange2"></t-slider>
</view>
<view class="t-slider-wrapper-desc">区间滑动选择器</view>
<t-slider range label showExtremeValue defaultValue="{{[30, 70]}}" colors="{{colors}}"></t-slider>
</t-demo>
<t-demo title="02 状态" desc="基础滑动选择器">
<view>
<t-slider disabled value="{{60}}" disabledColor="{{disabledColor}}" />
</view>
<view class="t-slider-wrapper-desc">带数值滑动选择器</view>
<view class="space-container">
<t-slider disabled value="{{50}}" label disabledColor="{{disabledColor}}"></t-slider>
</view>
<view class="t-slider-wrapper-desc">起始非零滑动选择器</view>
<view>
<t-slider disabled value="{{30}}" min="{{30}}" max="{{200}}" label disabledColor="{{disabledColor}}"></t-slider>
</view>
<view class="t-slider-wrapper-desc">带刻度滑动选择器</view>
<view class="t-slider__mark">
<t-slider disabled marks="{{mask3}}" step="{{50}}" value="{{50}}" disabledColor="{{disabledColor}}"></t-slider>
</view>
<view class="t-slider-wrapper-desc">区间滑动选择器</view>
<view class="space-container">
<t-slider
disabled
label
range
showExtremeValue
value="{{[30, 70]}}"
colors="{{['red', 'rgba(220, 220, 220, 1)']}}"
></t-slider>
</view>
</t-demo>
<t-demo title="03 规格" desc="无标题滑动选择器">
<view class="space-container">
<view>
<t-slider defaultValue="50" colors="{{colors}}" />
<view class="demo">
<view class="demo-title">Slider 滑动选择器</view>
<view class="demo-desc">用于选择横轴上的数值、区间、档位。</view>
<t-demo title="01 类型" desc="基础滑动选择器">
<base />
</t-demo>
<t-demo desc="带数值滑动选择器">
<labelDemo />
</t-demo>

<t-demo desc="起始非零滑动选择器">
<max />
</t-demo>

<t-demo desc="带刻度滑动选择器">
<view style="margin: 0 12rpx">
<step />
</view>
</view>
</t-demo>
<t-demo desc="有标题滑动选择器">
<view class="space-container label">
<view>选择器标题</view>
<t-slider class="label-class" defaultValue="50" colors="{{colors}}" />
</view>
</t-demo>
</t-demo>

<t-demo desc="区间滑动选择器">
<range />
</t-demo>

<t-demo title="02 状态" desc="基础滑动选择器">
<base disabled disabledColor="{{disabledColor}}" />
</t-demo>

<t-demo desc="带数值滑动选择器">
<labelDemo disabled disabledColor="{{disabledColor}}" />
</t-demo>

<t-demo desc="起始非零滑动选择器">
<max disabled disabledColor="{{disabledColor}}" />
</t-demo>

<t-demo desc="带刻度滑动选择器">
<view style="margin: 0 12rpx">
<step disabled disabledColor="{{disabledColor}}" />
</view>
</t-demo>

<t-demo desc="区间滑动选择器">
<range disabled disabledColor="{{disabledColor}}" />
</t-demo>

<t-demo title="03 规格" desc="无标题滑动选择器">
<base />
</t-demo>
<t-demo desc="有标题滑动选择器">
<title />
</t-demo>
</view>
Loading