wtorek, 16 sierpnia, 2022
Strona głównaReact JsReactowy responsywny układ siatki - React-Grid-Layout

Reactowy responsywny układ siatki – React-Grid-Layout

Jest to dość popularna wtyczka Reactowa wykorzystywana w w dużych projektach i nie tylko...

-

- Reklama -
Dark Mode

react-grid-layout (this link opens in a new window) by react-grid-layout (this link opens in a new window)

A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout. Jest to dość popularna wtyczka wykorzystywana w w dużych projektach i nie tylko. Wtyczka jest podobna do innych wtyczek tego typu (Wtyczka JQuery – gridster.js), (Wtyczka JQuery – Packery).

W przeciwieństwie do wyżej wymienionych systemów ta wtyczka jest responsywna i obsługuje układy breakpointów. Breakpointy generowane są automatycznie, ale można też dodawać swoje w dowolnej ilości, jeśli korzystasz Bootstrap to podaj breakpointy, które są do niego przypisane. Właśnie na tej podstawie jest budowany układ responsywnej siatki, i co ważne wszystko jest oparte o Reacta wiec nie potrzeba JQuery do poprawnego działania.

Meta:

Oficjalna strona: Wejdź na stronę internetową

Repozytorium: GitHub React-Gird-Layout

Rozmiar repozytorium: 311 KB

NPM: npm i react-gird-layout

Licencja: MIT

Pobierz: X-plugin react-gird-layout

– Reklama –
– Reklama –

Funkcje i cechy:

  • 100% React – bez jQuery.
  • Kompatybilny z aplikacjami renderowanymi po stronie serwera.
  • Przeciągnij i upuść dla widżetów renderowanych w wtyczce.
  • Widżety z możliwością zmiany rozmiaru.
  • Widżety statyczne.
  • Konfigurowalny układ: poziomy, pionowy lub wyłączony.
  • Sprawdzanie granic widżetu pod kontem przeciągania i zmiany rozmiaru.
  • Widżety można dodawać i suwać bez przekompilowania siatki.
  • Układ można serializować a także można go przywracać lub zmienić w dowolnym momencie.
  • Możliwość dodania breakpointów do responsywnej zmiany układu siatki.
  • Możliwość dodania swoich schematów dla breakpointów.
  • Elementy zmiany siatki mają wbudowaną animację opartą o przekształceń CSS.

Kompatybilność w odniesieniu do wersji Reacta:

WersjaZgodność
>= 0,17,0Reaguj 16 i 17
>= 0,11,3Reaguj 0,14 i 15
>= 0,10,0Reaguj 0,14
0,8. – 0.9.2Reaguj 0,13
<0,8Reaguj 0,12
https://github.com/react-grid-layout/react-grid-layout

Instalacja:

Aby dodać do swojego projektu ten widżet musisz użyć NPM-a menadżera pakietów dla pluginów JavaScript.

npm install react-grid-layout

Po poprawnej instalacji dodaj do swojego projektu style CSS.

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

Użycie i podstawowe metody:

Jak używać responsywnego układu siatki?

Używa go się jak każdego innego komponentu w Reacie. Poniższy przykład przedstawia użycie układu, z trzema elementami z ograniczonymi funkcjami.

  • Użytkownik nie będzie mógł przeciągać ani zmieniać rozmiaru elementu z oznaczeniem i:”a”.
  • Element i:”b” będzie miał włączoną granicę minimalnej szerokości 2 bloków siatki i maksymalnej szerokości 4 bloków siatki.
  • Użytkownik będzie mógł swobodnie przeciągać i zmieniać rozmiar elementu i:”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>
    );
  }
}

Możesz także ustawić układ siatki bezpośrednio na elementach potomnych, w atrybucie każdego z nich.

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>
    );
  }
}
– Reklama –

Responsywne użycie:

Oto jeden z przykładów użycia responsywnej siatki.

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

W tym trybie responsywnego układu, należy podać co najmniej jeden breakpoint w zmiennej layouts.

Gdy używamy layouts wskazane jest podawać więcej jak jeden breakpoint, zwłaszcza ten największy. Jeśli zostanie podany breakpoint największy, wtyczka będzie próbowała dopasować resztę widżetów do siatki.

Będziesz musiał też podać parametr width, którego nie ma w tym przykładzie ale dla tego wywołania on musi być. Chyba że będzie używać HOC Provdera WidthProvider służy on do automatycznego określania szerokości po starcie wtyczki i jej zimnach przez zdarzenia zmiany rozmiaru okna (window resize).

Po niżej przykład z providerem 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>
    );
  }
}
– Reklama –

WidthProvider akceptuje jeden parametr measureBeforeMount. Jeśli jest na true to zmniejszy szerokość kontenera przed zmontowaniem widżetów utworzonych w tym kontenerze. Tej opcji używa się do wyeliminowania animacji związanych z zmianą rozmiaru podczas montowania komponentu.

Jeśli potrzebujesz bardziej skomplikowanych układów, większej mocy i elastyczności to wypróbuj SizeMe React HOC jako alternatywę dla WidthProvider.

Przykład w codesandbox.io.

Moja wersja demo, przykład wykorzystania w standardowym projekcie.

Na koniec linki do repozytoria z przykładu:

Myślę że ten przykład wyjaśnią wszystkie wątpliwości z uruchomianiem pluginu. Po więcej zapraszam z zapoznaniem się z oficjalnym źródłem pluginu na github.

Pozdrawiam… 🙂

– Reklama –
- Reklama -
- Reklama -

Zostaw swój komentarz na ten temat:

- Reklama -

MUSISZ TO PRZECZYTAĆ

- Reklama -
- Reklama -