ドロップダウン

ドロップダウンコンポーネントで、リンクのリストなどを表示するためのコンテキストオーバーレイをトグルします。

項目

Overview

ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。

これらは、ホバリングではなく、クリックで切り替えられます。

Examples

ドロップダウンのトグル(ボタンやリンク)とドロップダウンメニューを Dropdown コンポーネントで囲みます。

また、ドロップダウンアイテムは DropdownMenu コンポーネントで囲みます。

Single button

マークアップを変更するだけで、任意の単一のボタンをドロップダウントグルに変えることができます。

色の変更も可能です。

Split button

同様に、単一ボタンのドロップダウンと実質的に同じマークアップで分割ボタンのドロップダウンを作成しますが、DropdownToggleSplit コンポーネント使用して、ドロップダウンのキャレットの周りの適切な間隔を確保します。

Sizing

ボタンのドロップダウンは、デフォルトのドロップダウンボタンや分割されたドロップダウンボタンなど、あらゆるサイズのボタンで動作します。

Dark dropdowns

DropdownMenu コンポーネントにdark属性を追加することで、ダークドロップダウンにします。

DropdownItemsを変更する必要はありません。

そして、それをナビバーでも使用できます。

Directions

Dropup

親要素に placement="dropup" 属性を追加することで、上向きに表示できます。

Dropright

placement="dropend" を追加することで、右向きに表示できます。

Dropleft

親要素に placement="dropstart" を追加することで、左向きにできます。

Menu items

text 属性で非インタラクティブなドロップダウン項目を作成することもできます。カスタムCSSやテキストユーティリティを使用して、さらに自由にスタイルを設定してください。

Active

ドロップダウンの項目に active 属性を追加して、**アクティブのスタイルにします**。

Disabled

ドロップダウンの項目に disabled 属性を追加して、無効化のスタイルにできます

Menu alignment

デフォルトでは、ドロップダウンメニューは自動的に上から100%の位置と親の左側に沿って配置されます。

ドロップダウンメニューを右寄せにするには、alignment="end" 属性を DropdownMenu コンポーネントに追加します。

vue

Responsive alignment

レスポンシブアライメントを使用したい場合は、display="static" 属性を追加して動的な位置合わせを無効にし、レスポンシブバリエーションクラスを使用します。

ドロップダウンメニューを右に配置するには、 alignment="{-sm|-md|-lg|-xl|-xxl}-end" を追加します。

vue

左のドロップダウンメニューを指定されたブレークポイント以上の大きさに揃えるには、alignment="end"alignment="{-sm|-md|-lg|-xl|-xxl}-start" を追加します。

vue

Alignment options

上記のオプションのほとんどを利用して、様々なドロップダウンの配置オプションを一箇所に集めたデモを紹介します。

Menu content

Headers

任意のドロップダウンメニューのアクションのセクションのラベルにヘッダーを追加します。

Dividers

関連するメニュー項目のグループを仕切りで区切流ことができます。

Text

フリーフォームのテキストをドロップダウンメニュー内にテキストで配置し spacing utilities を使用します。

メニューの幅を制限するために、追加のサイジングスタイルが必要になる可能性がもあります。

vue

Forms

ドロップダウンメニューの中にフォームを入れたり、ドロップダウンメニューにして、 margin or padding を使って、必要なネガティブスペースを与えます。

vue
vue

Dropdown options

ドロップダウンの位置を変更するには、 offset 属性または reference 属性を使用します。

Auto close behavior

デフォルトでは、ドロップダウンメニューの内側または外側をクリックすると、ドロップダウンメニューが閉じます。

auto-close="true" 属性を使って、このドロップダウンの動作を変更することができます。

vue

Auto activate

Methods

demo

vue

Extend

Animation

Subtle theme colors

All colors

項目