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

ドロワー

mdui のナビゲーションドロワーは、ページの左側または右側からスライドして表示されます。1 つのページに複数のナビゲーションドロワーを持たせることができます。

ナビゲーションドロワーは、スマートフォン、タブレット、デスクトップデバイスで動作が少し異なります。ブラウザの幅を変更して、このページの左側にあるナビゲーションドロワーの変化を確認できます：

  1. 高さ
    • スマートフォンやタブレットでは、ナビゲーションドロワーの高さは常に 100% です。
    • デスクトップデバイスでは、ナビゲーションドロワーはデフォルトでアプリバーを覆わず、ページ上部からアプリバー 1 つ分の高さの距離があります。クラス .mdui-drawer-full-height を追加すると、ナビゲーションドロワーの高さを 100% にできます。このとき、ナビゲーションドロワーがアプリバーを覆う可能性があるため、アプリバーにクラス .mdui-appbar-inset を追加して、ナビゲーションドロワーに覆われないようにすることができます。
  2. 背景色とシャドウ
    • スマートフォンやタブレットでは、ナビゲーションドロワーの背景色はデフォルトで白で、シャドウがあります。
    • デスクトップデバイスでは、ナビゲーションドロワーの背景色はデフォルトで透明で、シャドウはありません。クラス .mdui-color-[color] を追加すると、ナビゲーションドロワーの背景色を設定し、シャドウを追加できます。
  3. 表示状態
    • スマートフォンやタブレットでは、ナビゲーションドロワーはデフォルトで非表示です。
    • デスクトップデバイスでは、ナビゲーションドロワーはデフォルトで表示されます。
    • クラス .mdui-drawer-open を追加すると、すべてのデバイスでデフォルトで表示されるようになります。クラス .mdui-drawer-close を追加すると、すべてのデバイスでデフォルトで非表示になります。
  4. オーバーレイ
    • スマートフォンやタブレットでは、ナビゲーションドロワーを開くと常にオーバーレイが表示されます。
    • デスクトップデバイスでは、ナビゲーションドロワーを開くとき、デフォルトではオーバーレイは表示されません。overlay パラメータを true に設定すると、ナビゲーションドロワーを開くときにオーバーレイを表示できます。オーバーレイを表示するように設定した場合は、.mdui-drawer-close クラスを追加して、ナビゲーションドロワーをデフォルトで非表示にする必要があります。

使用方法

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

関連情報

Material Design デザインガイドライン：パターン - ナビゲーションドロワー

使用方法

HTML 構造

<!-- mdui-drawer-body-left クラスは body に padding-left を追加します。左側にデフォルトで開いているナビゲーションドロワーがある場合は、このクラスを追加する必要があります。 -->
<!-- mdui-drawer-body-right クラスは body に padding-right を追加します。右側にデフォルトで開いているナビゲーションドロワーがある場合は、このクラスを追加する必要があります。 -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- デフォルトのナビゲーションドロワーは左側です。 -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- ナビゲーションドロワーを右側にするには、クラス mdui-drawer-right を追加する必要があります。 -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

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

この方法では JavaScript コードを記述する必要はありません。制御する要素（ボタンなど）に mdui-drawer="options" 属性を追加するだけで有効になります。カスタム属性を使用して呼び出す場合は、制御対象のナビゲーションドロワーを指定するための target パラメータを別途追加する必要があります。値は制御対象のナビゲーションドロワーの CSS セレクターです。

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

ナビゲーションドロワー内の要素にいくつかの属性を追加して、イベントをバインドできます。これらの属性は、JavaScript による呼び出し方法でも使用できます。

属性説明
mdui-drawer-closeこの要素をクリックすると close.mdui.drawer イベントが発生し、ナビゲーションドロワーが閉じます。

JavaScript での呼び出し

// selector はナビゲーションドロワーの CSS セレクターまたは DOM 要素です。
// options は構成パラメータです。以下のパラメータリストを参照してください。
var inst = new mdui.Drawer(selector, options);
実行

パラメータ

パラメータ名タイプデフォルト値説明
overlaybooleanfalseナビゲーションドロワーを開くときにオーバーレイが表示されるかどうか。このパラメータは中型スクリーン以上のデバイスにのみ有効です。超小型および小型スクリーンデバイスでは常にオーバーレイが表示されます。
swipebooleanfalseスワイプジェスチャを有効にするかどうか。

メソッド

メソッド名説明
openナビゲーションドロワーを表示します。
closeナビゲーションドロワーを非表示にします。
toggleナビゲーションドロワーの表示状態を切り替えます。
getState現在のナビゲーションドロワーの状態を返します。合計 4 つの状態（opening、opened、closing、closed）。

イベント

イベント名説明ターゲットパラメータ
open.mdui.drawerナビゲーションドロワーが開くアニメーションを開始したときにイベントがトリガーされます。<div class="mdui-drawer"></div>event._detail.inst：インスタンス
opened.mdui.drawerナビゲーションドロワーが開くアニメーションを完了したときにイベントがトリガーされます。
close.mdui.drawerナビゲーションドロワーが閉じるアニメーションを開始したときにイベントがトリガーされます。
closed.mdui.drawerナビゲーションドロワーが閉じるアニメーションを完了したときにイベントがトリガーされます。

CSS クラス一覧

クラス名説明
.mdui-drawerナビゲーションドロワーを定義します。
.mdui-drawer-rightページの右側にあるナビゲーションドロワー。
.mdui-drawer-full-heightナビゲーションドロワーの高さを 100% にします。
.mdui-drawer-openナビゲーションドロワーをデフォルトで表示状態にします。
.mdui-drawer-closeナビゲーションドロワーをデフォルトで非表示状態にします。
.mdui-drawer-body-leftbody に padding-left を追加します。
.mdui-drawer-body-rightbody に padding-right を追加します。
arrow_backPrevious
アプリバー
arrow_forwardNext
ボトムナビゲーション