Skip to content

Commit d066310

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

File tree

3 files changed

+300
-0
lines changed

3 files changed

+300
-0
lines changed

‎src/docs_react/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_react/docs/slider/doc-react.en-US.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# Slider
2+
3+
### Intro
4+
5+
Used to select a value within a given range.
6+
7+
### Install
8+
9+
```tsx
10+
import { Slider } from "@quarkd/quark-react";
11+
```
12+
13+
### Basic Usage
14+
15+
```html
16+
<Slider value="50"></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+
<Slider value="[20, 60]" range></Slider>
25+
```
26+
27+
### Range
28+
29+
```html
30+
<Slider value="0" min="-50" max="50" />
31+
```
32+
33+
### Disabled
34+
35+
```html
36+
<Slider value="50" disabled />
37+
```
38+
39+
### Readonly
40+
41+
```html
42+
<Slider value="50" readonly />
43+
```
44+
45+
### Step Size
46+
47+
```html
48+
<Slider value="50" step="10" />
49+
```
50+
51+
### Custom Style
52+
53+
```html
54+
<Slider value="50" barheight="4" activecolor="#ee0a24" />
55+
```
56+
57+
### Custom Button
58+
59+
```html
60+
<Slider value="50">
61+
<div slot="button" className="custom-button">50</div>
62+
</Slider>
63+
```
64+
65+
```css
66+
.custom-button {
67+
width: 26px;
68+
color: #fff;
69+
font-size: 10px;
70+
line-height: 18px;
71+
text-align: center;
72+
background-color: #1989fa;
73+
border-radius: 100px;
74+
}
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+
<Slider value="50" vertical />
84+
<Slider value="[20, 60]" range vertical style={{ marginLeft: '100px' }} />
85+
</div>
86+
```
87+
88+
### Change Event
89+
90+
```tsx
91+
export default () => {
92+
const [value, setValue] = useState(50);
93+
const handleChange = ({ detail }) => {
94+
setValue(detail.value);
95+
};
96+
return <Slider onChange={handleChange} value={value} />;
97+
};
98+
```
99+
100+
## API
101+
102+
### Props
103+
104+
| Attribute | Description | Type | Default |
105+
| :-----------: | :--------------------------------------------: | :-----------------------------------------------------------------------------------------------: | :-------- |
106+
| value | Current value, array format in dual thumb mode | `number \| [number, number]` | `0` |
107+
| min | Minimum | `number` | `0` |
108+
| max | Maximum | `number` | `100` |
109+
| step | Step size | `number` | `1` |
110+
| barheight | Height of bar, unit is px | `number` | `2` |
111+
| buttonsize | Button size, unit is px | `number` | `24` |
112+
| activecolor | Active color of bar | `string` | `#1989fa` |
113+
| inactivecolor | Inactive color of bar | `string` | `#e5e5e5` |
114+
| range | Whether to enable dual thumb mode | `boolean` | `false` |
115+
| reverse | Whether to reverse slider | `boolean` | `false` |
116+
| disabled | Whether to disable slider | `boolean` | `false` |
117+
| readonly | Whether to be readonly | `boolean` | `false` |
118+
| vertical | Whether to display slider vertically | `boolean` | `false` |
119+
| onChange | Emitted when value changed | `(e: { detail: { value: number \| [number, number] } }) => void` | |
120+
| onDragStart | Emitted when start dragging | `(e: { detail: { event: TouchEvent \| MouseEvent } }) => void` | |
121+
| onDragEnd | Emitted when end dragging | `(e: { detail: { value: number \| [number, number], event: TouchEvent \| MouseEvent } }) => void` | |
122+
123+
### Slots
124+
125+
| Name | Description |
126+
| :----------: | :-------------------------------: |
127+
| button | Custom button |
128+
| left-button | Custom left button in range mode |
129+
| right-button | Custom right button in range mode |
130+
131+
## CSS Variables
132+
133+
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).
134+
135+
| Name | Description | Default |
136+
| ------------------------------------ | -------------------- | --------------------------- |
137+
| `--quark-slider-active-background` | Active background | `#1989fa` |
138+
| `--quark-slider-inactive-background` | Inactive background | `#e5e5e5` |
139+
| `--quark-slider-disabled-opacity` | Disabled opacity | `0.5` |
140+
| `--quark-slider-bar-height` | Bar height | `2px` |
141+
| `--quark-slider-button-width` | Button width | `24px` |
142+
| `--quark-slider-button-height` | Button height | `24px` |
143+
| `--quark-slider-button-radius` | Button border radius | `50%` |
144+
| `--quark-slider-button-background` | Button background | `#fff` |
145+
| `--quark-slider-button-shadow` | Button shadow | `0 1px 2px rgba(0,0,0,0.5)` |

‎src/docs_react/docs/slider/doc-react.zh-CN.md‎

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

0 commit comments

Comments
 (0)