Slider 滑动选择器

更新时间:2024-06-05 03:14:34下载pdf

简介

Slider 滑动选择器,通常用于面板内部数值型功能点的选择。

代码演示

说明:详细示例参考 Demo

水平滑动选择器

import React, { Component } from "react"; import { View } from "react-native"; import { Slider } from "tuya-panel-kit"; export default class SliderHorizontalScene extends Component { state = { value: 0, }; _handleComplete = (value) => { this.setState({ value: Math.round(value) }); }; render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Slider.Horizontal style={{ width: 295 }} maximumValue={100} minimumValue={0} value={this.state.value} maximumTrackTintColor="rgba(0, 0, 0, 0.1)" minimumTrackTintColor="#4397D7" onSlidingComplete={this._handleComplete} /> </View> ); } }

垂直滑动选择器

import React, { Component } from "react"; import { View } from "react-native"; import { Slider } from "tuya-panel-kit"; export default class SliderVerticalScene extends Component { state = { value: 24, }; _handleComplete = (value) => { this.setState({ value: Math.round(value) }); }; render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Slider.Vertical style={{ height: 200 }} value={this.state.value} minimumValue={0} maximumValue={100} minimumTrackTintColor="#4A90E2" maximumTrackTintColor="#50E3C2" /> </View> ); } }

交互演示

Slider 滑动选择器

API

style

容器样式。

类型 必传
ViewPropTypes.style

horizontal

是否为水平方向。

类型 必传 默认值
boolean true

disabled

是否禁用。

类型 必传 默认值
boolean false

value

当前值。

类型 必传 默认值
number 0

minimumValue

最小值。

类型 必传 默认值
number 0

maximumValue

最大值。

类型 必传 默认值
number 1

stepValue

步长。必须可被 minimumValuemaximumValue 整除。

类型 必传 默认值
number 0

onSlidingStart

滑动开始回调。

类型 必传 默认值
(value) => void null

onValueChange

滑动值变更回调。

类型 必传 默认值
(value) => void null

onSlidingComplete

滑动结束回调。

类型 必传 默认值
(value) => void null

outerWidth

轨道宽度。

类型 必传 默认值
number null

onlyMaximumTrack

是否只显示大于当前值的轨道颜色。

类型 必传 默认值
boolean false

canTouchTrack

触摸轨道是否可以更改值。

类型 必传 默认值
boolean false

minimumTrackTintColor

小于当前值的轨道颜色。

类型 必传 默认值
Color #3f3f3f

maximumTrackTintColor

大于当前值的轨道颜色。

类型 必传 默认值
Color #b3b3b3

trackStyle

通用的轨道样式。

类型 必传
ViewPropTypes.style

renderMinimumTrack

定制渲染小于当前值的轨道。

类型 必传 默认值
() => React.element null

renderMaximumTrack

定制渲染大于当前值的轨道。

类型 必传 默认值
() => React.element null

thumbTintColor

滑块颜色。

类型 必传 默认值
Color #343434

thumbStyle

滑块样式。

类型 必传
ViewPropTypes.style

renderThumb

定制渲染滑块。

类型 必传 默认值
() => React.element null
名称 描述
Vertical 垂直的 Slider
Horizontal 水平的 Slider