react-grid-layout 使用说明

在前端工作中,经常遇到自定义dashboard页这样的需求。其中,dashboard页可以理解为一个自定义面板,用户可以在面板上自由的拖拽,新增,删除组件。组件可以是各种echarts图形,也可是各种数据表格。通过各个组件的拖拽组合,从而让用户自定义需要的dashboard页。

react-grid-layout

一个支持自由拖拽的布局组件
react-grid-layout 地址:https://www.npmjs.com/package/react-grid-layout

安装

yarn add react-grid-layout

在使用时需要引入必要的样式文件
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css

基础用法

import GridLayout from "react-grid-layout";

class MyResponsiveGrid extends React.Component {
  render() {
  	// 布局属性
	const layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ];
    return (
      <GridLayout
        className="layout"
        layouts={layouts}
        cols={12}
        rowHeight={30}
        width={1200}
      >
        <div key="a">1</div>
        <div key="b">2</div>
        <div key="c">3</div>
      </GridLayout>
    );
  }
}

处理上面这种在Layout组件上设置布局属性的方式,还可以直接在子元素上设置:

import GridLayout from "react-grid-layout";

class MyResponsiveGrid extends React.Component {
  render() {
    return (
      <GridLayout
        className="layout"
        cols={12}
        rowHeight={30}
        width={1200}
      >
        <div key="a" data-grid="{{x: 0, y: 0, w: 1, h: 2, static: true}}">1</div>
        <div key="b" data-grid="{{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}">2</div>
        <div key="c" data-grid="{{x: 4, y: 0, w: 1, h: 2}}">3</div>
      </GridLayout>
    );
  }
}

响应式用法

import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    )
  }
}

参数说明:

  • breakpoints ,设置分割点
  • cols ,设置相应宽度下的总格数
  • layout ,配置相应宽度下的布局

结合 WidthProvider

使用 WidthProvider 可以在初始化和窗口大小调整事件时自动确定宽度。

import { Responsive, WidthProvider } from "react-grid-layout";

const ResponsiveGridLayout = WidthProvider(Responsive);

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    var layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      >
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    );
  }
}

GridLayout Props说明

  • width,设置宽度,使用 WidthProvider 时,此属性将失效。
  • autoResize,为true时,容器的高度会自适应内容的高度
  • cols,布局列数
  • draggableCancel,取消拖动时被拖动项的类选择器的名称
  • draggableHandle,拖动时被拖动项的类选择器的名称
  • compactType,紧凑排列类型
  • layout,布局
  • margin,项与项之间的间距,单位是px
  • containerPadding,项的内边距
  • rowHeight,行高(项的默认高度,设置拖拽设置项的高度时,高度会是这个的倍数)
  • droppingItem,放置元素的配置(放置元素即是当你拖动某一项时出现的虚拟元素)
  • isDraggable,是否可拖拽
  • isResizable,是否可重置大小
  • isBounded,是否设置边界
  • useCSSTransforms,是否使用CSS 3 的translate() 来代替 position left/top(可加快渲染速度)
  • transformScale,若ResponsiveReactGridLayout 或者 ReactGridLayout的父组件具有"transform: scale(n)"这一css属性,应该设置这一比例系数以避免拖拽时出现“伪影”
  • allowOverlap
  • preventCollision,为真时,项在拖动时不会变更位置
  • isDroppable,为真时,设置了draggable={true}属性的项可以被放置入其他项
  • resizeHandles,设置重置大小的图标出现的位置,默认是在右下角
  • resizeHandle,自定义重置大小组件(即默认出现在右下角的那个小图标,可自定义)
  • onLayoutChange,布局发生变化的回调函数
  • onDragStart,某一项开始拖动的回调函数
  • onDrag,某一项拖动中的回调函数
  • onDragStop,某一项停止拖动的回调函数
  • onResizeStart,某一项开始重置大小的回调函数
  • onResize,某一项正在重置大小中的回调函数
  • onResizeStop,某一项停止重置大小的回调函数
  • onDrop,某一项所包含的内容中被放置其他元素后的回调函数
  • onDropDragOver,某一项被拖拽到container外面时的回调

Responsive Props说明

  • breakpoints ,设置响应式布局的分割点
  • cols ,设置不同区间内的布局列数
  • margin ,项与项之间边距的设置
  • containerPadding ,项的内边距的设置
  • layouts ,布局
  • onBreakpointChange ,breakpoint发生变更时的回调函数
  • onLayoutChange ,布局发生变化的回调函数
  • onWidthChange ,container宽度发生变化的回调函数

你可能感兴趣的:(React,react.js,前端)