Начало работы с разработкой React с помощью библиотеки React Suite - разбиение на страницы и сетка

React Suite - полезная библиотека пользовательского интерфейса, которая позволяет нам легко добавлять множество компонентов в наше приложение React.

В этой статье мы рассмотрим, как использовать его для добавления компонентов в наше приложение React.

Пагинация

Мы можем добавить кнопки пагинации с помощью компонента Pagination.

Например, мы можем написать:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} />
    </div>
  );
}

pages устанавливает количество отображаемых ссылок.

activePages устанавливает номер активной страницы.

Мы можем изменить размер с помощью опоры size:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} size="lg" />
    </div>
  );
}

'lg' делает его большим.

xs делает его очень маленьким, sm делает его маленьким, md делает его средним.

Мы можем добавить кнопки для перехода на разные страницы с разными реквизитами:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} prev last next first />
    </div>
  );
}

prev переходит к предыдущей кнопке пагинации.

last переходит к последней кнопке пагинации.

next переходит к следующей кнопке пагинации.

first переходит к первой кнопке нумерации страниц.

Панировочные сухари

Мы можем добавить хлебные крошки с помощью компонента Breadcrumb.

Например, мы можем написать:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>Components</Breadcrumb.Item>
        <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Breadcrumb.Item содержит элементы навигации.

Мы можем изменить разделитель с помощью опоры separator:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Breadcrumb separator="-">
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>Components</Breadcrumb.Item>
        <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

active делает элемент активным.

Мы можем установить максимальное количество отображаемых элементов с помощью свойства maxItems:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Breadcrumb
        maxItems={5}
        onExpand={() => {
          console.log("call onExpand");
        }}
      >
        <Breadcrumb.Item>Item A</Breadcrumb.Item>
        <Breadcrumb.Item>Item B</Breadcrumb.Item>
        <Breadcrumb.Item>Item C</Breadcrumb.Item>
        <Breadcrumb.Item>Item D</Breadcrumb.Item>
        <Breadcrumb.Item>Item E</Breadcrumb.Item>
        <Breadcrumb.Item>Item F</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Сетка

Мы можем добавить сетку с компонентами Grid, Row и Col.

Например, мы можем написать:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row className="show-grid">
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
        </Row>
      </Grid>
    </div>
  );
}

xs представляет собой точку останова xs.

Это количество столбцов, которое Col берет из 24 столбцов.

Ниже представлена ​​ширина каждой точки останова:

• xs, сверхмалые: менее480px
• sm, маленький: больше или равно480px
• md, средний: больше или равно992px
• lg, большой: больше или равно1200px

Заключение

Мы можем добавлять нумерацию страниц и сетки с помощью React Suite.