ボタングループ

ボタングループは複数のボタンを1行にまとめます。ボタングループの使い方の例を示します。

Basic example

ButtonGroup コンポーネントで Button コンポーネントを含む一連のボタンを囲みます

vue
<template>
 <ButtonGroup aria-label="Basic example">
  <b-button color="primary">
   Left
  </b-button>
  <b-button color="primary">
   Middle
  </b-button>
  <b-button color="primary">
   Right
  </b-button>
 </ButtonGroup>
</template>
warning
roleが正しいことを確認し、ラベルをつける。

支援技術（スクリーン・リーダーなど）が、一連のボタンがグループ化されていることを伝えるためには、適切なrole属性を提供する必要があります。 ボタングループの場合はrole="group"となり、ツールバーの場合はrole="toolbar"となります。

加えて、グループやツールバーには明示的なラベルをつけるべきです。そうしないと、正しい役割属性があるにもかかわらず、ほとんどの支援技術がそれを告知しないからです。ここで提供される例では、earia-labelを使用していますが、aria-labelledbyのような代替も使用できます。

これらのクラスは、 の代わりに、リンクのグループに追加することもできます。 navナビゲーション・コンポーネント .

vue
<template>
 <ButtonGroup aria-label="Basic example">
  <b-button
   color="primary"
   active
  >
   Active link
  </b-button>
  <b-button color="primary">
   Middle
  </b-button>
  <b-button color="primary">
   Right
  </b-button>
 </ButtonGroup>
</template>

Mixed styles

vue
<template>
 <ButtonGroup aria-label="Basic mixed styles example">
  <b-button color="danger">
   Left
  </b-button>
  <b-button color="warning">
   Middle
  </b-button>
  <b-button color="success">
   Right
  </b-button>
 </ButtonGroup>
</template>

Outlined styles

vue
<template>
 <ButtonGroup aria-label="Basic outlined example">
  <b-button color="outline-primary">
   Left
  </b-button>
  <b-button color="outline-primary">
   Middle
  </b-button>
  <b-button color="outline-primary">
   Right
  </b-button>
 </ButtonGroup>
</template>

Checkbox and radio button groups

チェックボックスやラジオボタンのような toggle buttons を組み合わせてシームレスなボタングループにできます。

vue
<template>
 <ButtonGroup aria-label="Basic checkbox toggle button group">
  <CheckboxToggleButton
   color="outline-primary"
   checked
  >
   Checkbox 1
  </CheckboxToggleButton>
  <CheckboxToggleButton color="outline-primary">
   Checkbox 2
  </CheckboxToggleButton>
  <CheckboxToggleButton color="outline-primary">
   Checkbox 3
  </CheckboxToggleButton>
 </ButtonGroup>
</template>
vue
<template>
 <ButtonGroup aria-label="Basic checkbox toggle button group">
  <RadioToggleButton
   name="btnradio"
   color="outline-primary"
   checked
  >
   Radio 1
  </RadioToggleButton>
  <RadioToggleButton
   name="btnradio"
   color="outline-primary"
  >
   Radio 1
  </RadioToggleButton>
  <RadioToggleButton
   name="btnradio"
   color="outline-primary"
  >
   Radio 1
  </RadioToggleButton>
 </ButtonGroup>
</template>

Button toolbar

ボタングループのセットをツールバーに組み合わせて、複雑なコンポーネントを作成できます。必要に応じてユーティリティ属性を使用して、グループやボタンなど配置します。

vue
<template>
 <ButtonToolbar aria-label="Toolbar with button groups">
  <ButtonGroup
   margin="e-2"
   aria-label="First group"
  >
   <b-button color="primary">
    1
   </b-button>
   <b-button color="primary">
    2
   </b-button>
   <b-button color="primary">
    3
   </b-button>
   <b-button color="primary">
    4
   </b-button>
  </ButtonGroup>
  <ButtonGroup
   margin="e-2"
   aria-label="Second group"
  >
   <b-button color="secondary">
    5
   </b-button>
   <b-button color="secondary">
    6
   </b-button>
   <b-button color="secondary">
    7
   </b-button>
  </ButtonGroup>
  <ButtonGroup aria-label="Third group">
   <b-button color="info">
    8
   </b-button>
  </ButtonGroup>
 </ButtonToolbar>
</template>

入力グループとツールバーのボタングループを自由に組み合わせてください。 適切に配置するには属性が必要です。

vue
<template>
 <ButtonToolbar
  margin="b-3"
  aria-label="Toolbar with button groups"
 >
  <ButtonGroup
   margin="e-2"
   aria-label="First group"
  >
   <b-button color="primary">
    1
   </b-button>
   <b-button color="primary">
    2
   </b-button>
   <b-button color="primary">
    3
   </b-button>
   <b-button color="primary">
    4
   </b-button>
  </ButtonGroup>
  <BInputGroup>
   <BInputGroupText>@</BInputGroupText>
   <BFormInput
    type="text"
    placeholder="Input group example"
    aria-label="Input group example"
   />
  </BInputGroup>
 </ButtonToolbar>

 <ButtonToolbar
  justify-content="between"
  aria-label="Toolbar with button groups"
 >
  <ButtonGroup aria-label="First group">
   <b-button color="outline-secondary">
    1
   </b-button>
   <b-button color="outline-secondary">
    2
   </b-button>
   <b-button color="outline-secondary">
    3
   </b-button>
   <b-button color="outline-secondary">
    4
   </b-button>
  </ButtonGroup>
  <BInputGroup>
   <BInputGroupText>@</BInputGroupText>
   <BFormInput
    type="text"
    placeholder="Input group example"
    aria-label="Input group example"
   />
  </BInputGroup>
 </ButtonToolbar>
</template>

Sizing

グループ内のすべてのボタンにボタンのサイズクラスを適用する代わりに、.btn-group-*を各.btn-groupに追加するだけです。



vue
<template>
 <ButtonGroup
  size="lg"
  aria-label="Large button group"
 >
  <b-button color="outline-dark">
   Left
  </b-button>
  <b-button color="outline-dark">
   Middle
  </b-button>
  <b-button color="outline-dark">
   Right
  </b-button>
 </ButtonGroup>
 <br />
 <ButtonGroup
  class="btn-group"
  aria-label="Default button group"
 >
  <b-button color="outline-dark">
   Left
  </b-button>
  <b-button color="outline-dark">
   Middle
  </b-button>
  <b-button color="outline-dark">
   Right
  </b-button>
 </ButtonGroup>
 <br />
 <ButtonGroup
  size="sm"
  aria-label="Small button group"
 >
  <b-button color="outline-dark">
   Left
  </b-button>
  <b-button color="outline-dark">
   Middle
  </b-button>
  <b-button color="outline-dark">
   Right
  </b-button>
 </ButtonGroup>
</template>

Nesting

vue
<template>
 <ButtonGroup aria-label="Button group with nested dropdown">
  <b-button class="btn btn-secondary">
   1
  </b-button>
  <b-button class="btn btn-secondary">
   2
  </b-button>

  <ButtonGroup>
   <DropdownToggle
    id="btnGroupDrop1"
    color="secondary"
   >
    Dropdown
   </DropdownToggle>
   <ul
    class="dropdown-menu"
    aria-labelledby="btnGroupDrop1"
   >
    <li>
     <Anchor
      class="dropdown-item"
      to="/"
     >
      Dropdown link
     </Anchor>
    </li>
    <li>
     <Anchor
      class="dropdown-item"
      to="/"
     >
      Dropdown link
     </Anchor>
    </li>
   </ul>
  </ButtonGroup>
 </ButtonGroup>
</template>

Vertical variation

ボタンを水平ではなく縦に積み重ねて表示させます。スプリットボタンのドロップダウンはここではサポートされていません。

vue
<template>
 <ButtonGroup vertical>
  <b-button color="dark">
   Button
  </b-button>
  <b-button color="dark">
   Button
  </b-button>
  <b-button color="dark">
   Button
  </b-button>
  <b-button color="dark">
   Button
  </b-button>
  <b-button color="dark">
   Button
  </b-button>
  <b-button color="dark">
   Button
  </b-button>
 </ButtonGroup>

 <ButtonGroup vertical>
  <b-button color="primary">
   Button
  </b-button>
  <b-button color="primary">
   Button
  </b-button>
  <ButtonGroup>
   <DropdownToggle color="primary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
   </DropdownMenu>
  </ButtonGroup>
  <b-button color="primary">
   Button
  </b-button>
  <b-button color="primary">
   Button
  </b-button>
  <ButtonGroup>
   <DropdownToggle color="primary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
   </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
   <DropdownToggle color="primary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
   </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
   <DropdownToggle color="primary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
    <DropdownItem to="/">
     Dropdown link
    </DropdownItem>
   </DropdownMenu>
  </ButtonGroup>
 </ButtonGroup>

 <ButtonGroup
  vertical
  aria-label="Basic checkbox toggle button group"
 >
  <RadioToggleButton
   name="btnradio"
   color="outline-danger"
   checked
  >
   Radio 1
  </RadioToggleButton>
  <RadioToggleButton
   name="btnradio"
   color="outline-danger"
  >
   Radio 1
  </RadioToggleButton>
  <RadioToggleButton
   name="btnradio"
   color="outline-danger"
  >
   Radio 1
  </RadioToggleButton>
 </ButtonGroup>
</template>