Extension SDK for PanelsLight SDKLighting Component LibraryColor Hue and Saturation Picker

Color Hue and Saturation Picker

Last Updated on : 2021-12-16 03:30:33download

HueSaturationPicker

Preview

Properties

Field name	Type	Description	Default value
accessibilityLabel	String	The label that describes the tested accessibility element.	‘hueSaturationPicker’
bgImg	Any	The image of the hue and saturation picker.	require(‘./res/color-picker.png’)
style	Style	The style of the component.	None
thumbStyle	Style	The style of the thumb.	None
disabled	Bool	Specifies whether to disable the component.	false
hideThumb	Bool	Specifies whether to hide the thumb.	false
disalbedThumbOpacity	Number	The opacity of the thumb when the component is disabled.	0.4
radius	Number	The radius of the outer track.	135
innerRadius	Number	The radius of the inner track.	0
thumbRadius	Number	The radius of the thumb.	16
offsetAngle	Number	The offset angle in the counterclockwise direction.	0
touchThumbRadius	Number	The radius of the touchable area for the thumb.	0
touchOffset	Number	The offset of the touchable area. You can set the value to increase the touchable area.	0
value	Obj	The current value.	{ hue: 0, saturation: 1000, value: 1000 }
minSaturation	Number	The minimum saturation.	0
maxSaturation	Number	The maximum saturation.	1000
stepSaturation	Number	The step of the saturation.	1
stepHue	Number	The step of the hue.	1
onChange	Func	The value change event that is triggered only when a value is changed.	None
onGrant	Func	The event in which the thumb starts to move.	None
onMove	Func	The event in which the thumb is moving.	None
onRelease	Func	The event in which the thumb stops moving.	None
onPress	Func	The event in which the track is touched.	None

Example

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { HueSaturationPicker } from '@tuya/tuya-panel-lamp-sdk';

export default class Scene extends PureComponent {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#eee',
        }}
      >
        <HueSaturationPicker value={{ hue: 300, saturation: 800 }} />
      </View>
    );
  }
}

Prev DocColor Hue Picker

Next DocTime Picker