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">basic usage， columnNum=3 </div>
  16.     <Grid data={data} columnNum={3} />
  18.     <div className="sub-title">basic usage， columnNum=3 </div>
  19.     <Grid data={data} />
  21.     <div className="sub-title">no border</div>
  22.     <Grid data={data} hasLine={false} />
  24.     <div className="sub-title">carousel</div>
  25.     <Grid data={data} isCarousel onClick={_el => console.log(_el)} />
  27.     <div className="sub-title">custom content</div>
  28.     <Grid data={data1}
  29.       columnNum={3}
  30.       renderItem={dataItem => (
  31.         <div style={{ padding: '0.25rem' }}>
  32.           <img src={dataItem.icon} style={{ width: '1.5rem', height: '1.5rem' }} alt="icon" />
  33.           <div style={{ color: '#888', fontSize: '0.28rem', marginTop: '0.24rem' }}>
  34.             <span>我是标题..</span>
  35.           </div>
  36.         </div>
  37.       )}
  38.     />
  39.   </div>
  40. );
  42. ReactDOM.render(<GridExample />, mountNode);
  1. .am-grid {
  2.   border: 1px solid #ddd;
  3. }
  4. .sub-title {
  5.   color: #888;
  6.   font-size: .28rem;
  7.   padding: 0.3rem 0 0.18rem 0.3rem;
  8. }

Grid宫格 - 图1

API

适用平台：WEB、React-Native
属性说明类型默认值
data传入的菜单数据Array<{icon, text}>[]
onClick点击每个菜单的回调函数(el: Object, index: number): void-
columnNum列数number4
hasLine是否有边框booleantrue
isCarousel是否跑马灯,booleanfalse
carouselMaxRow如果是跑马灯, 一页跑马灯需要展示的行数number2
renderItem自定义每个 grid 条目的创建函数(el, index) => React.Node-

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