макет сетки макета реакции-сетки

React.js

предисловие

Недавно я наткнулся наreact-grid-layoutВ системе компоновки сетки я обнаружил, что во время использования у нее много функций, но есть много вещей, которые я не понимаю в использовании атрибутов и событий, поэтому вот краткое изложение (перевод) ее атрибутов и использования.

react-grid-layout

React-Grid-Layout — это система компоновки сетки, которая предоставляет только компоненты React и не требует использования JQuery, подобно:Packery а такжеGridster, но RGL отзывчив и поддерживает точки останова. Пользователи могут настраивать точки останова, или они могут автоматически генерироваться RGL. Мощные анимации с официального сайта:

RGL

Grid Layout Props

RGL поддерживает следующие свойства:

Основные свойства

// 基础属性
// 在服务器端设置的初始宽度，除非你使用了 HOC  <WidthProvider> 或者其他类似的组件，那么 width 属性是必须的。
width: number,

// 当为 true 的时候，容器高度自适应以适应内容
autoSize: ?boolean = true,

// 将当前布局分为多少列
cols: ?number = 12|{},

// 属性值为标签的 css 选择器，被标记后标签就不可拖动了
// 比如说：draggableCancel:'.MyNonDraggableAreaClassName'
draggableCancel: ?string = '',

// 属性值为标签的 css 选择器，被标记后标签就可以被拖动
// 比如说: draggableHandle:'.MyDragHandleClassName'
draggableHandle: ?string = '',

// 为 true 时，会在竖直方向上紧凑排列
verticalCompact: ?boolean = true,

// 紧凑排列的方向
compactType: ?('vertical' | 'horizontal') = 'vertical';

// layouts 属性值是由这样格式{x: number, y: number, w: number, h: number}的对象组成的数组
// 需要注意的是，layout在数组中的下标必须和他们作用的组件的 key 值匹配
// 如果希望在组件中使用自定义的 key 值，那么你可以在 layout 中指定那个 key 值
// 最后这个对象数组可能像是这样： {i: string, x: number, y: number, w: number, h: number}
// 也可以在子组件中单独设置
layout: ?array = null, 

// 每个包含块之间 margin：[x,y] 单位为 px
margin: ?[number, number] = [10, 10],

//包含块内部的 padding:[x,y] 单位为 px
// Padding inside the container [x, y] in px
containerPadding: ?[number, number] = margin,

// 每行的静态高度，但是如果需要的话你可以基于 breakpoints 来改变它,
rowHeight: ?number = 150,

// droping 元素的配置，它是一个"虚拟的"元素，当您从外部拖动某个元素时，它会出现
// 它可以通过传递特定参数被改变:
//  i - 元素的 id
//  w - 元素的宽度
//  h - 元素的高度
droppingItem?: { i: string, w: number, h: number }

//
// Flags
//
isDraggable: ?boolean = true,
isResizable: ?boolean = true,
// 使用css3的translate() 代替定位中的 top 和 left，能使绘制过程的性能提升 6 倍
useCSSTransforms: ?boolean = true,
// 如果父节点：ResponsiveReactGridLayout 或者 ReactGridLayout 有 transform: scale(n) 的 css 属性
// 我们应该设置比例系数，以避免在拖动的过程中 render artefacts
transformScale: ?number = 1,

// 如果设置true，在拖拽过程当中，被拖拽的组件不会改变位置
preventCollision: ?boolean = false;

// 如果设置为 true，可拖动的元素（带有 draggable={true} 属性）可以在网格上被拖动，他会引发 "onDrop" 回调函数，位置信息和事件对象 作为参数会被传到回调函数中，

// 注意：假如使用的是 Firefox 你应该添加 onDragStart={e => e.dataTransfer.setData('text/plain', '')} 属性和 draggable={true}，否则这个特性不会正确的工作
// Firefox 需 要onDragStart 属性来进行拖放初始化
// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
isDroppable: ?boolean = false

//
// Callbacks
//

// 用来保存布局的回调，每次 drag 或者 resize 结束之后返回当前的布局
onLayoutChange: (layout: Layout) => void,

//下面所有的回调都有这些参数(layout, oldItem, newItem, placeholder, e, element)
//开始和结束的回调函数中参数：placeholder为undefined
//
type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;


onDragStart: ItemCallback,
onDrag: ItemCallback,
onDragStop: ItemCallback,
onResizeStart: ItemCallback,
onResize: ItemCallback,
onResizeStop: ItemCallback,
onDrop: (elemParams: { x: number, y: number, e: Event }) => void

Адаптивные свойства макета сетки

Можно использовать адаптивный макет сетки, он поддерживает 👆 все основные свойства, кроме макета, новые свойства и измененные части:

// 断点名是任意的，但必须与cols和layouts对象匹配。
breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},

// 针对 cols 的断点
cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},

// 固定间隔或者响应式间隔 e.g.[10,10]| `{lg: [10, 10], md: [10, 10], ...}.
margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}


// 同上，固定内边距或者响应式内边距：e.g. [10,10]|`{lg: [10, 10], md: [10, 10], ...}
containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}


// 由断点查找的 layouts 对象 e.g. {lg: Layout, md: Layout, ...}
layouts: {[key: $Keys<breakpoints>]: Layout}

//
// Callbacks
//

onBreakpointChange: (newBreakpoint: string, newCols: number) => void,

onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void,

// 当页面宽度变化时的回调，这样你就可以根据需要修改 layout 啦
onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void;

свойства элементов сетки

Обратите внимание, что будет выдано сообщение об ошибке, если элемент сетки предоставлен, но неполный (отсутствует один из x, y, w или h), поэтому вы можете исправить макет.

Если для элемента сетки не указаны свойства, будет создано свойство с шириной и высотой, равными 1.

Вы можете установить минимальные и максимальные значения для каждого измерения. Это для изменения размера; конечно, если изменение размера отключено, это не будет иметь никакого эффекта. Будет выдано сообщение об ошибке, если ваши минимальные и максимальные значения перекрывают друг друга или если ваш начальный размер выходит за допустимые пределы.

Любые свойства, определенные непосредственно в , будут иметь приоритет над свойствами в глобальном элементе. Например, если свойство макета isDraggable: false, но объект реквизита элемента сетки имеет значение isDraggable: true, то элемент сетки можно перетаскивать, даже если он помечен как static: true.

{

  // 组件的 key 值
  i: string,

  // 这些都是网格单元，而不是像素
  x: number, // 占几列
  y: number, // rowHeight 的倍数
  w: number, // 同 x 计算方法
  h: number, // 同 y 计算方法
  minW: ?number = 0,
  maxW: ?number = Infinity,
  minH: ?number = 0,
  maxH: ?number = Infinity,

  // 为 true 的时候相当于设置 "isDraggable: false, isResizable: false"
  static: ?boolean = false,
  // 为 false 的时候，不能被拖动，覆盖掉 static 属性
  isDraggable: ?boolean = true,
  // 为 false 的时候，不能重新设置大小，覆盖掉 static 属性
  isResizable: ?boolean = true
}

использовать

выбор компонентов

Неотзывчивая прямая ссылка на компонент GridLayout выглядит следующим образом:

import GridLayout from 'react-grid-layout';

GridLayout не поддерживает такие свойства, как cols, layouts и т. д., которые поддерживают значения настройки точки останова.Значения этих свойств — это объекты, настроенные точками останова (например: {lg: 1200, md: 996, sm: 768, xs: 480, xxs:0) }), принудительное его использование приведет к несоответствию эффекта отображения страницы с ожидаемым, то есть к ошибке.Когда вы хотите использовать адаптивную верстку, рекомендуется использовать следующие компоненты.

Отзывчивое использование:

При использовании адаптивного режима вы должны сделать так, чтобы значение свойства layouts предоставляло макет хотя бы для одной точки останова, а установка макетов точек останова для одного элемента сетки временно не поддерживается.

1. Используйте компонент ResponsiveGridLayout

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

2. Компоненты, обернутые функцией WidthProvider

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

const ResponsiveGridLayout = WidthProvider(Responsive);

разница:Компоненты и используют ширину для расчета положения в событиях перетаскивания, поэтому ширина требуется при использовании этих двух компонентов. Теперь компонент попроще: WidthProvider, свойство width для него не обязательно, при обёртке компонента с помощью WidthProvider ширина будет автоматически рассчитываться при инициализации и в событии изменения размера

Использование точек останова

Многие из упомянутых выше свойств, те, чьи значения свойств могут быть объектами, поддерживают управление размещением элементов на основе точек останова, таких как: cols, layouts, containerPadding, margin, и методы их использования примерно одинаковы. маржа в качестве примера:

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

const ResponsiveGridLayout = WidthProvider(Responsive);
export default class MyFirstGrid 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: 2, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 0, y: 2, w: 1, h: 2}
    ];
    return (
      <ResponsiveGridLayout className="layout" 
        layouts={{lg:layout} } 
        rowHeight={30}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        margin={{lg: [30,30], md: [20,20], sm: [10,10], xs: [5,5]}}
      >
        <div key="a" style={{"background": "red"}}>a</div>
        <div key="b" style={{"background": "red"}}>b</div>
        <div key="c" style={{"background": "red"}}>c</div>
      </ResponsiveGridLayout>
    )
  }
}

Эффект следующий:

Видно, что будут изменения в интервалах между элементами в точках останова.

Чтобы немного усложнить ситуацию, если вы хотите управлять положением элементов, то есть координатами x,y каждого элемента, вы можете использовать атрибут layouts для изменения положения элементов для разных размеров экрана.

Некоторые функции событий, которые могут помочь с реактивными изменениями

  • onBreakpointChange запускается, когда размер страницы переходит от одного интервала точки останова к другому. Если вы хотите быстро изменить другие свойства, которые изначально не поддерживают отзывчивость (например, rowHeight), вы можете изменить его здесь.
  • onLayoutChange аналогичен onBreakpointChange, который будет срабатывать на стыке точек останова, функция обратного вызова будет передавать значения атрибутов текущего макета и макетов, и в нем можно изменить макет соответствующего ключа.
  • Обратный вызов onWidthChange изменения размера страницы, ширины прохождения контейнера, значения текущего поля, значения cols, значения containerPadding

Разумное использование компактного выравнивания

Верхний левый угол всей страницы — это точка (0, 0).

Обратите внимание, что в основных свойствах есть два свойства: verticalCompact и compactType, которые принимают значения логического типа и строкового типа соответственно, указывая, следует ли использовать вертикальное компактное выравнивание или в каком направлении. Когда compactType и verticalCompact существуют одновременно, compactType имеет более высокий приоритет, чем verticalCompact.

Использование различных выравниваний заставит макет страницы иметь разные магические эффекты: При вертикальном выравнивании, когда абсцисса находится в том же положении, если перед этим элементом находится элемент, занимающий предыдущую позицию (то есть ордината тоже такая же), то этот элемент располагается ниже последнего элемента под та же абсцисса. В противном случае она помещается в положение (x, 0);

В частности: при недостатке места в горизонтальном направлении тот, у кого значение w больше, ближе к y = 0;

Используйте выравнивание в горизонтальном направлении, когда горизонтальные и вертикальные координаты совпадают, слева направо, последние будут оставлены слева, кроме помеченных как статические, которые останутся на своих собственных x-координатах. ординаты одинаковые абсциссы разные Располагаются слева направо абсцисса одинаковая а ордината разная До этой ординаты уже есть элемент занимающий позицию, то она располагается справа от последнего элемента.

Суммировать

В некоторых бизнес-сценариях необходимо использовать такую ​​сетку для фрагментации и пополнения страниц, поэтому удобнее использовать RGL, но на практике может оказаться, что вы недостаточно знаете об этом. github В то время также есть некоторые проблемы, например, элемент сетки не может быть изменен, даже после того, как установлен isResizable.Что касается его адаптивной функции, функции перетаскивания и функции изменения размера элемента сетки, мы продолжим обобщать и дополнять в будущей практике. .

Категории