宫格菜单组件

更新时间：2021-08-27 11:07:18下载pdf

TYIpcGrid 用于展示宫格菜单下拉滑动功能，每行菜单的个数支持动态控制。

示图展示

组件属性

字段名	类型	描述	默认值
containerStyle	ViewStyle	容器样式	1
data	Array	菜单栏数据	[]
rowNumber	number	每行展示菜单数	4
borderWidth	number	菜单的边框宽度	0.5
hoverBgcColor	string	图标 hover 背景色	‘#e5e5e5’
activeColor	string	激活颜色	‘#fc2f07’
onPress	func	开关按钮点击事件	(key: string, itemData?: any) => void;
onPressIn	func	开关按钮 pressIn 事件	(key: string, itemData?: any) => void;
onPressOut	func	开关按钮 pressOut 事件	(key: string, itemData?: any) => void;
scrollProps	Object	ScrollView 组件属性继承	{}
scrollEnabled	Boolean	是否可滑动	true
gridPaddingVertical	number	grid 图标垂直方向边距	15
gridMenuItemStyle	ViewStyle	子菜单容器样式	{}
gridTextBoxStyle	ViewStyle	菜单文本容器样式	{}
gridTextStyle	TextStyle	菜单文本样式	{}
gridImgStyle	ImageStyle	图标样式	{}

使用示例

import { TYIpcGrid } from '@tuya/tuya-panel-ipc-sdk';
...

   const gridData = [
    { 
      key: 'menu1',   // key 值，取值不得重复
      imgSource: Res.dpAntiFlicker, // 本地图片
      imgTitle: 'menu1', // 菜单文本
      disabled: true,    // 是否禁用
      hidden: false,    // 是否隐藏
    },
    {
      key: 'menu2',
      imgSource: Res.dpCruise,
      imgTitle: 'menu2',
      disabled: false,
      hidden: false,
    },
    ...
  ];
  
  <TYIpcGrid data={gridData} rowNumber={5} />

上一篇PIR 被动式红外传感器组件

下一篇电量显示