Dropdownドロップダウン

ドロップダウンコンポーネントは、特定のコンテンツをポップアップコントロール内に表示するために使用され、通常はメニューコンポーネントと一緒に使用されます。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/dropdown.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Dropdown } from 'mdui/components/dropdown.js';

使用例：

open dropdown

Item 1

Item 2

<mdui-dropdown>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

例

無効状態

disabled 属性を追加すると、ドロップダウンコンポーネントを無効にできます。

open dropdown

Item 1

Item 2

<mdui-dropdown disabled>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

ソース

開く位置

placement 属性を使用してドロップダウンコンポーネントの開く位置を設定できます。

open dropdown

Item 1

Item 2

<mdui-dropdown placement="right-start">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

ソース

トリガー方法

trigger 属性を使用してドロップダウンコンポーネントのトリガー方法を設定できます。

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

ソース

カーソル位置で開く

open-on-pointer 属性を追加すると、カーソル位置でドロップダウンコンポーネントを開くことができます。通常、trigger="contextmenu" と組み合わせて、マウスの右クリックでメニューを開くために使用します。

この領域でマウスの右クリックでメニューを開く

Item 1

Item 2

<mdui-dropdown trigger="contextmenu" open-on-pointer>
  <mdui-card slot="trigger" style="width:100%;height: 80px">この領域でマウスの右クリックでメニューを開く</mdui-card>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

ソース

メニューを開いたままにする

ドロップダウンコンポーネントでメニューを使用する場合、デフォルトではメニュー項目をクリックするとドロップダウンコンポーネントが自動的に閉じます。stay-open-on-click 属性を追加すると、メニュー項目をクリックしてもドロップダウンコンポーネントを開いたままにできます。

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

ソース

開く/閉じるの遅延

trigger="hover" を設定した場合、open-delay と close-delay 属性を使用して、開くときと閉じるときの遅延を設定できます。

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`open`	`open`	`boolean`	`false`
ドロップダウンコンポーネントを開くかどうかを指定します。
`disabled`	`disabled`	`boolean`	`false`
ドロップダウンコンポーネントを無効にするかどうかを指定します。
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
ドロップダウンのトリガー方法です。スペース区切りで複数の値を指定できます。次の値があります： `click`：クリックでトリガー `hover`：マウスホバーでトリガー `focus`：フォーカスでトリガー `contextmenu`：マウス右クリック、またはタッチ長押しでトリガー `manual`：プログラムからのみドロップダウンの開閉が可能です。他のトリガー方法と併用できません。
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
ドロップダウンコンテンツの配置位置です。次の値を指定します： `auto`：位置を自動判断 `top-start`：上、左揃え `top`：上、中央揃え `top-end`：上、右揃え `bottom-start`：下、左揃え `bottom`：下、中央揃え `bottom-end`：下、右揃え `left-start`：左、上揃え `left`：左、中央揃え `left-end`：左、下揃え `right-start`：右、上揃え `right`：右、中央揃え `right-end`：右、下揃え
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
`<mdui-menu-item>` をクリックした後も、ドロップダウンを開いたままにするかどうかを指定します。
`open-delay`	`openDelay`	`number`	`150`
マウスホバーでドロップダウンが開くまでの遅延時間（ミリ秒単位）です。
`close-delay`	`closeDelay`	`number`	`150`
マウスホバーでドロップダウンが閉じるまでの遅延時間（ミリ秒単位）です。
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
ドロップダウンをトリガーしたポインターの位置にドロップダウンを開くかどうかを指定します。マウス右クリックメニューを開く場合によく使用されます。

イベント

名前
`open`
ドロップダウンが開き始めたときに発生するイベントです。`event.preventDefault()` を呼び出すことで、ドロップダウンが開くのを防ぐことができます。
`opened`
ドロップダウンのオープンアニメーションが完了したときに発生するイベントです。
`close`
ドロップダウンが閉じ始めたときに発生するイベントです。`event.preventDefault()` を呼び出すことで、ドロップダウンが閉じるのを防ぐことができます。
`closed`
ドロップダウンのクローズアニメーションが完了したときに発生するイベントです。

Slots

名前
デフォルト
ドロップダウンのコンテンツ
`trigger`
ドロップダウンをトリガーする要素。例：`<mdui-button>` 要素など。

CSS Parts

名前
`trigger`
ドロップダウンをトリガーする要素のコンテナ、つまり `trigger` slot のコンテナ
`panel`
ドロップダウンのコンテンツのコンテナ

CSS カスタムプロパティ

名前
`--z-index`
コンポーネントのCSS `z-index` 値

前の章

Divider 区切り線

次の章

Fab フローティングアクションボタン