@xwink/ui

Slider

一维二维同一个组件:v-model 给数字是横向的条,给 [x, y] 是一块面。一维的行为层是 Reka 的 Slider(键盘、aria、拖动、步进吸附);二维 Reka 没有通用原语(ColorArea 只认颜色、只有矩形),自己写,键盘与提交节奏照 Reka:方向键一下一步、Shift 十步。

表单里

show-value 在右侧并排显示当前值,格式缺省按 step 的小数位,format-options 可改(百分比、单位),#value 插槽可整个换掉。step 缺省是全程的 1%。

JPEG 质量 / 百分比 / 禁用

取色器的条与面

画什么由 track(轨道的 CSS background)定:色相渐变、棋盘格垫底的透明度渐变、色盘的叠色;thumb 是圆点里的颜色。给了 track 或 thumb 的圆点是白环加深色外描,落在任何颜色上都分得开。二维的 y 轴自下而上增大(色盘的明度直接对上),尺寸由 class 定;shape="ellipse" 是椭圆容器,指针出了圆,圆点沿中心射线停在边上(色轮上就是色相不变、饱和度到头)。二维要给 value-text,读屏才念得出两个量。

色盘 / 色轮 / 色相 / 透明度

input 0 次 / commit 0 次

提交节奏

拖动中逐帧发 input,松手或按键后发一次 commit;有过 input 就一定有收尾的 commit——Reka 拖回原值时不发 valueCommit,宿主按手势合并撤销的话这一步会一直开着。外面传回的值只刷新显示。

API

Props

名称类型默认值说明
labelstring | undefinedundefined读屏名
minnumber | undefined0两个轴共用
maxnumber | undefined1—
stepnumber | undefinedundefined拖动吸附与方向键一下的步长,缺省是全程的 1%
trackstring | undefinedundefined轨道的 CSS background(色相渐变、棋盘格垫底的透明度渐变、色盘的叠色)
thumbstring | undefinedundefined圆点里填的颜色
valueTextstring | undefinedundefined读屏念的值(缺省念数字;二维一定要给)
shapeSliderShape | undefined"rect"二维的容器形状
showValueboolean | undefinedfalse一维在右侧并排显示当前值(如 JPEG 质量 0–100),格式见 `formatOptions`;`#value` 插槽可换
formatOptionsIntl.NumberFormatOptions | undefinedundefined并排数值的 `Intl.NumberFormat` 选项,缺省按 `step` 的小数位
localestring | undefinedundefined—
disabledboolean | undefinedfalse—
size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
modelValue 必填 T——

Emits

事件载荷说明
input[value: T]—
commit[value: T]—
update:modelValue[value: T]—

Slots

插槽说明
value—