React-Grid-Layout

簡(jiǎn)介

React-Grid-Layout（簡(jiǎn)稱為RGL）是一個(gè)網(wǎng)格布局系統(tǒng)，可以實(shí)現(xiàn)響應(yīng)式的網(wǎng)格布局，并且支持分割點(diǎn)（breakpoints）的設(shè)置，靈活運(yùn)用可以方便的實(shí)現(xiàn)拖拽式組件的實(shí)現(xiàn)，就如圖下圖所展示的：

拖拽組件展示.gif

github地址：https://github.com/STRML/react-grid-layout

安裝

npm install react-grid-layout

使用時(shí)需要引入相關(guān)樣式

/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css

基本用法

import GridLayout from 'react-grid-layout';

class MyFirstGrid extends React.Component {
  render() {
    // layout應(yīng)被定義為一個(gè)數(shù)組，數(shù)組中每一項(xiàng)是一個(gè)對(duì)象，通過(guò)配置對(duì)象中的相關(guān)屬性的值來(lái)實(shí)現(xiàn)相應(yīng)的布局和設(shè)置
    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>
    )
  }
}

上方代碼即是一個(gè)最簡(jiǎn)單的用法實(shí)現(xiàn)，定義了一個(gè)網(wǎng)格布局，其中有a、b、c三個(gè)項(xiàng)，其中a因?yàn)樵O(shè)置了 static: true，因此它是固定的，不可拖拽和縮放，而b因?yàn)樵O(shè)置了 minW: 2 和 maxW: 4，因此它在縮放時(shí)的寬度被限定到2到4個(gè)單位格之間，而c項(xiàng)只設(shè)置了最基本的屬性，它可以被自由的拖拽和縮放。
當(dāng)然，也可以在子組件中來(lái)設(shè)置相關(guān)布局屬性：

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>
    )
  }
}

breakpoints 設(shè)置分割點(diǎn)，cols 設(shè)置相應(yīng)寬度下的總格數(shù)，layouts 里面的 layout1 的屬性名同基礎(chǔ)的 layout 屬性配置。
同基本用法相同，依然要設(shè)置寬度，否則就會(huì)報(bào)錯(cuò)，不過(guò)RGL中 提供了 WidthProvider HOC ，結(jié)合Responsive它就能在初始化和 window resize 時(shí)自動(dòng)確定寬度，下面會(huì)介紹到。

結(jié)合 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>
    )
  }
}

相比于之前的代碼，只是多引入了WidthProvider這一個(gè)高階組件，就能實(shí)現(xiàn)寬度的自動(dòng)確定了。當(dāng)然也可以自己實(shí)現(xiàn)一個(gè)高階組件以滿足相關(guān)復(fù)雜邏輯需求。

Grid Layout Props

RGL具有以下的屬性：

  • width: number
    設(shè)置寬度，使用了WidthProvider時(shí)不用設(shè)置
  • autoSize: ?boolean = true
    為真時(shí)，容器的高度會(huì)自適應(yīng)內(nèi)容的高度
  • cols: ?number = 12
    布局的列數(shù)
  • draggableCancel: ?string = ''
    取消拖動(dòng)時(shí)被拖動(dòng)項(xiàng)的類選擇器的名稱
  • draggableHandle: ?string = ''
    拖動(dòng)時(shí)被拖動(dòng)項(xiàng)的類選擇器的名稱
  • verticalCompact: ?boolean = true
    為真時(shí)，布局在豎直方向上會(huì)緊湊排列
  • compactType: ?('vertical' | 'horizontal') = 'vertical'
    緊湊排列類型
  • layout: ?array = null
    布局?jǐn)?shù)組，每一項(xiàng)是一個(gè)對(duì)象，形如：{i: string, x: number, y: number, w: number, h: number}，如果子組件不設(shè)置layout，需要在子組件中設(shè)置data-grid
  • margin: ?[number, number] = [10, 10]
    項(xiàng)與項(xiàng)之間的間距，單位是px
  • containerPadding: ?[number, number] = margin
    項(xiàng)的內(nèi)邊距
  • rowHeight: ?number = 150,
    行高
  • droppingItem?: { i: string, w: number, h: number }
    放置元素的配置（放置元素即是當(dāng)你拖動(dòng)某一項(xiàng)時(shí)出現(xiàn)的虛擬元素）
  • isDraggable: ?boolean = true
    是否可拖拽
  • isResizable: ?boolean = true
    是否可重置大小
  • isBounded: ?boolean = false
    是否設(shè)置邊界
  • useCSSTransforms: ?boolean = true
    是否使用CSS 3 的translate() 來(lái)代替 position left/top（可加快渲染速度）
  • transformScale: ?number = 1
    若ResponsiveReactGridLayout 或者 ReactGridLayout的父組件具有"transform: scale(n)"這一css屬性，應(yīng)該設(shè)置這一比例系數(shù)以避免拖拽時(shí)出現(xiàn)“偽影”
  • preventCollision: ?boolean = false
    為真時(shí)，項(xiàng)在拖動(dòng)時(shí)不會(huì)變更位置
  • isDroppable: ?boolean = false
    為真時(shí)，設(shè)置了draggable={true}屬性的項(xiàng)可以被放置入其他項(xiàng)
  • resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
    設(shè)置重置大小的圖標(biāo)出現(xiàn)的位置，默認(rèn)是在右下角
  • resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)
    自定義重置大小組件（即默認(rèn)出現(xiàn)在右下角的那個(gè)小圖標(biāo)，可自定義）
  • onLayoutChange: (layout: Layout) => void
    布局發(fā)生變化的回調(diào)函數(shù)
  • type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem, placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void
    ItemCallback的類型
  • onDragStart: ItemCallback
    某一項(xiàng)開始拖動(dòng)的回調(diào)函數(shù)
  • onDrag: ItemCallback
    某一項(xiàng)正在拖動(dòng)中的回調(diào)函數(shù)
  • onDragStop: ItemCallback
    某一項(xiàng)停止拖動(dòng)的回調(diào)函數(shù)
  • onResizeStart: ItemCallback
    某一項(xiàng)開始重置大小的回調(diào)函數(shù)
  • onResize: ItemCallback
    某一項(xiàng)正在重置大小中的回調(diào)函數(shù)
  • onResizeStop: ItemCallback
    某一項(xiàng)停止重置大小的回調(diào)函數(shù)
  • onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void
    某一項(xiàng)所包含的內(nèi)容中被放置其他元素后的回調(diào)函數(shù)
  • innerRef: ?React.Ref<"div">
    網(wǎng)格的ref

Responsive Grid Layout Props

響應(yīng)式RGL的特殊屬性（除了以下屬性的設(shè)置有所不同外，其他普通RGL具有的屬性都可以設(shè)置）：

  • breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}
    一個(gè)對(duì)象，其中每一項(xiàng)的名稱都可以任意設(shè)置，只要它的值是數(shù)字并且可以與cols 和 layouts中一一對(duì)應(yīng)即可。用以設(shè)置響應(yīng)式布局的分割點(diǎn)
  • cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}
    一個(gè)對(duì)象，其中每一項(xiàng)的名稱需與breakpoints中一一對(duì)應(yīng)，用以設(shè)置布局的列數(shù)
  • margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
    項(xiàng)與項(xiàng)之間邊距的設(shè)置
  • **containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
    **
    項(xiàng)的內(nèi)邊距的設(shè)置
  • layouts: {[key: $Keys<breakpoints>]: Layout}
    布局對(duì)象，其中每一項(xiàng)的名稱需與breakpoints中一一對(duì)應(yīng)
  • onBreakpointChange: (newBreakpoint: string, newCols: number) => void
    breakpoint發(fā)生變更時(shí)的回調(diào)函數(shù)
  • onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void
    布局發(fā)生變化的回調(diào)函數(shù)
  • onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void
    寬度發(fā)生變化的回調(diào)函數(shù)

Grid Item Props

網(wǎng)格項(xiàng)的屬性：

  • i: string
    組件的key
  • x: number
    橫坐標(biāo)
  • y: number
    縱坐標(biāo)
  • w: number
    寬
  • h: number
    高
  • minW: ?number = 0
    最小寬度
  • maxW: ?number = Infinity
    最大寬度
  • minH: ?number = 0
    最小高度
  • maxH: ?number = Infinity
    最大高度
  • static: ?boolean = false
    為真時(shí)，項(xiàng)不可拖拽和縮放
  • isDraggable: ?boolean = true
    是否可拖拽
  • isResizable: ?boolean = true
    是否可縮放
  • resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
    設(shè)置重置大小的圖標(biāo)出現(xiàn)的位置，默認(rèn)是在右下角
  • isBounded: ?boolean = false
    是否設(shè)置邊界（若為真且該項(xiàng)可被拖動(dòng)，則該項(xiàng)只能在網(wǎng)格邊界范圍內(nèi)拖動(dòng)）
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容