Extension SDK for PanelsElectrical Product SDKElectrical Component LibraryShuffling List

Shuffling List

Last Updated on : 2021-12-22 09:34:52

ShuffingList

The shuffling list component ShuffingList is used to show a tab bar that users can swipe to switch between tabs.

Preview

Properties

Field name	Data type	Description	Default value
data	Array	A collection of data.	[]
themeColor	String	The theme color.	‘#00CC99’
contentWidth	Number	The width of content.	290
marginRight	Number	The right margin.	10
itemWidth	Number	The width of a sub-element.	90
numberOfLines	Number	The maximum number of lines.	1
itemStyle	Style	The style of a sub-element.	{}
onIndexChange	Func	The callback of the switching result.	(selectIdx: number) => void

Example

import React from 'react'
import { ShuffingList } from '@tuya/tuya-panel-electrician-sdk'

export default class Scene extends Component { 
  render() { 
    return     (
     <ShuffingList
      data={[
        { key: 'switch1', title: 'switch1', code: 'switch_1' },
        { key: 'switch2', title: 'switch2', code: 'switch_2' },
        { key: 'switch3', title: 'switch3', code: 'switch_3' },
        { key: 'switch4', title: 'switch4', code: 'switch_4' },
      ]}
      themeColor="#341234"
      contentWidth={290}
      itemWidth={85}
      marginRight={10}
      numberOfLines={1}
      onIndexChange={() => {}}
    /> )
  } 
}

Prev DocAnimated Layout Background

Next DocSocket View