反应-圆滑动器
一个高度自定义的圆形滑块 零依赖关系检查 现场演示来啊!
类型脚本支持
本构成部分包括: 类型脚本 用于组件道具、指针、指针位置和梯度停止.
JavaScript用户:无忧 - 已公布的输出为平版JavaScript,和以前一样工作.
安装
npm install @fseehawer/react-circular-slider
示例
import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';
const App = () => (
<CircularSlider onChange={(value) => console.log(value)} />
);
export default App;
配置示例
见 现场演示 包括标签、颜色、自定义数据、指针内容、多站梯度和弧度表.
配置说明
- 使用
data用于自定义标签或非线性步骤; 使用min财务报告和审定财务报表max用于包含数字范围. - 使用
dataIndex选择选中的项目data,以及value仅在按度控制滑动器时. - 使用
ariaLabel当可见时label缩写、隐藏或不足以描述辅助技术. - 使用
arcStart财务报告和审定财务报表arcEnd用于平面滑动器。 添加trackDraggable当用户能够点击或拖动音轨时. - 在弧模式下,梯度停止运行
arcStart改为arcEnd,使测量颜色按数值顺序排列.
道具
下表列出了所有可用的道具及其TypeScript类型,默认值和描述.
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
width | number | 280 | 以像素表示的滑轮宽度 . |
direction | 1 | -1 | 1 | 旋转方向 : 1 为顺时针, -1 逆时针. |
min | number | 0 | 最低价值. |
max | number | 360 | 最大值 . |
initialValue | number | 0 | 标签的初始值 . |
value | number | undefined | 以度计的控制值 . |
data | (string | number)[] | [] | 数组或标签,均匀分布在滑块上. |
dataIndex | number | 0 | 数据阵列中的初始或可控索引位置. |
knobColor | string | "#4e63ea" | No所取之色. |
knobSize | number | 36 | 以像素表示的旋钮的相径. |
hideKnob | boolean | false | 若为 true把手藏起来了. |
hideKnobRing | boolean | false | 若为 true,半透明环绕着拐子被隐藏. |
knobDraggable | boolean | true | 若为 true把手可以拖动. |
knobPosition | string | number | "top" | 开始位置: 接受 "top", (中文(简体) ), "right", (中文(简体) ), "bottom", (中文(简体) ), "left" 或角度(以度计). |
label | string | "ANGLE" | 幻灯片上显示的文本标签. |
ariaLabel | string | undefined | 滑动控件的可访问标签 。 倒计时 label。 。 。 . |
labelColor | string | "#272b77" | 标签和值文本的颜色 . |
labelBottom | boolean | false | 若为 true,标签位于滑动器下方. |
labelFontSize | string | "1rem" | 标签的字体大小 . |
valueFontSize | string | "3rem" | 显示值的字体大小 . |
appendToValue | string | "" | 附于值后的案文. |
prependToValue | string | "" | 文本准备到值 . |
renderLabelValue | React.ReactNode | null | 自定义 JSX 渲染标签和值 . |
verticalOffset | string | "1.5rem" | 标签/值显示的垂直偏移 . |
hideLabelValue | boolean | false | 若为 true,标签和值都被隐藏. |
progressColorFrom | string | "#80C3F3" | 启动进度梯度的颜色 . |
progressColorTo | string | "#4990E2" | 进度梯度的结束颜色. |
progressSize | number | 8 | 进展轨道的厚度. |
progressLineCap | "round" | "butt" | "round" | 进度音轨的 Cap 样式 . |
useMouseAdditionalToTouch | boolean | false | 若为 true,也可以在可触摸设备上监听鼠标输入. |
trackColor | string | "#DDDEFB" | 背景音轨的颜色 . |
trackSize | number | 8 | 背景音轨的厚度. |
trackDraggable | boolean | false | 若为 true,单击或拖曳背景音轨更新值. |
progressGradient | (string | GradientStop)[] | undefined | 多站进度梯度的颜色组合停止 。 覆盖 progressColorFrom编号 :To。每个站点可以是颜色字符串或 { offset, stopColor, stopOpacity }。 。 。 . |
trackGradient | (string | GradientStop)[] | undefined | 多站跑道梯度的颜色组合停止 。 覆盖 trackColor。 。 。 . |
arcStart | number | undefined | 弧形模式的起始角度(以度为单位). 使用方式 arcEnd 以创建部分圆圈测量仪(例如:. 225 以左为下. |
arcEnd | number | undefined | 弧形模式的端角(以度计). 使用方式 arcStart (例如:. 135 右下角=270°速度计扫描). |
children | React.ReactNode | undefined | 自定义旋钮内容 . |
limitDragRange | boolean | false | 若为 true,夹住将移动拖入已配置的数据区域. |
onChange | (value: string | number) => void | () => {} | 当值变化时调用回调 . |
isDragging | (dragging: boolean) => void | () => {} | 回拨以显示滑动器是否被拖动 . |