WidthProvider(Responsive) 响应式布局

  1. import { WidthProvider, Responsive } from 'react-grid-layout';
  2. import 'react-grid-layout/css/styles.css';
  3. import 'react-resizable/css/styles.css';
  5. const GridLayout = WidthProvider(Responsive);
  7. const layout = [
  8.     { i: 'a', x: 0, y: 0, w: 4, h: 1, minW: 3 },
  9.     { i: 'b', x: 4, y: 0, w: 4, h: 1, minW: 3, maxW: 4 },
  10.     { i: 'c', x: 8, y: 0, w: 4, h: 1, minW: 3 },
  11.     { i: 'd', x: 0, y: 1, w: 4, h: 1, minW: 3 },
  12.     { i: 'e', x: 4, y: 1, w: 4, h: 1, minW: 3 },
  13.   ];
  16. function ReactGridLayout() {
  17.   return (
  18.     <GridLayout
  19.       className='__react-grid-layout__'
  20.       // 响应式布局断点
  21.       layouts={{ lg: layout, md: layout, sm: layout }}
  22.       cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
  23.       rowHeight={80}
  24.       margin={[24, 24]}
  25.       containerPadding={[0, 0]}
  26.       resizeHandles={['ne', 'se']}
  27.     >
  28.       <div key='a'>a</div>
  29.       <div key='b'>b</div>
  30.       <div key='c'>c</div>
  31.       <div key='d'>d</div>
  32.       <div key='e'>e</div>
  33.     </GridLayout>
  34.   )
  35. }
  37. export default ReactGridLayout;

GridLayout

默认需要设置 width，设置固定的宽度，
如果需要响应式，需要用 WidthProvider(Responsive)
image.png

  1. import GridLayout, { WidthProvider } from 'react-grid-layout';
  2. import 'react-grid-layout/css/styles.css';
  3. import 'react-resizable/css/styles.css';
  5. const layout = [
  6.     { i: 'a', x: 0, y: 0, w: 4, h: 3, minW: 3 },
  7.     { i: 'b', x: 4, y: 0, w: 4, h: 3, minW: 3, maxW: 4 },
  8.     { i: 'c', x: 8, y: 0, w: 4, h: 3, minW: 3 },
  9.     { i: 'd', x: 0, y: 1, w: 4, h: 3, minW: 3 },
  10.     { i: 'e', x: 4, y: 1, w: 4, h: 3, minW: 3 },
  11.   ];
  14. function ReactGridLayout() {
  15.   return (
  16.     <GridLayout
  17.         className='__react-grid-layout__'
  18.         layout={layout}
  19.         cols={12}
  20.         rowHeight={80}
  21.         width={1200}
  22.         margin={[24, 24]}
  23.         containerPadding={[0, 0]}
  24.           resizeHandles={['ne', 'se']}
  25.       >
  26.         <div key='a'>a</div>
  27.         <div key='b'>b</div>
  28.         <div key='c'>c</div>
  29.         <div key='d'>d</div>
  30.         <div key='e'>e</div>
  31.       </GridLayout>
  32.   )
  33. }
  35. export default ReactGridLayout;
  • rowHeight，组件的行高
  • onLayoutChange：响应式布局中的组件发生拖拽或者放大缩小时触发该函数

layout 参数

  • i，组件的 key，必须是 string
  • x，组件在 X轴的坐标
  • y，组件在 Y轴的坐标
  • w，width，组件宽度，占多少列
  • h，height，组件高度，= 几倍的 rowHeight，2就是 2 * rowHeight
  • minW，最小宽度
  • minH，最小高度

显示 3栏的 layout布局，需要动态计算 x，y的值

  1. const layout = {
  2.   i: String(it.id), // 组件key值
  3.   x: (index % 3) * 4, // 组件在x轴坐标
  4.   y: Math.floor(index / 3), // 向下取整
  5.   w: 4, // 组件宽度，占多少列
  6.   h: 3, // 组件高度
  7.   minW: 3, // 最小宽度
  8.   minH: 2,
  9.   rowHeight: 80,
  10. }

X，横向显示3栏，就 %3，显示4栏，就 %4
Y，竖向换行显示，
Ximage.png Yimage.png

react-grid-layout.less

  1. .__react-grid-layout__ {
  2.   .react-grid-item {
  3.     padding: 8px;
  4.     background-color: rgba(218, 237, 255, 0.3);
  5.     text-align: center;
  6.     font-size: 24px;
  7.     box-sizing: border-box;
  8.   }
  9. }

拖拽的高度

每次拖拽的高度为 初始设置的 rowHeight的倍数
image.png