ResponsiveGrid Demos

栅格布局，使用display: grid，1.19.0+ 添加本组件，目前不支持IE。

如何使用 #

PC first，其他屏幕支持自适应，因此默认情况下 device 处于 desktop 模式，此时 columns 为12列；
更改 device 参数为 tablet 后 columns 为8列；
更改 device 参数为 phone 后 columns 为4列，同时 Cell会根据内置规则进行自适应调配。

FAQ #

为何嵌套自定义组件，间距没有生效？ #

自定义组件的间距是 ResponsiveGrid 算出来，同style透传给子组件的，因此子组件需要至少透传style属性；

// wrong
function Foo() {
    return <div />;
}

// correct
function Foo({ style }) {
    return <div style={style} />;
}

代码演示 #

基本 #

简单的栅格布局展示，Fusion Next推荐以PC为主要开发场景，自适配平板、手机端。默认使用12栅格布局。

只需进行如下设置，页面内容就可以根据自适应，遵循 12-8-4 设计原则。

将子元素按顺序排布；
指定子元素所占的比例（默认为1，即1/12）；
并配合屏幕大小（或ua信息）的改变设置device。

import React from 'react';
import ReactDOM from 'react-dom';
import { ResponsiveGrid, Radio } from '@alifd/next';
const { Cell } = ResponsiveGrid;
const ds = ['desktop', 'tablet', 'phone'];
class Demo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      device: 'desktop',
    };
    this.onChange = device => {
      this.setState({
        device,
      });
    };
  }
  render() {
    const { device } = this.state;
    return (
      <div className="list">
        <Radio.Group
          shape="button"
          onChange={this.onChange}
          dataSource={ds}
          defaultValue="desktop"
        />
        <br />
        <br />
        <div className={`list-item ${device}`}>
          <ResponsiveGrid gap={10} device={device}>
            <Cell className="mygrid grid-12" colSpan={12}>
              12
            </Cell>
            <Cell className="mygrid grid-6" colSpan={6}>
              6
            </Cell>
            <Cell className="mygrid grid-6" colSpan={6}>
              6
            </Cell>
            <Cell className="mygrid grid-4" colSpan={4}>
              4
            </Cell>
            <Cell className="mygrid grid-4" colSpan={4}>
              4
            </Cell>
            <Cell className="mygrid grid-4" colSpan={4}>
              4
            </Cell>
            <Cell className="mygrid grid-3" colSpan={3}>
              3
            </Cell>
            <Cell className="mygrid grid-3" colSpan={3}>
              3
            </Cell>
            <Cell className="mygrid grid-3" colSpan={3}>
              3
            </Cell>
            <Cell className="mygrid grid-3" colSpan={3}>
              3
            </Cell>
          </ResponsiveGrid>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

API #

ResponsiveGrid #

参数	说明	类型	默认值
device	设备，用来做自适应，默认为 PC	'phone' \| 'tablet' \| 'desktop'	'desktop'
columns	分为几列，默认是 12 列	number \| string	'12'
gap	每个 cell 之间的间距， [bottom&top, right&left]	Spacing	-
component	设置标签类型	keyof React.JSX.IntrinsicElements	'div'
dense	是否开启紧密模式，开启后尽可能能紧密填满，尽量不出现空格	boolean	'false'

ResponsiveGrid.Cell #

参数	说明	类型	默认值
colSpan	横向，占据几列	\| number \| { desktop?: number; tablet?: number; phone?: number; }	-
rowSpan	纵向，占据几行	number	-
component	设置标签类型	keyof React.JSX.IntrinsicElements	'div'