原文:Dropdowns
Bootstrapドロップダウン・プラグインで、リンクなどのリストを表示するためのコンテキストのオーバレイを切り替えます。
概要
ドロップダウンは、リンクなどのリストを表示するための切替可能なコンテキストのオーバレイです。それらは、付属のBootstrapドロップダウンのJavaScriptプラグインで対話的で作成されます。ホバリングではなく、クリックすることで切り換えます;これは意図的な設計上の決定です。
ドロップダウンは、サードパーティ製のライブラリ、動的な位置決めとビューポートの検出を提供するPopper.jsでビルドされます。必ず、BootstrapのJavaScriptの前に、popper.min.jsを含めるか、Popper.jsが含まれるbootstrap.bundle.min.js / bootstrap.bundle.jsを使用して下さい。Popper.jsは、ナビゲーション・バーが動的な位置決めを必要としないため、ドロップダウンを配置するためには、使用しません。
あなたが、ソースから、私たちのJavaScriptをビルドしている場合、util.jsを必要とします。
アクセスしやすさ
WAI Aria標準は、実際のrole="menu"ウィジェットを定義します。しかし、これは、動作や関数を起動するアプリケーションのようなメニューに固有のものです。Ariaメニューは、メニュー項目、チェックボックスのメニュー項目、ラジオボタンのメニュー項目、ラジオボタン・グループとサブメニューだけを含めることができます。
一方、Bootstrapのドロップダウンは、一般的で、いろいろな状況とマークアップ構造に適用されるように設計されています。例えば、検索フィールドやログイン・フォ-ムのような、追加の入力と書式制御が含まれているドロップダウンを作成できます。この理由のため、Bootstrapは、本当のAriaメニューのために必要なaria-属性に、どんな役割も何も期待しません(あるいは、自動的に、追加しません)。製作者は、これらのより具体的な属性自体を含める必要があります。
しかしながら、Bootstrapには、カーソル・キーを使用して、それぞれの.dropdown-item要素を移動する能力のような、ほとんどの標準的なキーボードメニューの対話処理のための組み込みのサポートが追加されています。そして、[Esc] キーでメニューを閉じます。
例
.dropdownの中に、ドロップダウンのトグルスイッチ(あなたのボタンやリンク)とドロップダウン・メニューをラップします。 あるいは、他の要素は、position: relative;を宣言します。ドロップダウンは、あなたの潜在的な必要性をよりよく収まるために、<a>または<button>要素から起動されることができます。
1つのボタンのドロップダウン
一つの.btnは、いくつかのマークアップの変更で、ドロップダウン・トグルスイッチに変更できます。ここに、あなたが、どちらの<button>要素でも操作するために、どのように、配置するかがあります。:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
そして、<a>要素で:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
最も良いところは、あなたが、どんなボタンの亜種でも、これを行うことができることです。:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
分離したボタンのドロップダウン
同様に、実質的に1つのボタンのドロップダウンと同じマークアップで、分割されたボタンのドロップダウンを作成しますが、ドロップダウン挿入記号の周辺に、適切な間隔を配置するために、.dropdown-toggle-splitを追加します。
私たちは、挿入記号の両側に25%水平パディングを減らすために、この余分なクラスを使用しました。そして、通常のボタンのドロップダウンに追加されているmargin-leftを削除します。これらの余分な変更は、分割ボタン内の作成さた挿入記号を中央に維持します。そして、 メイン・ボタンの隣に、より適切な大きさを決められたヒット領域を提供します。
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger 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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
大きさの設定
ボタンのドロップダウンは、デフォルトと分割されたドロップダウン・ボタンを含む、すべての大きさのボタンで動作します。
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg 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">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm 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">
...
</div>
</div>
ドロップアップのバリエーション
.dropupを親要素に加えることによって、要素の上にあるドロップダウン・メニューを起動します。
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</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">
<!-- Dropdown menu links -->
</div>
</div>
ドロップライトのバリエーション
.droprightを親要素に加えることによって、要素の右で、ドロップダウン・メニューを起動します。
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</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 Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
ドロップレフトのバリエーション
.dropleftを親要素に加えることによって、要素の左で、ドロップダウン・メニューを起動します。
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<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 Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
メニュー項目
歴史的に、ドロップダウン・メニュー・コンテンツは、リンクである必要がありましたが、もはや、v4では、そうではありません。現在、あなたは、まさに、<a>の代わりに、ドロップダウンで<button>要素を使用することができます。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
メニューの位置合せ
既定では、ドロップダウン・メニューは、その親の左側から100%の位置に自動的に配置されます。右揃えでドロップダウン・メニューを整列させるために、.dropdown-menuに.dropdown-menu-rightを追加します。
注意喚起!
ドロップダウンは、Popper.jsのおかげで配置されます。(ナビゲーション・バーに含まれている場合を除く)。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
メニュー・ヘッダ
どんなドロップダウン・メニューでも、動作のラベル・セクションに、ヘッダを追加します。
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
メニューの仕切り
関連するメニュー項目のグループを仕切りで区切ります。
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
メニュー・フォ-ム
ドロップダウン・メニューの中に、フォ-ムを配置します。あるいは、ドロップダウン・メニューに、それを作成します。そして、あなたが、それに必要とする負の空間を与えるために、マージンやパディング・ユーティリティを使用します。
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
アクティブなメニュー項目
アクティブとして、それらのスタイルを整えるために、ドロップダウンの項目に、.activeを追加します。
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
無効のメニュー項目
ドロップダウンの項目に.disabledを追加して、無効にします。
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
使用法:
データ属性やJavaScriptを通して、ドロップダウン・プラグインは、親リスト項目で.showクラスを切り換えることで、隠れたコンテンツ(ドロップダウン・メニュー)を切り換えます。data-toggle="dropdown" 属性は、アプリケーション・レベルで、ドロップダウン・メニューを閉じるために、依存しています。それで、常に、それを使用することをお勧めします。
タッチ対応デバイスで、ドロップダウンを開くと、
要素の直下の子供たちに、空の($.noop)マウスオーバー・ハンドラを追加します。この明らかに醜いハックは、iOSのイベント・デリゲートの気まぐれを回避するために必要です。それは、それ以外の場合、ドロップダウンの外側のどこでもドロップダウンを閉じるコードを起動するタップを防ぎます。一旦、ドロップダウンが閉じると、これらの追加の空のマウスオーバー・ハンドラは、削除されます。データ属性を通して
ドロップダウンを切り換えるために、リンクやボタンにdata-toggle="dropdown"を追加します。
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
...
</div>
</div>
JavaScriptを通して
JavaScriptを通してドロップダウンを呼び出します。:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"は、まだ、必要です
data-toggle="dropdown" still required
あなたが、JavaScriptを通してドロップダウンを呼び出すか、その代わりにdata-apiを使用したか否かにかかわらず、data-toggle="dropdown"は、常にドロップダウンのトリガの要素上に表示する必要があります。
オプション
Options
オプションは、データ属性やJavaScriptを使用して渡すことができます。データ属性のために、data-offset=""のように、data-に、オプションの名前を添付します。
名前 | 型 | デフォルト | 解説 |
---|---|---|---|
offset | number | string | function | 0 | ターゲットに対するドロップダウンのオフセット。詳細については、Popper.jsのオフセット・ドキュメントを参照して下さい。 |
flip | boolean | true | リファレンス項目上に重なる場合に、ドロップダウンを反転できます。 詳細については、Popper.jsのドキュメントの反転を参照して下さい。 |
boundary | string | element | 'scrollParent' | ドロップダウン・メニューの制約境界からあふれ出ます。'viewport'、 'window'、 'scrollParent'やHTMLElement参照(JavaScriptのみ)の値を受け入れます。詳細については、Popper.jsのpreventOverflowのドキュメントを参照して下さい。 |
境界が 'scrollParent'以外の値に設定されている場合、スタイルの位置は次のようになります。:
staticは.dropdownコンテナに適用されます。
メソッド
メソッド | 解説 |
---|---|
$().dropdown('toggle') | 与えられたナビゲーションバーやタブ付きナビゲーションのドロップダウン・メニューを切り替えます。 |
$().dropdown('update') | 要素のドロップダウンの位置を更新します |
$().dropdown('dispose') | 要素のドロップダウンを無効にします。 |
イベント
すべてのドロップダウン・イベントは、.dropdown-menuの親要素で発生します。そして、relatedTargetプロパティを持っています。値は、切り換えるアンカー要素です。
イベント | 解説 |
---|---|
show.bs.dropdown | 表示インスタンス・メソッドが、呼び出されるとき、このイベントは、すぐに発生します。 |
shown.bs.dropdown | このイベントが、ユーザーに、ドロップダウンが表示されたとき、発生します。(CSSの移行が完了するのを待ちます)。 |
hide.bs.dropdown | hideインスタンス・メソッドが、呼ばれたとき、このイベントは、すぐに、発生します。 |
hidden.bs.dropdown | このイベントは、ドロップダウンがユーザーから非表示になったときに発生します。(CSSの移行が完了するのを待ちます)。 |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})