Reactstrap — Карусели и коллапс

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

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

В этой статье мы рассмотрим, как добавлять карусели и сворачивать компоненты с помощью Reactstrap.

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

Мы можем изменить тег и имя класса, которые отображаются в элементе карусели.

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

import React from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
const items = [
  {
    id: 1,
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    id: 2,
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    id: 3,
    altText: "Slide 3",
    caption: "Slide 3"
  }
];
export default function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);
  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };
const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  };
  const goToIndex = newIndex => {
    if (animating) return;
    setActiveIndex(newIndex);
  };
  const slides = items.map(item => {
    return (
      <CarouselItem
        className="custom-tag"
        tag="div"
        key={item.id}
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
      >
        <CarouselCaption
          className="text-warning"
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });
  return (
    <div>
      <style>
        {`.custom-tag {
          max-width: 100%;
          height: 500px;
          background: black;
        }`}
      </style>
      <Carousel activeIndex={activeIndex} next={next} previous={previous}>
        <CarouselIndicators
          items={items}
          activeIndex={activeIndex}
          onClickHandler={goToIndex}
        />
        {slides}
        <CarouselControl
          direction="prev"
          directionText="Previous"
          onClickHandler={previous}
        />
        <CarouselControl
          direction="next"
          directionText="Next"
          onClickHandler={next}
        />
      </Carousel>
    </div>
  );
}

У нас есть массив items для генерации из него слайдов.

CarouselCaption есть заголовок.

Мы устанавливаем className для стилизации текста.

CarouselItem также имеет className и tag для установки имени класса и отображения элемента слайда с заданным тегом.

Крах

Мы можем использовать компонент Collapse для создания переключаемого компонента.

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

import React from "react";
import { Collapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const toggle = () => setIsOpen(!isOpen);
  return (
    <div>
      <Button color="warning" onClick={toggle} style={{ marginBottom: "1rem" }}>
        Toggle
      </Button>
      <Collapse isOpen={isOpen}>
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia curae; Mauris ultrices justo
            quis sapien faucibus ultricies.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

Мы устанавливаем свойство color в тот стиль, который мы хотим для кнопки.

Контент находится в компоненте Collapse, который переводит реквизит isOpen в состояние isOpen.

У нас есть функция toggle для переключения компонента Collapse при нажатии на него.

События

Collapse берет больше реквизита.

Проп onEntering, который запускается, когда его показывают.

onEntered запускается, когда отображается компонент свертывания.

onExiting запускается, когда компонент свертывания отключается.

onExited запускается, когда компонент свертывания выключен.

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

import React from "react";
import { Collapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  const [collapse, setCollapse] = React.useState(false);
  const [status, setStatus] = React.useState("Closed");
  const onEntering = () => setStatus("Opening");
  const onEntered = () => setStatus("Opened");
  const onExiting = () => setStatus("Closing");
  const onExited = () => setStatus("Closed");
  const toggle = () => setCollapse(!collapse);
  return (
    <div>
      <Button color="primary" onClick={toggle} className="mb-1">
        Toggle
      </Button>
      <p>Current state: {status}</p>
      <Collapse
        isOpen={collapse}
        onEntering={onEntering}
        onEntered={onEntered}
        onExiting={onExiting}
        onExited={onExited}
      >
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

Мы передаем функции всем этим свойствам для отображения состояния status, чтобы мы могли его отображать.

Неконтролируемый коллапс

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

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

import React from "react";
import { UncontrolledCollapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div>
      <Button color="primary" id="toggler" className="mb-2">
        Toggle
      </Button>
      <UncontrolledCollapse toggler="#toggler">
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardBody>
        </Card>
      </UncontrolledCollapse>
    </div>
  );
}

Пока идентификатор кнопки соответствует селектору в реквизите toggler компонента UncontrolledCollapse, переключение будет выполняться кнопкой.

Вывод

Мы можем добавить карусели как неконтролируемый компонент.

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