Grid 宫格

在水平和垂直方向，将布局切分成若干等大的区块。

规则

  • 区块中的内容应该是同类元素，eg：都是图片，或者都是图标+文字。

代码演示

基本

  1. import { Grid } from 'antd-mobile';
  3. const data = Array.from(new Array(9)).map((_val, i) => ({
  4.   icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
  5.   text: `name${i}`,
  6. }));
  8. const data1 = Array.from(new Array(9)).map(() => ({
  9.   icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
  10. }));
  13. const GridExample = () => (
  14.   <div>
  15.     <div className="sub-title">Always square grid item </div>
  16.     <Grid data={data} activeStyle={false} />
  18.     <div className="sub-title">Grid item adjust accroiding to img size </div>
  19.     <Grid data={data} square={false} className="not-square-grid" />
  21.     <div className="sub-title">ColumnNum=3 </div>
  22.     <Grid data={data} columnNum={3} />
  24.     <div className="sub-title">No border</div>
  25.     <Grid data={data} hasLine={false} />
  27.     <div className="sub-title">Carousel</div>
  28.     <Grid data={data} isCarousel onClick={_el => console.log(_el)} />
  30.     <div className="sub-title">Custom content</div>
  31.     <Grid data={data1}
  32.       columnNum={3}
  33.       renderItem={dataItem => (
  34.         <div style={{ padding: '12.5px' }}>
  35.           <img src={dataItem.icon} style={{ width: '75px', height: '75px' }} alt="" />
  36.           <div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
  37.             <span>I am title..</span>
  38.           </div>
  39.         </div>
  40.       )}
  41.     />
  42.     <div className="sub-title">Custom GridCell Style</div>
  43.     <Grid data={data1} columnNum={3} itemStyle={{ height: '150px', background: 'rgba(0,0,0,.05)' }} />
  44.   </div>
  45. );
  47. ReactDOM.render(<GridExample />, mountNode);
  1. .sub-title {
  2.   color: #888;
  3.   font-size: 14px;
  4.   padding: 15px 0 9px 15px;
  5. }
  6. .not-square-grid .am-grid-icon {
  7.   width: 40px;
  8.   height: 60px;
  9. }

Grid宫格 - 图1

API

属性说明类型默认值
data传入的菜单数据Array<{icon, text}>[]
onClick点击每个菜单的回调函数(el: Object, index: number): void-
columnNum列数number4
hasLine是否有边框booleantrue
isCarousel是否跑马灯,booleanfalse
carouselMaxRow如果是跑马灯, 一页跑马灯需要展示的行数number2
renderItem自定义每个 grid 条目的创建函数(el, index) => React.Node-
square每个格子是否固定为正方形booleantrue
activeStyle点击反馈的自定义样式 (设为 false 时表示禁止点击反馈){}/false{}
activeClassName点击反馈的自定义类名string
itemStyle每个格子自定义样式object{}

isCarousel = true 模式时，还可以传递 carousel 相关的 API。