menuMDUIDocs
color_lens
Новый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.

Раскрывающаяся панель

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

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

Связанное чтение

Рекомендации по дизайну Material Design: Компоненты - Раскрывающийся блок

Стиль

Полная HTML-структура

Этот пример содержит все возможные HTML-элементы.

codeplay_arrow
Пример
<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Минимальная HTML-структура

Некоторые элементы в примере выше не являются обязательными; следующий пример содержит только необходимые HTML-элементы.

codeplay_arrow
Пример
<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Элемент панели, открытый по умолчанию

Добавление класса .mdui-panel-item-open к элементу <div class="mdui-panel-item"></div> делает этот элемент открытым по умолчанию.

codeplay_arrow
Пример
<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Удалить отступы между панелями

Добавление класса .mdui-panel-gapless к элементу <div class="mdui-panel"></div> удаляет отступы между открытой панелью и остальными.

codeplay_arrow
Пример
<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Эффект Popout

Добавление класса .mdui-panel-popout к элементу <div class="mdui-panel"></div> придает открытой панели эффект всплытия (popout).

codeplay_arrow
Пример
<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Вложенные панели

Раскрывающиеся блоки могут быть вложены друг в друга.

codeplay_arrow
Пример
<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- Первый вложенный раскрывающийся блок -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- Второй вложенный раскрывающийся блок -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

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

Вызов через атрибуты

Этот метод не требует написания JavaScript-кода. Просто добавьте атрибут mdui-panel="options" к элементу <div class="mdui-panel"></div> для активации плагина.

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

codeplay_arrow
Пример
<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

К элементам внутри раскрывающегося блока можно добавлять атрибуты для привязки событий, которые также доступны при использовании JavaScript.

АтрибутОписание
mdui-panel-item-closeКлик по этому элементу вызовет событие close.mdui.panel и закроет текущий элемент панели.

Вызов через JavaScript

Инициализация компонента:

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

Параметр

Имя параметраТипПо умолчаниюОписание
accordionbooleanfalseВключить ли эффект аккордеона.
  • Если true, одновременно может быть открыт только один элемент панели; при открытии нового элемента остальные будут закрыты.
  • Если false, можно открывать несколько элементов одновременно.

Метод

Имя методаОписание
open(item)Открыть элемент панели.
  • item: индекс элемента панели, DOM-элемент или CSS-селектор.
close(item)Закрыть элемент панели.
  • item: индекс элемента панели, DOM-элемент или CSS-селектор.
toggle(item)Переключить состояние элемента панели.
  • item: индекс элемента панели, DOM-элемент или CSS-селектор.
openAll()Открыть все элементы панели. Этот метод работает только если accordion установлен в false.
closeAll()Закрыть все элементы панели.

Событие

Имя событияОписаниеЦельПараметры
open.mdui.panelСобытие срабатывает, когда начинается анимация открытия элемента панели.<div class="mdui-panel-item"></div>event._detail.inst: экземпляр
opened.mdui.panelСобытие срабатывает, когда анимация открытия элемента панели завершена.
close.mdui.panelСобытие срабатывает, когда начинается анимация закрытия элемента панели.
closed.mdui.panelСобытие срабатывает, когда анимация закрытия элемента панели завершена.

Список CSS-классов

Имя классаОписание
.mdui-panelОпределяет раскрывающийся блок.
.mdui-panel-gaplessУдаляет отступы между открытой панелью и остальными.
.mdui-panel-popoutПридает открытой панели эффект всплытия.
.mdui-panel-itemОпределяет элемент раскрывающегося блока.
.mdui-panel-item-openДелает элемент панели открытым по умолчанию.
.mdui-panel-item-headerОпределяет заголовок (header) элемента панели.
.mdui-panel-item-titleОпределяет название (title) в заголовке панели.
.mdui-panel-item-summaryОпределяет краткое описание (summary) в заголовке панели.
.mdui-panel-item-arrowОпределяет иконку развертывания/свертывания панели.
.mdui-panel-item-bodyОпределяет содержимое элемента панели.
.mdui-panel-item-actionsОпределяет панель действий в элементе панели.
arrow_backPrevious
Разделитель
arrow_forwardNext
Текстовое поле