React Bootstrap - разбивка на страницы и индикатор выполнения

React Bootstrap - это одна из версий Bootstrap, созданная для React.

Это набор компонентов React со стилями Bootstrap.

В этой статье мы рассмотрим, как добавить кнопки разбивки на страницы и индикатор выполнения с помощью React Bootstrap.

Пагинация

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

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Pagination from "react-bootstrap/Pagination";
let active = 2;
let items = [];
for (let num = 1; num <= 10; num++) {
  items.push(
    <Pagination.Item key={num} active={num === active}>
      {num}
    </Pagination.Item>
  );
}
export default function App() {
  return (
    <>
      <Pagination>{items}</Pagination>
    </>
  );
}

У нас есть Pagination компонент, внутри которого Pagination.Item компонента для отображения ссылок на страницы.

Кроме того, для каждого элемента мы устанавливаем свойство active, чтобы выделить тот, который активен.

Больше опций

Мы можем добавить кнопки для перехода на первую страницу, предыдущую страницу, следующую страницу, последнюю страницу и показать многоточие.

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Pagination from "react-bootstrap/Pagination";
export default function App() {
  return (
    <>
      <Pagination>
        <Pagination.First />
        <Pagination.Prev />
        <Pagination.Item>{1}</Pagination.Item>
        <Pagination.Ellipsis />
        <Pagination.Item disabled>{10}</Pagination.Item>
        <Pagination.Item>{11}</Pagination.Item>
        <Pagination.Item active>{12}</Pagination.Item>
        <Pagination.Item>{13}</Pagination.Item>
        <Pagination.Ellipsis />
        <Pagination.Item>{20}</Pagination.Item>
        <Pagination.Next />
        <Pagination.Last />
      </Pagination>
    </>
  );
}

Компонент Pagination.First позволяет нам добавить кнопку для перехода на первую страницу.

Pagination.Prev позволяет нам добавить кнопку для перехода на предыдущую страницу.

Pagination.Ellipsis позволяет нам отображать многоточие в компоненте Pagination.

Pagination.Next позволяет нам добавить кнопку для перехода на следующую страницу.

И Pagination.Last позволяет нам добавить кнопку для перехода на последнюю страницу.

Индикатор

Индикатор выполнения позволяет нам показывать пользователю обратную связь.

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

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
export default function App() {
  return (
    <>
      <ProgressBar now={80} />
    </>
  );
}

Мы просто добавляем ProgressBar с опорой now, чтобы указать прогресс.

Мы можем добавить метку с помощью label prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
const now = 80;
export default function App() {
  return (
    <>
      <ProgressBar now={now} label={`${now}%`} />
    </>
  );
}

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
const now = 80;
export default function App() {
  return (
    <>
      <ProgressBar now={now} label={`${now}%`} srOnly />
    </>
  );
}

Альтернативы стиля

Мы можем добавить опору variant для изменения стилей:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
export default function App() {
  return (
    <>
      <ProgressBar variant="success" now={60} />
      <ProgressBar variant="info" now={23} />
      <ProgressBar variant="warning" now={30} />
      <ProgressBar variant="danger" now={86} />
    </>
  );
}

Мы добавляем variant с разными именами, чтобы стилизовать их по-разному.

Теперь полоски должны быть разного цвета.

Полосатый

Мы можем добавить полосы к полосам с помощью опоры striped:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
export default function App() {
  return (
    <>
      <ProgressBar striped variant="success" now={60} />
      <ProgressBar striped variant="info" now={23} />
      <ProgressBar striped variant="warning" now={30} />
      <ProgressBar striped variant="danger" now={86} />
    </>
  );
}

Анимированные полосы

Чтобы сделать их полосы анимированными, мы можем добавить опору animated:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
export default function App() {
  return (
    <>
      <ProgressBar animated variant="success" now={60} />
    </>
  );
}

Сложены

Можно складывать несколько индикаторов выполнения.

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
export default function App() {
  return (
    <>
      <ProgressBar>
        <ProgressBar striped variant="success" now={25} key={1} />
        <ProgressBar variant="warning" now={20} key={2} />
        <ProgressBar striped variant="danger" now={10} key={3} />
      </ProgressBar>
    </>
  );
}

Мы добавляем key, чтобы React мог их идентифицировать.

И мы добавляем variant, чтобы стилизовать их по-другому.

now имеет прогресс.

Они отображаются один за другим.

Заключение

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

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

React Bootstrap также поставляется с компонентом индикатора выполнения, который может иметь различные стили и метки.

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!