名稱
簡(jiǎn)介
????React-Grid-Layout 是一個(gè)網(wǎng)格布局系統(tǒng)，具有響應(yīng)性并支持?jǐn)帱c(diǎn)（breakpoints）。斷點(diǎn)布局可以由用戶提供或自動(dòng)生成。
RGL 僅支持 React，不支持 jQuery。
示圖
安裝
????使用npm安裝 React-Grid-Layout：
npm install react-grid-layout
????樣式表：
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css
基本用法
????下面的示例將生成一個(gè)包含三個(gè)項(xiàng)目的網(wǎng)格，其中：
? ? 1.????用戶將無(wú)法拖動(dòng)或調(diào)整項(xiàng)目大小 a
? ? 2.????b 將被限制為最小寬度為 2 個(gè)網(wǎng)格塊和最大寬度為 4 個(gè)網(wǎng)格塊
? ? 3.????用戶將能夠自由拖動(dòng)和調(diào)整項(xiàng)目大小 c
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>? ?
????????)?
????}
}
可以選擇直接在子項(xiàng)上設(shè)置布局屬性：
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>? ?
????????)
????}
}
響應(yīng)式用法
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>
????????)?
????}
}
計(jì)算網(wǎng)格寬度
????<ResponsiveReactGridLayout>和<ReactGridLayout>采取width來(lái)計(jì)算拖動(dòng)事件位置。在簡(jiǎn)單的情況下，WidthProvider可以使用HOC在初始化和窗口調(diào)整大小事件時(shí)自動(dòng)確定寬度。
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>? ?
????????)?
????}
}
Grid Layout Props
????// 除使用 <WidthProvider>情況外必填
? ??width: number,
????// 如果為 true，容器高度自適應(yīng)內(nèi)容
? ??autoSize: ?boolean = true,
????//布局中的列數(shù)。
? ??cols: ?number = 12,
????// 取消拖拽時(shí)的css選擇器
? ??draggableCancel: ?string = '',
????// 拖拽時(shí)的css選擇器
? ??draggableHandle: ?string = '',
????// 緊湊排列類型
? ??compactType: ?('vertical' | 'horizontal') = 'vertical';
????// 布局，格式為數(shù)組對(duì)象，例如：
????// {x: number, y: number, w: number, h: number}
????// 布局中的索引必須與每個(gè)項(xiàng)目組件上使用的鍵匹配。
????// 如果您選擇使用自定義鍵，則可以在布局中指定該鍵
????// 數(shù)組對(duì)象，如下所示：
????// {i: string, x: number, y: number, w: number, h: number}
????//如果父組件沒(méi)有設(shè)置layout，則需要在子組件設(shè)置 data-grid
? ??layout: ?array = null,
????//? [x, y] 的margin值
? ??margin: ?[number, number] = [10, 10],
????//? [x, y] 的padding值
? ??containerPadding: ?[number, number] = margin,
????// 行高，可根據(jù) breakpoints 改變
? ??rowHeight: ?number = 150,
????// 放置元素的配置。放置元素是一個(gè)從外部拖動(dòng)某個(gè)元素時(shí)會(huì)出現(xiàn)的虛擬元素。
????//? i - 元素的id
????//? w - 元素的寬
????//? h - 元素的高
? ??droppingItem?: { i: string, w: number, h: number }
????// 是否可拖拽
? ??isDraggable: ?boolean = true,
????//是否可重置大小
? ??isResizable: ?boolean = true,
????//是否可設(shè)置邊界
? ??isBounded: ?boolean = false,
????// 使用 CSS3 translate() 替換position 的top/left ，可提升大約6倍性能
? ??useCSSTransforms: ?boolean = true,
????//如果 ResponsiveReactGridLayout 或 ReactGridLayout 的父節(jié)點(diǎn)具有 "transform: scale(n)" 屬性，應(yīng)該設(shè)置縮放系數(shù)以避免拖動(dòng)時(shí)出現(xiàn)渲染偽影。
? ??transformScale: ?number = 1,
????//是否允許重疊
? ??allowOverlap: ?boolean = false,
????//如果為 true，則網(wǎng)格項(xiàng)在被拖動(dòng)時(shí)不會(huì)改變位置
? ??preventCollision: ?boolean = false,
????// 如果為true, 帶有`draggable={true}`屬性的放置元素可被放置在網(wǎng)格上
????//注意：如果使用 Firefox，應(yīng)該添加
????// `onDragStart={e => e.dataTransfer.setData('text/plain', ' ')}` 屬性
????// 連同 `draggable={true}` 否則此功能將無(wú)法正常工作。
????// Firefox 需要 onDragStart 屬性來(lái)進(jìn)行拖動(dòng)初始化
????// https://bugzilla.mozilla.org/show_bug.cgi?id=568313
? ??isDroppable: ?boolean = false,
????// 重置大小時(shí)的操作位置，默認(rèn)右下
????// 可選值：
????// 's' - South handle (bottom-center)
????// 'w' - West handle (left-center)
????// 'e' - East handle (right-center)
????// 'n' - North handle (top-center)
????// 'sw' - Southwest handle (bottom-left)
????// 'nw' - Northwest handle (top-left)
????// 'se' - Southeast handle (bottom-right)
????// 'ne' - Northeast handle (top-right)
? ??resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'],
????// 自定義重置大小圖標(biāo)
? ? ?resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>),
????// 布局變化回調(diào)
? ??onLayoutChange: (layout: Layout) => void,
????// 下面的所有回調(diào)都有簽名（layout、oldItem、newItem、placeholder、e、element）。
????// 'start' 和 'stop' 回調(diào)為 'placeholder' 傳遞 `undefined`。
? ? ?type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem, placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void,
????// 拖拽開(kāi)始回調(diào)
? ??onDragStart: ItemCallback,
????// 拖拽中回調(diào)
? ??onDrag: ItemCallback,
????// 拖拽停止回調(diào)
? ??onDragStop: ItemCallback,
????// 開(kāi)始重置大小回調(diào)
? ??onResizeStart: ItemCallback,
????// 重置大小中的回調(diào)
? ??onResize: ItemCallback,
????// 重置大小結(jié)束回調(diào)
? ??onResizeStop: ItemCallback,
????// 當(dāng)元素從外部放入網(wǎng)格時(shí)的回調(diào)。
? ??onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
????// 當(dāng)一個(gè)元素從外面拖過(guò)網(wǎng)格時(shí)調(diào)用， 此回調(diào)應(yīng)返回一個(gè)對(duì)象以動(dòng)態(tài)更改 dropItem大小
? ??onDropDragOver: (e: DragOverEvent) => ?({|w?: number, h?: number|} | false),
????// 可以使用它來(lái)代替常規(guī) ref 和已棄用的 `ReactDOM.findDOMNode()` 函數(shù)
? ??innerRef: ?React.Ref<"div">,
Responsive Grid Layout Props
????// Breakpoint名稱是任意的，但是必須在cols 和 layouts 對(duì)象中匹配。
? ??breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
????// 列數(shù)
? ??cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
????//[x,y]的margin
? ??margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
????// [x,y]的padding
? ??containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
????// 布局配置
? ??layouts: {[key: $Keys<breakpoints>]: Layout},
????// breakpoint發(fā)生變更時(shí)的回調(diào)
? ??onBreakpointChange: (newBreakpoint: string, newCols: number) => void,
????// 布局發(fā)生變更時(shí)的回調(diào)
? ??onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void,
????// 寬度改變時(shí)的回調(diào)，可以根據(jù)需要修改布局。
? ??onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void;
Grid Item Props
????{?
????????// 組件id
? ??????i: string,?
????????// 以下單位為網(wǎng)格，不是px
? ??????x: number,?
? ??????y: number,?
? ??????w: number,?
? ??????h: number,?
? ??????minW: ?number = 0,?
? ??????maxW: ?number = Infinity,?
? ??????minH: ?number = 0,?
? ??????maxH: ?number = Infinity,?
????????// 如果為 true，則等于 `isDraggable: false, isResizable: false`。
? ??????static: ?boolean = false,?
????????// 如果為 false，則不可拖動(dòng)。覆蓋 `static`.?
? ??????isDraggable: ?boolean = true,?
????????// 如果為 false，則不可重置大小。覆蓋 `static`.?
? ??????isResizable: ?boolean = true, ?
????????// 默認(rèn)情況下，調(diào)整大小圖標(biāo)僅顯示在右下（東南）角。?
????????// 請(qǐng)注意，從頂部或左側(cè)調(diào)整大小通常不直觀。
? ??????resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']?
????????//如果為 true 且可拖動(dòng)，則項(xiàng)目將僅在網(wǎng)格內(nèi)移動(dòng)。
? ??????isBounded: ?boolean = false
????}
