abc-squard-card

九宫格组件

提供九宫格排版的信息展示，支持宽度高度等自定义，以及浅色、深色两种主题

适用范围

适合需要九宫格排版展示数据的场景，效果如下截图：

代码演示

<SquardCard width={100} height={100} data={data} title="我常看的公司"/>

   data数据示例：
      const data = [
             {"id":1, "content":<div style={{marginTop:'30px'}}><p>农业银行</p><p>0008765ZH</p></div>},
             {"id":2, "content":"测试"},
             {"id":3, "content":"测试"},
             {"id":4, "content":"测试"},
             {"id":5, "content":"测试"},
             {"id":6, "content":"测试"},
             {"id":7, "content":"测试"},
             {"id":8, "content":"测试"},
             {"id":9, "content":"测试"}
      ]

API

属性	说明	类型	默认值
title	标题，可配置	string/element
data	九宫格数据	array	[]
width	单个格子宽度	number
height	单个格子高度	number
theme	主题	string	浅色主题

备注

1、data数组中，标题：title,内容：content。可以自定义为element类型，详见demo示例。