简介
React-grid-layout 是一个网格布局系统，可以实现响应式的网格布局，灵活运用可以方便的实现拖拽式组件的实现
用法
基本用法
import GridLayout from 'react-grid-layout';
class MyFirstGrid extends React.Component {
render() {
// layout is an array of objects, see the demo for more complete usage
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" layout={
layout} cols={
12} rowHeight={
30} width={
1200}>
<div key="a">a</div>
<div key="b">b</div>
<div key="c">c</div>
</GridLayout>
)
}
}
上方是一个简单的用法实现，其中有a、b、c三个项，a 设置了 static: true，因此它是不可拖拽和缩放的，b 设置了 minW: 2 和 maxW: 4，因此它在拖拽时的宽度在2个单位到4个单位，而c项未做任何限制，可以自由的拖拽和缩放
直接在子项中设置
import GridLayout from 'react-grid-layout';
class MyFirstGrid 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}}>a</div>
<div key="b" data-grid={
{
x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
<div key="c" data-grid={
{
x: 4, y: 0, w: 1, h: 2}}>c</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 设置在不同分辨率的设备下，一行中横向有多少个单位的网格
自动确定宽度
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>
)
}
}
通过 WidthProvider 结合 Responsive, 在窗口调整大小时就可自动调整宽度
属性
父容器属性
- width: number
设置宽度，使用了WidthProvider时不用设置 - autoSize:
boolean
为真时，容器的高度会自适应内容的高度 - cols:
number
布局的列数 - draggableCancel:
string
取消拖动时被拖动项的类选择器的名称 - draggableHandle:
string
拖动时被拖动项的类选择器的名称 - verticalCompact:
boolean
为真时，布局在竖直方向上会紧凑排列 - compactType:
'vertical' || 'horizontal''
紧凑排列类型 - layout:
array
布局数组，每一项是一个对象，形如：{i: string, x: number, y: number, w: number, h: number}，如果子组件不设置layout，需要在子组件中设置data-grid - margin:
[number, number]
项与项之间的间距，单位是px - containerPadding:
[number, number]
项的内边距 - rowHeight:
number
行高 - droppingItem:
{ i: string, w: number, h: number }
放置元素的配置（放置元素即是当你拖动某一项时出现的虚拟元素） - isDraggable:
boolean
是否可拖拽 - isResizable:
boolean
是否可重置大小 - isBounded:
boolean
是否设置边界 - useCSSTransforms:
boolean
是否使用CSS 3 的translate() 来代替 position left/top（可加快渲染速度） - transformScale:
number
若ResponsiveReactGridLayout 或者 ReactGridLayout的父组件具有"transform: scale(n)"这一css属性，应该设置这一比例系数以避免拖拽时出现“伪影” - preventCollision:
boolean
为真时，项在拖动时不会变更位置 - isDroppable:
boolean
为真时，设置了draggable={true}属性的项可以被放置入其他项 - resizeHandles:
Array[s' , 'w' , 'e' , 'n', 'sw', 'nw', 'se', 'ne']
设置重置大小的图标出现的位置，默认是在右下角 - resizeHandle?: ReactElement | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement)
自定义重置大小组件（即默认出现在右下角的那个小图标，可自定义） - onLayoutChange: (layout: Layout) => void
布局发生变化的回调函数 - type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem, placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void
ItemCallback的类型 - onDragStart:
function
某一项开始拖动的回调函数 - onDrag:
function
某一项正在拖动中的回调函数 - onDragStop:
function
某一项停止拖动的回调函数 - onResizeStart:
function
某一项开始重置大小的回调函数 - onResize:
function
某一项正在重置大小中的回调函数 - onResizeStop:
function
某一项停止重置大小的回调函数 - onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void
某一项所包含的内容中被放置其他元素后的回调函数 - innerRef: ?React.Ref<“div”>
网格的ref
子项属性
- i:
string
组件的key - x:
number
横坐标 - y:
number
纵坐标 - w:
number
宽 - h:
number
高 - minW:
number
最小宽度 - maxW:
number
最大宽度 - minH:
number
最小高度 - maxH:
number
最大高度 - static:
boolean
为真时，项不可拖拽和缩放 - isDraggable:
boolean
是否可拖拽 - isResizable:
boolean
是否可缩放 - resizeHandles?:
Array['s' , 'w' , 'e' , 'n' , 'sw' , 'nw' , 'se', 'ne']
设置重置大小的图标出现的位置，默认是在右下角 - isBounded:
boolean
是否设置边界（若为真且该项可被拖动，则该项只能在网格边界范围内拖动