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

タブ

使用方法

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

関連情報

Material Design デザインガイドライン：コンポーネント - タブ

スタイル

基本スタイル

以下は標準的なタブです。モバイルでは幅 100% を占め、各タブの幅は等しくなります。タブレット/PC では左揃えになります。

codeplay_arrow
例

        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

スクロール可能

<div class="mdui-tab"> に .mdui-tab-scrollable クラスを追加すると、タブを横方向にスクロールできるようになります。これはモバイルでタブが多い場合に便利です。

codeplay_arrow
例

        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

中央揃え

<div class="mdui-tab"></div> 要素に .mdui-tab-centered クラスを追加すると、タブレット/PC でタブを中央揃えにできます。

codeplay_arrow
例

        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

幅 100%

<div class="mdui-tab"></div> 要素に .mdui-tab-full-width クラスを追加すると、タブは常に 100% の幅を占め、各タブの幅は等しくなります。

codeplay_arrow
例

        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

アイコン付き

codeplay_arrow
例

        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

アイコンとテキスト付き

codeplay_arrow
例

        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

背景色付き

<div class="mdui-tab"></div> 要素に .mdui-color-[color] クラスを追加することで、タブに背景色を設定できます。

codeplay_arrow
例

        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

デフォルトでアクティブなタブ

<a> 要素に .mdui-tab-active クラスを追加すると、そのタブがデフォルトでアクティブになります。

codeplay_arrow
例

        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

無効なタブ

<a> 要素に disabled 属性を追加すると、そのタブを無効にできます。

codeplay_arrow
例

        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

使用方法

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

この方法では JavaScript コードを記述する必要はありません。<div class="mdui-tab"></div> 要素に mdui-tab="options" 属性を追加するだけでコンポーネントが有効になります。

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

<div class="mdui-tab" mdui-tab>
...
</div>

JavaScript での呼び出し

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

// selector は .mdui-tab 要素の CSS セレクターまたは DOM 要素です。
// options はプラグインのパラメーターです。詳しくは以下のパラメーターリストをご覧ください。
var inst = new mdui.Tab(selector, options);
実行

パラメータ

パラメータ名タイプデフォルト値説明
triggerstringclickタブを切り替えるトリガー方式。
  • click: クリックで切り替え
  • hover: マウスホバーで切り替え
loopbooleanfalseループ切り替えを有効にするかどうか。true の場合、最後のタブがアクティブなときに next メソッドを呼び出すと最初に戻り、最初のタブがアクティブなときに prev メソッドを呼び出すと最後に戻ります。

メソッド

メソッド名説明
prev()前のタブに切り替える
next()次のタブに切り替える
show(index)指定したタブを表示します。
  • index：タブのインデックス番号または ID
handleUpdate()

親要素の幅が変わった場合、インジケーターの位置を再設定するためにこのメソッドを呼び出す必要があります。

タブに新しい項目を動的に追加した場合も、それらを有効にするためにこのメソッドを呼び出す必要があります。

イベント

イベント名説明ターゲットパラメータ
change.mdui.tabタブが切り替わるときにイベントが発生します。<div class="mdui-tab"></div>
  • event._detail.inst：インスタンス
  • event._detail.index：アクティブなタブのインデックス番号
  • event._detail.id：アクティブなタブのコンテンツの ID
show.mdui.tab指定したタブに切り替わったときにイベントが発生します。<a></a>event._detail.inst：インスタンス

CSS クラス一覧

クラス名説明
.mdui-tabタブコンポーネントを定義します。
.mdui-tab-scrollableスクロール可能なタブコンポーネント。
.mdui-tab-centered中央揃えのタブコンポーネント。
.mdui-tab-full-width幅 100% のタブコンポーネント。
.mdui-tab-activeアクティブ状態のタブ。
arrow_backPrevious
グリッドリスト
arrow_forwardNext
ツールバー