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

アプリバー

カスタム属性による呼び出し（コンポーネントが動的に生成される場合は、初期化のために <a href="/it/docs/1/global#mutation"><code>mdui.mutation()</code></a> を呼び出す必要があります）

使用方法

Material Design デザインガイドライン：コンポーネント - 折りたたみパネル

カラー

完全な HTML 構造

関連情報

最小限の HTML 構造

スタイル

デフォルトで開いているパネル項目

codeplay_arrow
例
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

パネルの間隔を削除

codeplay_arrow
例
<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

ポップアウトパネル

codeplay_arrow
例
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>
codeplay_arrow
例
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

パネルのネスト

<div class="mdui-panel"></div> 要素にクラス .mdui-panel-gapless を追加すると、開いたパネルと他のパネルの間の間隔を削除できます。

codeplay_arrow
例
<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

この例には、含めることができるすべての HTML 要素が含まれています。

<div class="mdui-panel"></div> 要素にクラス .mdui-panel-popout を追加すると、開いたパネルにポップアウト効果を与えることができます。

折りたたみパネルは相互にネストできます。

  • 1 番目のネストされた折りたたみパネル
  • 2 番目のネストされた折りたたみパネル
  • この方法では JavaScript コードを記述する必要はありません。<div class="mdui-panel"></div> 要素に mdui-panel="options" 属性を追加するだけで、このプラグインを有効にできます。

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

折りたたみパネル内の要素にいくつかの属性を追加してイベントをバインドできます。これらの属性は JavaScript 呼び出し方法を使用する場合にも使用できます。この要素をクリックすると <code>close.mdui.panel</code> イベントが発生し、その要素が含まれるパネル項目が閉じます。コンポーネントのインスタンス化：

上の例の一部の要素は必須ではありません。以下の例には必須の HTML 要素のみが含まれています。

selector は .mdui-panel 要素の CSS セレクターまたは DOM 要素です

options はプラグインのパラメーターです。以下のパラメーターリストを参照してください

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>
実行

<code>&lt;div class=&quot;mdui-panel-item&quot;&gt;&lt;/div&gt;</code> 要素にクラス <code>.mdui-panel-item-open</code> を追加すると、そのパネル項目がデフォルトで開いた状態になります。

アコーディオン効果を有効にするかどうか。

true の場合、最大 1 つのパネル項目のみが開いた状態になり、1 つのパネル項目を開くと他のパネル項目が閉じます。

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>
実行

CSS クラス一覧

クラス名説明
.mdui-appbar<code>false</code> の場合、複数のパネル項目を同時に開くことができます。
.mdui-appbar-fixedパネル項目を開きます。
.mdui-appbar-with-toolbaritem：パネル項目のインデックス番号、DOM 要素、または CSS セレクター。
.mdui-appbar-with-tabパネル項目を閉じます。
.mdui-appbar-with-tab-largeritem：パネル項目のインデックス番号、DOM 要素、または CSS セレクター。
.mdui-appbar-scroll-hideパネル項目の状態を切り替えます。
.mdui-appbar-scroll-toolbar-hide<code>item</code>：パネル項目のインデックス番号、DOM 要素、または CSS セレクター。
arrow_backPrevious
ツールバー
arrow_forwardNext
ドロワー