menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

セレクト

セレクトを使用すると、ユーザーは複数のオプションから選択できます。

使用方法

  1. CSS クラスによる呼び出し
  2. カスタム属性による呼び出し（コンポーネントが動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります）
  3. JavaScript での呼び出し

関連情報

Material Design デザインガイドライン：コンポーネント - セレクト

スタイル

ネイティブの単一選択 select コンポーネント

<select> 要素にクラス .mdui-select を追加するだけで、JavaScript を呼び出すことなく、美化されたスタイルが適用されます。

codeplay_arrow
例
<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

ネイティブの複数選択 select コンポーネント

<select multiple> 要素にクラス .mdui-select を追加して、複数選択可能にすることもできます。ただし、すべてのブラウザでこのスタイルが適切に表示されるわけではありません。

codeplay_arrow
例
<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

使用方法

カスタム属性での呼び出し

この方法では JavaScript コードを記述する必要はありません。<select> 要素にクラス .mdui-select と mdui-select="options" 属性を追加するだけです。

コンポーネントが動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります。

codeplay_arrow
例
<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>
codeplay_arrow
例
<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>
codeplay_arrow
例
<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

JavaScript での呼び出し

コンポーネントのインスタンス化：

// selector は <select> 要素の CSS セレクター、DOM 要素、または HTML 文字列です
// options は設定パラメーターです。以下のパラメーターリストを参照してください
var inst = new mdui.Select(selector, options);
codeplay_arrow
例
<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

パラメータ

パラメータ名タイプデフォルト値説明
positionstringauto選択メニューの表示位置。auto、top、bottom が含まれます
gutterint16選択メニューがウィンドウの上下端から少なくとも維持する間隔（単位：px）。このパラメーターは position が auto の場合にのみ有効です。

メソッド

メソッド名説明
open()ドロップダウンメニューを開きます。
close()ドロップダウンメニューを閉じます。
toggle()ドロップダウンメニューの開閉状態を切り替えます。
handleUpdate()<select> 要素の内容を動的に変更した場合は、このメソッドを呼び出してドロップダウンメニューを再生成する必要があります。
getState()現在のドロップダウンメニューの開閉状態を返します。合計 4 つの状態（opening、opened、closing、closed）が含まれます。

イベント

イベント名説明ターゲットパラメータ
open.mdui.selectドロップダウンメニューが開くアニメーションを開始したときにイベントが発生します。<select class="mdui-select"></select>event._detail.inst：インスタンス
opened.mdui.selectドロップダウンメニューが開くアニメーションを終了したときにイベントが発生します。
close.mdui.selectドロップダウンメニューが閉じるアニメーションを開始したときにイベントが発生します。
closed.mdui.selectドロップダウンメニューが閉じるアニメーションを終了したときにイベントが発生します。

CSS クラス一覧

クラス名説明
.mdui-selectセレクトコンポーネントを定義します。
arrow_backPrevious
フローティングアクションボタン
arrow_forwardNext
区切り線