とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ドロップダウン

ドロップダウン

.dropdown, .dropdown-toggle, data-toggle="dropdown", .dropdown-menu, .dropdown-item を組み合わせてドロップダウンボタンを表示します。aria-*="..." は読み上げブラウザなどに付加情報を与えるもので、aria-haspopup="true" は要素がポップアップ部品を持つことを、aria-expanded="..." はポップアップの閉塞状態を示します。

<div class="dropdown">
  <button type="button" id="dropdown1"
      class="btn btn-secondary dropdown-toggle"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown1">
    <a class="dropdown-item" href="#">Menu #1</a>
    <a class="dropdown-item" href="#">Menu #2</a>
    <a class="dropdown-item" href="#">Menu #3</a>
  </div>
</div>

ノンインタラクティブ

.dropdown-item-text はインタラクティブではないドロップダウメニューを表示します。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Menu #1</a>
  <a class="dropdown-item" href="#">Menu #2</a>
  <a class="dropdown-item" href="#">Menu #3</a>
  <span class="dropdown-item-text">Text #4</span>
</div>

スプリットボタン

.dropdown-toggle-split を用いて、ボタン本体とドロップダウン部を別部品として表示します。Action をクリックすると Action ボタンが実行され、▼ をクリックするとドロップダウンリストが表示されます。▼ ボタンのラベルは .sr-only で読み上げブラウザのみで読み上げることを示します。

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Action</button>
  <button type="button"
      class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Menu #1</a>
    <a class="dropdown-item" href="#">Menu #2</a>
    <a class="dropdown-item" href="#">Menu #3</a>
  </div>
</div>

サイズ

.btn-sm, .btn-lg でボタンの大きさを変更することができます。

<pre class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle btn-sm" ...>...</button>
  <div class="dropdown-menu">...</div>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" ...>...</button>
  <div class="dropdown-menu">...</div>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle btn-lg" ...>...</button>
  <div class="dropdown-menu">...</div>
</div>

ドロップ方向

.dropup, .dropright, .dropleft は、ドロップの方向を上、右、左に変更します。

<div class="dropdown dropup">
  <button type="button" ...>...</button>
  <div class="dropdown-menu">...</div>
</div>
<div class="dropdown dropright">
  <button type="button" ...>...</button>
  <div class="dropdown-menu">...</div>
</div>
<div class="dropdown dropleft">
  <button type="button" ...>...</button>
  <div class="dropdown-menu">...</div>
</div>

アクティブ

.active はアクティブなメニューを示します。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Menu #1</a>
  <a class="dropdown-item active" href="#">Menu #2</a>
  <a class="dropdown-item" href="#">Menu #3</a>
</div>

無効化

disabled は無効化されたメニューを示します。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Menu #1</a>
  <a class="dropdown-item disabled" href="#">Menu #2</a>
  <a class="dropdown-item" href="#">Menu #3</a>
</div>

メニュー位置

.dropdown-menu-{right|left} はメニューをボタンの右、または左の位置に合わせて表示します。画面の横幅に応じて位置を制御する .dropdown-menu-{breakpoint}-{right|left} も使用可能です。

<div class="dropdown-menu dropdown-menu-right">
  ...
</div>
<div class="dropdown-menu dropdown-menu-left">
  ...
</div>

ヘッダ

.dropdown-header はメニューのヘッダを表示します。

<div class="dropdown-menu">
  <h6 class="dropdown-header">Headeer</h6>
  <a class="dropdown-item" href="#">Menu #1</a>
  <a class="dropdown-item" href="#">Menu #2</a>
  <a class="dropdown-item" href="#">Menu #3</a>
</div>

分割線

.dropdown-divider は分割線を表示します。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Menu #1</a>
  <a class="dropdown-item" href="#">Menu #2</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Menu #3</a>
</div>

オフセット

data-offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle"
      data-toggle="dropdown"
      data-offset="10,20">
    Dropdown
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

リファレンス

data-reference="parent" はメニューの表示位置を親要素に揃えて表示します。

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Action</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
      data-toggle="dropdown"
      data-reference="parent">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

オプション

data-offset= の他にも下記などのオプションを使用できます。

名前	型	デフォルト	説明
data-offset	number | string | function	0	メニューを表示する位置のオフセットを x または x, y で指定します。詳細は Popper.js の Offset を参照してください。
data-flip	boolean	true	リファレンスとなる要素に重なってしまう場合、ドロップダウンをフリップ(反転？)させます。詳細は Popper.js の Flip を参照してください。
data-boundary	string | element	scrollParent	ドロップダウンがオーバーフローする際の制約境界を指定します。ビューポート(viewport)、ウィンドウ(window)、スクロールする親要素(scrollParent) や、JavaScript の場合は任意の HTML 要素を指定することができます。詳細は Popper.js の preventOverflow を参照してください。
data-reference	string | element	toggle	ポップアップを表示する際の基準となるエレメントを指定します。トグルボタン(toggle)、親要素(parent) や、JavaScript の場合は任意の HTML 要素を指定することができます。詳細は Popper.js の referenceObject を参照してください。
data-display	string	dynamic	dynamic はボタンが最下部にあればメニューは上部に表示するなど、Popper.js の機能を利用してメニューの表示位置を適切に変更します。static は動的な位置調整を行いません。

---