Компонент React-Bootstrap ButtonGroup

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

React-Bootstrap — это интерфейсный фреймворк, разработанный с учетом реакции. Компонент ButtonGroup предоставляет способ сгруппировать ряд кнопок вместе в одной строке. Мы можем использовать следующий подход в ReactJS для использования компонента ButtonGroup реакции-загрузки.

Реквизит группы кнопок:

  • роль: это роль ARIA, которая описывает группу кнопок.
  • размер: используется для установки размера всех кнопок в группе.
  • toggle: используется для отображения группы переключателей похожих кнопок.
  • вертикальный: позволяет сделать набор кнопок вертикально сложенным.
  • as: Может использоваться как пользовательский тип элемента для этого компонента.
  • bsPrefix: Это аварийный выход для работы со строго настроенным загрузочным CSS .

Реквизит панели кнопок :

  • Роль: это роль ARIA, описывающая панель инструментов кнопок.
  • bsPrefix: Это аварийный выход для работы со строго настроенным загрузочным CSS .

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

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

     npx имя папки create-реагировать-приложение

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

     cd имя папки

  • Шаг 3: После создания приложения ReactJS установите требуется модуль с помощью следующей команды:

     npm установить реакцию-бутстрап 
npm установить бутстрап

Структура проекта: Это будет выглядеть следующим образом.

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

App.js




import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";
  
export default function App() {
  return (
    <div style={{ display: "block", 
                  width: 700, 
                  padding: 30 }}>
      <h4>React-Bootstrap ButtonGroup Component</h4>
      <ButtonGroup aria-label="Basic example">
          <Button variant="secondary">
             Left Button
          </Button>
          <Button variant="primary">
             Middle Button
          </Button>
          <Button variant="secondary">
             Right Button
          </Button>
      </ButtonGroup>
    </div>
  );
}

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Ссылка: https://react-bootstrap.github.io/components/button-group/

            

                            

                    
                                    

                        

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