Grid 九宫格

定义／Definition

卡片可以控制和组织信息，通常是更复杂或详细信息的切入点。

规则 / Rule

九宫格内文本最长不超过五个字符。

代码演示

基本

  1. import { Grid } from 'antd-mobile';
  3. let data1 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. let GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid data={data1} />
  51.     </div>);
  52.   },
  53. });
  55. ReactDOM.render(<GridExample />, mountNode);

没有边线

  1. import { Grid } from 'antd-mobile';
  3. let data2 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. let GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid
  51.         data={data2}
  52.         hasLine={false}
  53.       />
  54.     </div>);
  55.   },
  56. });
  58. ReactDOM.render(<GridExample />, mountNode);

走马灯有边线

  1. import { Grid } from 'antd-mobile';
  3. let data3 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. let GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid
  51.         data={data3}
  52.         isCarousel
  53.         onClick={(el, index) => { alert(index); }}
  54.         needActive={false}
  55.       />
  56.     </div>);
  57.   },
  58. });
  60. ReactDOM.render(<GridExample />, mountNode);

走马灯没有边线

  1. import { Grid } from 'antd-mobile';
  3. let data4 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. let GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid
  51.         data={data4}
  52.         hasLine={false}
  53.         isCarousel
  54.       />
  55.     </div>);
  56.   },
  57. });
  59. ReactDOM.render(<GridExample />, mountNode);

Grid九宫格 - 图1

API

Grid

成员说明类型可选值默认值
data传入的菜单数据Array,每个元素必须包含icon,和text两个key[]
onClick点击每个菜单的回调Function(el, index)
hasLine是否有边框bolleantrue
isCarousel是否跑马灯,bolleanfalse