abc-squard-card

0.0.2 • Public • Published

九宫格组件

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

适用范围

适合需要九宫格排版展示数据的场景,效果如下截图: 组件效果截图1

代码演示

<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示例。

Readme

Keywords

none

Package Sidebar

Install

npm i abc-squard-card

Weekly Downloads

2

Version

0.0.2

License

none

Unpacked Size

283 kB

Total Files

47

Last publish

Collaborators

  • ywwu.abcft