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 (<GridLayoutclassName="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 (<GridLayoutclassName="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 (<ResponsiveGridLayoutclassName="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-grid-layout 使用说明相关推荐

[Grid Layout] Specify a grid gutter size with grid-gap
It's beautifully straightforward to add a gutter to our grid layout. Let's apply one with grid-gap. ...
愿只有一个Grid Layout
CSS3新增布局三剑客之Grid Layout 一.前言相比较Multi-Columns Layout 和Flexible Box Layout,Grid Layuot更像是两者的结合,当然这里 ...
SAP Spartacus b2b 页面 banner 的grid layout设计
如下图所示: 每个banner里的a标签,都应用了grid layout模型: this element behaves like a block element and lays out its c ...
css高度自动填满_Unity--自动版面（Grid Layout Group）
Grid Layout Group 网格布局组组件将其子布局元素放置在网格中. Padding:(填充) 布局组边缘内的填充.与其他布局组不同,"网格布局组"将忽略其所包含布局元素 ...
Unity3d Ugui 20 Grid Layout Group Aspect Ratio Fitter
Grid Layout Group网格布局属性 Padding:布局组内边缘偏移. Cell Size:要用于组内每个布局元素的大小. Spacing:布局子元素之间的间距. Start Corne ...
grid layout网格布局详解
grid layout网格布局详解什么是grid layout grid的特点 grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位fr repeat函数 ...
html设定列的最小宽度,设置Grid Layout列最小宽度的方法
设置Grid Layout列最小宽度的方法发布时间:2020-08-29 11:22:09 来源:亿速云阅读:184 作者:小新这篇文章主要介绍设置Grid Layout列最小宽度的方法,文中介 ...
【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
css grid设置宽度,如何设置Grid Layout （网格布局）列的最小宽度
如何设置Grid Layout (网格布局)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部分中使用minmax()函数,下面我们就来看具体的内容. 我们先来看一下minmax()函数的格式m ...

react-grid-layout 使用说明

`react-grid-layout`

安装

基础用法

响应式用法

结合 `WidthProvider`

GridLayout Props说明

Responsive Props说明

react-grid-layout 使用说明相关推荐

最新文章

热门文章

react-grid-layout 使用说明

react-grid-layout

安装

基础用法

响应式用法

结合 WidthProvider

GridLayout Props说明

Responsive Props说明

react-grid-layout 使用说明相关推荐

最新文章

热门文章

`react-grid-layout`

结合 `WidthProvider`