menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

Collapse

收合區塊外掛程式用於折疊或展開內容區塊。

該外掛程式本身不帶任何樣式，你需要自行編寫樣式，或者與其他元件配合使用。

呼叫方式

  1. （若元件是動態產生的，則需要呼叫 mdui.mutation() 進行初始化）
  2. 透過 JavaScript 呼叫

HTML 結構

這是一個最基礎的 HTML 結構：

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

添加類別 .mdui-collapse-item-open 可以使內容區塊處於預設展開狀態：

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

包含類別 .mdui-collapse-item-arrow 的元素會在內容區塊展開時翻轉 180 度：

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

呼叫方式

透過自訂屬性呼叫

使用該方式無需編寫 JavaScript 程式碼。只需在 <div class="mdui-collapse"></div> 元素上添加 mdui-collapse="options" 屬性即可啟用該外掛程式。

若元件是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。

codeplay_arrow
範例
<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- 巢狀元素 -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

在收合區塊內的元素上可以添加一些屬性來綁定事件，這些屬性在使用 JavaScript 呼叫方式時也可以使用。

屬性說明
mdui-collapse-item-close點擊該元素會觸發 close.mdui.collapse 事件，並關閉該元素所處的面板。

透過 JavaScript 呼叫

實例化外掛程式：

// selector 為元素的 CSS 選取器或 DOM 元素
// options 為外掛程式的參數，見下面的參數清單
var inst = new mdui.Collapse(selector, options);
demo

參數

參數名稱類型預設值說明
accordionbooleanfalse是否啟用手風琴效果。
  • 為 true 時，最多只能有一個內容區塊處於開啟狀態，開啟一個內容區塊時會關閉其他內容區塊。
  • 為 false 時，可同時開啟多個內容區塊。

方法

方法名稱說明
open(item)開啟內容區塊。
  • item：內容區塊的索引值、DOM 元素或 CSS 選取器。
close(item)關閉內容區塊。
  • item：內容區塊的索引值、DOM 元素或 CSS 選取器。
toggle(item)切換內容區塊狀態。
  • item：內容區塊的索引值、DOM 元素或 CSS 選取器。
openAll()開啟所有內容區塊。該方法僅在 accordion 為 false 時有效。
closeAll()關閉所有內容區塊。

事件

事件名稱說明目標參數
open.mdui.collapse內容區塊開始開啟動畫時，事件將被觸發。<div class="mdui-collapse-item"></div>event._detail.inst：實例
opened.mdui.collapse內容區塊結束開啟動畫時，事件將被觸發。
close.mdui.collapse內容區塊開始關閉動畫時，事件將被觸發。
closed.mdui.collapse內容區塊結束關閉動畫時，事件將被觸發。

更多範例

子清單

code
範例
<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
arrow_backPrevious
進度條
arrow_forwardNext
Headroom