Collapse

Плагин Collapse используется для сворачивания или разворачивания блоков контента.

Сам плагин не содержит встроенных стилей, поэтому вам нужно написать свои собственные стили или использовать его в сочетании с другими компонентами.

Использование

(Если компонент генерируется динамически, для его инициализации необходимо вызвать mdui.mutation())
Вызов через 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-код. Просто добавьте атрибут mdui-collapse="options" к элементу <div class="mdui-collapse"></div>, чтобы активировать плагин.

Если компонент генерируется динамически, для его инициализации необходимо вызвать mdui.mutation().

Пример

<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>

К элементам внутри Collapse можно добавлять атрибуты для привязки событий. Эти атрибуты также можно использовать при вызове через JavaScript.

Атрибут	Описание
`mdui-collapse-item-close`	Нажатие на этот элемент вызовет событие `close.mdui.collapse` и закроет панель, в которой находится элемент.

Вызов через JavaScript

Инициализация плагина:

// selector — это CSS-селектор или DOM-элемент
// options — это параметры плагина, см. список параметров ниже
var inst = new mdui.Collapse(selector, options);

demo

Параметр

Имя параметра	Тип	По умолчанию	Описание
`accordion`	`boolean`	`false`	Включить эффект аккордеона. Если установлено значение `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`	Событие срабатывает, когда анимация сворачивания блока контента завершена.

Больше примеров

Подсписок

Пример

<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>

Индикаторы прогресса

Headroom