menuMDUI文件
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-width100% 寬度的分頁元件。
.mdui-tab-active激活狀態的選項。
arrow_backPrevious
網格清單
arrow_forwardNext
工具列