Skip to content

Commit f196800

Browse files
Sanqi9675Sanqi9675
committed
Deploying to main from @ hellof2e/quark-design@c636bd3 🚀
1 parent ca004d6 commit f196800

File tree

3 files changed

+328
-0
lines changed

3 files changed

+328
-0
lines changed

‎src/docs_vue/config.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,6 +527,16 @@
527527
"show": true,
528528
"desc": "上传",
529529
"author": "yhy"
530+
},
531+
{
532+
"version": "0.0.1",
533+
"name": "Slider",
534+
"sort": 1,
535+
"cName": "滑块",
536+
"type": "component",
537+
"show": true,
538+
"desc": "滑块",
539+
"author": "dushichen"
530540
}
531541
]
532542
},

‎src/docs_vue/docs/slider/doc.en-US.md‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# Slider
2+
3+
### Intro
4+
5+
Used to select a value within a given range.
6+
7+
### Install
8+
9+
```tsx
10+
import "quarkd/lib/slider";
11+
```
12+
13+
### Basic Usage
14+
15+
```html
16+
<quark-slider value="50"></quark-slider>
17+
```
18+
19+
### Dual Thumb
20+
21+
Add `range` attribute to enable dual thumb mode. Make sure `value` is an array.
22+
23+
```html
24+
<quark-slider value="[20, 60]" range></quark-slider>
25+
```
26+
27+
### Range
28+
29+
```html
30+
<quark-slider value="0" min="-50" max="50" />
31+
```
32+
33+
### Disabled
34+
35+
```html
36+
<quark-slider value="50" disabled />
37+
```
38+
39+
### Readonly
40+
41+
```html
42+
<quark-slider value="50" readonly />
43+
```
44+
45+
### Step Size
46+
47+
```html
48+
<quark-slider value="50" step="10" />
49+
```
50+
51+
### Custom Style
52+
53+
```html
54+
<quark-slider value="50" barheight="4" activecolor="#ee0a24" />
55+
```
56+
57+
### Custom Button
58+
59+
```html
60+
<quark-slider value="50">
61+
<div slot="button" class="custom-button">50</div>
62+
</quark-slider>
63+
64+
<style>
65+
.custom-button {
66+
width: 26px;
67+
color: #fff;
68+
font-size: 10px;
69+
line-height: 18px;
70+
text-align: center;
71+
background-color: #1989fa;
72+
border-radius: 100px;
73+
}
74+
</style>
75+
```
76+
77+
### Vertical
78+
79+
Set `vertical` attribute to display slider vertically. The height will be 100% of parent element.
80+
81+
```html
82+
<div style="height: 150px; display: flex;">
83+
<quark-slider value="50" vertical />
84+
<quark-slider value="[20, 60]" range vertical style="margin-left: 100px;" />
85+
</div>
86+
```
87+
88+
### Change Event
89+
90+
```html
91+
<quark-slider @change="onChange" :value="value" />
92+
```
93+
94+
```js
95+
export default {
96+
data() {
97+
return {
98+
value: 50,
99+
};
100+
},
101+
methods: {
102+
onChange({ detail }) {
103+
this.value = detail.value;
104+
},
105+
},
106+
};
107+
```
108+
109+
## API
110+
111+
### Props
112+
113+
| Attribute | Description | Type | Default |
114+
| :-----------: | :--------------------------------------------: | :--------------------------: | :-------- |
115+
| value | Current value, array format in dual thumb mode | `number \| [number, number]` | `0` |
116+
| min | Minimum | `number` | `0` |
117+
| max | Maximum | `number` | `100` |
118+
| step | Step size | `number` | `1` |
119+
| barheight | Height of bar, unit is px | `number` | `2` |
120+
| buttonsize | Button size, unit is px | `number` | `24` |
121+
| activecolor | Active color of bar | `string` | `#1989fa` |
122+
| inactivecolor | Inactive color of bar | `string` | `#e5e5e5` |
123+
| range | Whether to enable dual thumb mode | `boolean` | `false` |
124+
| reverse | Whether to reverse slider | `boolean` | `false` |
125+
| disabled | Whether to disable slider | `boolean` | `false` |
126+
| readonly | Whether to be readonly | `boolean` | `false` |
127+
| vertical | Whether to display slider vertically | `boolean` | `false` |
128+
129+
### Events
130+
131+
| Event | Description | Arguments |
132+
| :-------: | :-------------------------: | :-----------------------------------------------------------------------------------------------: |
133+
| change | Emitted when value changed | `(e: { detail: { value: number \| [number, number] } }) => void` |
134+
| dragstart | Emitted when start dragging | `(e: { detail: { event: TouchEvent \| MouseEvent } }) => void` |
135+
| dragend | Emitted when end dragging | `(e: { detail: { value: number \| [number, number], event: TouchEvent \| MouseEvent } }) => void` |
136+
137+
### Slots
138+
139+
| Name | Description |
140+
| :----------: | :-------------------------------: |
141+
| button | Custom button |
142+
| left-button | Custom left button in range mode |
143+
| right-button | Custom right button in range mode |
144+
145+
## CSS Variables
146+
147+
The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).
148+
149+
| Name | Description | Default |
150+
| ------------------------------------ | -------------------- | --------------------------- |
151+
| `--quark-slider-active-background` | Active background | `#1989fa` |
152+
| `--quark-slider-inactive-background` | Inactive background | `#e5e5e5` |
153+
| `--quark-slider-disabled-opacity` | Disabled opacity | `0.5` |
154+
| `--quark-slider-bar-height` | Bar height | `2px` |
155+
| `--quark-slider-button-width` | Button width | `24px` |
156+
| `--quark-slider-button-height` | Button height | `24px` |
157+
| `--quark-slider-button-radius` | Button border radius | `50%` |
158+
| `--quark-slider-button-background` | Button background | `#fff` |
159+
| `--quark-slider-button-shadow` | Button shadow | `0 1px 2px rgba(0,0,0,0.5)` |

‎src/docs_vue/docs/slider/doc.zh-CN.md‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# Slider 滑块
2+
3+
### 介绍
4+
5+
滑动输入条，用于在给定的范围内选择一个值。
6+
7+
### 安装使用
8+
9+
```tsx
10+
import "quarkd/lib/slider";
11+
```
12+
13+
### 基础用法
14+
15+
```html
16+
<quark-slider value="50"></quark-slider>
17+
```
18+
19+
### 双滑块
20+
21+
添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。
22+
23+
```html
24+
<quark-slider value="[20, 60]" range></quark-slider>
25+
```
26+
27+
### 指定选择范围
28+
29+
```html
30+
<quark-slider value="0" min="-50" max="50" />
31+
```
32+
33+
### 禁用状态
34+
35+
```html
36+
<quark-slider value="50" disabled />
37+
```
38+
39+
### 只读状态
40+
41+
```html
42+
<quark-slider value="50" readonly />
43+
```
44+
45+
### 指定步长
46+
47+
```html
48+
<quark-slider value="50" step="10" />
49+
```
50+
51+
### 自定义样式
52+
53+
```html
54+
<quark-slider value="50" barheight="4" activecolor="#ee0a24" />
55+
```
56+
57+
### 自定义按钮
58+
59+
```html
60+
<quark-slider value="50">
61+
<div slot="button" class="custom-button">50</div>
62+
</quark-slider>
63+
64+
<style>
65+
.custom-button {
66+
width: 26px;
67+
color: #fff;
68+
font-size: 10px;
69+
line-height: 18px;
70+
text-align: center;
71+
background-color: #1989fa;
72+
border-radius: 100px;
73+
}
74+
</style>
75+
```
76+
77+
### 垂直方向
78+
79+
设置 `vertical` 属性后，滑块会垂直展示，且高度为 100% 父元素高度。
80+
81+
```html
82+
<div style="height: 150px; display: flex;">
83+
<quark-slider value="50" vertical />
84+
<quark-slider value="[20, 60]" range vertical style="margin-left: 100px;" />
85+
</div>
86+
```
87+
88+
### 变更回调
89+
90+
```html
91+
<quark-slider @change="onChange" :value="value" />
92+
```
93+
94+
```js
95+
export default {
96+
data() {
97+
return {
98+
value: 50,
99+
};
100+
},
101+
methods: {
102+
onChange({ detail }) {
103+
this.value = detail.value;
104+
},
105+
},
106+
};
107+
```
108+
109+
## API
110+
111+
### Props
112+
113+
| 参数 | 说明 | 类型 | 默认值 |
114+
| :-----------: | :----------------------------------------: | :--------------------------: | :-------- |
115+
| value | 当前进度百分比，在双滑块模式下为数组格式 | `number \| [number, number]` | `0` |
116+
| min | 最小值 | `number` | `0` |
117+
| max | 最大值 | `number` | `100` |
118+
| step | 步长 | `number` | `1` |
119+
| barheight | 进度条高度，单位为 px | `number` | `2` |
120+
| buttonsize | 滑块按钮大小，单位为 px | `number` | `24` |
121+
| activecolor | 进度条激活态颜色 | `string` | `#1989fa` |
122+
| inactivecolor | 进度条非激活态颜色 | `string` | `#e5e5e5` |
123+
| range | 是否开启双滑块模式 | `boolean` | `false` |
124+
| reverse | 是否将进度条反转 | `boolean` | `false` |
125+
| disabled | 是否禁用滑块 | `boolean` | `false` |
126+
| readonly | 是否为只读状态，只读状态下无法修改滑块的值 | `boolean` | `false` |
127+
| vertical | 是否垂直展示 | `boolean` | `false` |
128+
129+
### Events
130+
131+
| 事件名 | 说明 | 类型 |
132+
| :-------: | :----------------------: | :-----------------------------------------------------------------------------------------------: |
133+
| change | 当绑定值变化时触发的事件 | `(e: { detail: { value: number \| [number, number] } }) => void` |
134+
| dragstart | 开始拖动时触发 | `(e: { detail: { event: TouchEvent \| MouseEvent } }) => void` |
135+
| dragend | 结束拖动时触发 | `(e: { detail: { value: number \| [number, number], event: TouchEvent \| MouseEvent } }) => void` |
136+
137+
### Slots
138+
139+
| 名称 | 说明 |
140+
| :----------: | :--------------------------------: |
141+
| button | 自定义滑块按钮 |
142+
| left-button | 自定义左侧滑块按钮（双滑块模式下） |
143+
| right-button | 自定义右侧滑块按钮（双滑块模式下） |
144+
145+
## 样式变量
146+
147+
组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。
148+
149+
| 名称 | 说明 | 默认值 |
150+
| ------------------------------------ | -------------- | --------------------------- |
151+
| `--quark-slider-active-background` | 激活态背景色 | `#1989fa` |
152+
| `--quark-slider-inactive-background` | 非激活态背景色 | `#e5e5e5` |
153+
| `--quark-slider-disabled-opacity` | 禁用态透明度 | `0.5` |
154+
| `--quark-slider-bar-height` | 进度条高度 | `2px` |
155+
| `--quark-slider-button-width` | 按钮宽度 | `24px` |
156+
| `--quark-slider-button-height` | 按钮高度 | `24px` |
157+
| `--quark-slider-button-radius` | 按钮圆角 | `50%` |
158+
| `--quark-slider-button-background` | 按钮背景色 | `#fff` |
159+
| `--quark-slider-button-shadow` | 按钮阴影 | `0 1px 2px rgba(0,0,0,0.5)` |

0 commit comments

Comments
 (0)