[Project 개념공부] Bootstrap-button groups

Button groups

ButtonGroup을 이용하면 버튼들을 묶어서 출력할 수 있다.

import "./App.css";
import { ButtonGroup, Button, DropdownButton, Dropdown } from "react-bootstrap";

function App() {
  return (
    <>
      {/* ButtonGroup - 버튼들을 묶어 줄 때 사용  aria-label속성은 역할 설명을 작성*/}
      <ButtonGroup className="mx-1 my-1" aria-label="Basic example">
        <Button variant="secondary">Left</Button>
        <Button variant="secondary">Middle</Button>
        <Button variant="secondary">Right</Button>
      </ButtonGroup>
      <br />
      
      
      {/* sizing */}
      <>
        <ButtonGroup size="lg" className="mb-2">
          <Button>Left</Button>
          <Button>Middle</Button>
          <Button>Right</Button>
        </ButtonGroup>
        <br />
        <ButtonGroup className="mb-2">
          <Button>Left</Button>
          <Button>Middle</Button>
          <Button>Right</Button>
        </ButtonGroup>
        <br />
        <ButtonGroup size="sm">
          <Button>Left</Button>
          <Button>Middle</Button>
          <Button>Right</Button>
        </ButtonGroup>
      </>
      <br />


      {/* DropButton */}
      <ButtonGroup className="my-2">
        <Button>1</Button>
        <Button>2</Button>
        <DropdownButton
          as={ButtonGroup}
          title="Dropdown"
          id="bg-nested-dropdown"
        >
          <Dropdown.Item eventKey="1">ONE</Dropdown.Item>
          <Dropdown.Item eventKey="2">TWO</Dropdown.Item>
        </DropdownButton>
      </ButtonGroup>
      <br />
      
      
      {/* ButtonGroup - vertical */}
      <ButtonGroup vertical>
        <Button>Button</Button>
        <Button>Button</Button>

        <DropdownButton
          as={ButtonGroup}
          title="Dropdown"
          id="bg-vertical-dropdown-1"
        >
          <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
          <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
        </DropdownButton>

        <Button>Button</Button>
        <Button>Button</Button>

        <DropdownButton
          as={ButtonGroup}
          title="Dropdown"
          id="bg-vertical-dropdown-2"
        >
          <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
          <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
        </DropdownButton>

        <DropdownButton
          as={ButtonGroup}
          title="Dropdown"
          id="bg-vertical-dropdown-3"
        >
          <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
          <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
        </DropdownButton>
      </ButtonGroup>
    </>
  );
}

export default App;