Как использовать компонент Collapse в ReactJS?

Опубликовано: 8 Августа, 2022

Collapse Component добавляет анимацию Collapse к дочернему элементу или компоненту, в котором он расширяется по вертикали от верхней части дочернего элемента. Материал UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Мы можем использовать компонент Collapse в ReactJS, используя следующий подход.

Создание приложения React и установка модуля:

Шаг 1: Создайте приложение React с помощью следующей команды.

npx create-react-app foldername

Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды.

cd foldername

Шаг 3: После создания приложения ReactJS установите модули material-ui , используя следующую команду.

npm install @material-ui/core

Структура проекта:

Пример. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

App.js




import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Paper from "@material-ui/core/Paper";
import Switch from "@material-ui/core/Switch";
import Collapse from "@material-ui/core/Collapse";
  
export default function App() {
  
  const [isChecked, setIsChecked] = React.useState(false);
  
  return (
    <div style={{ display: "block", padding: 30 }}>
      <h4>How to use Collapse Component in ReactJS?</h4>
      <FormControlLabel
        control={<Switch checked={isChecked} onChange={() => {
          setIsChecked((prev) => !prev);
        }} />}
        label="Toggle me to see Collapse Effect"
      />
      <div style={{ display: "flex" }}>
        <Collapse in={isChecked}>
          <Paper
            elevation={5}
            style={{ margin: 5 }} >
            <svg style={{ width: 100, height: 100 }}>
              <polygon points="0,80 45,00, 80,70"
                style={{
                  fill: "orange",
                  stroke: "dimgrey",
                  strokeWidth: 1,
                }} />
            </svg>
          </Paper>
        </Collapse>
      </div>
    </div>
  );
}

Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод.
Ссылка: https://material-ui.com/components/transitions/#collapse

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ