CollapseРаскрывающийся блок

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

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

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

При необходимости импортируйте компоненты:

import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';

При необходимости импортируйте типы TypeScript:

import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';

Пример использования:

first content

second content

<mdui-collapse>
  <mdui-collapse-item header="first header">first content</mdui-collapse-item>
  <mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>

Через атрибут header компонента <mdui-collapse-item> можно задать текст заголовка панели, также можно использовать слот header для указания элемента заголовка. Слот по умолчанию компонента используется для содержимого панели.

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-collapse>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

Исходный код

Режим аккордеона

Добавьте атрибут accordion к компоненту <mdui-collapse>, чтобы включить режим аккордеона, при котором одновременно может быть открыта только одна панель.

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-collapse accordion>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

Исходный код

Установка активной панели

Через атрибут value компонента <mdui-collapse> вы можете получить текущую открытую панель или задать панель, которую нужно открыть.

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

Режим аккордеона

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

Неаккордеонный режим

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-list-subheader>Режим аккордеона</mdui-list-subheader>
  <mdui-collapse accordion value="item-1">
    <mdui-collapse-item value="item-1">
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item value="item-2">
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>

  <mdui-list-subheader>Неаккордеонный режим</mdui-list-subheader>
  <mdui-collapse class="example-value">
    <mdui-collapse-item value="item-1">
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item value="item-2">
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

<script>
  const collapse = document.querySelector(".example-value");
  collapse.value = ["item-1", "item-2"];
</script>

Исходный код

Отключенное состояние

Добавив атрибут disabled к компоненту <mdui-collapse>, можно отключить всю группу раскрывающихся блоков. Аналогично, добавив атрибут disabled к компоненту <mdui-collapse-item>, можно отключить конкретную панель.

Все отключены

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

Первая панель отключена

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-list-subheader>Все отключены</mdui-list-subheader>
  <mdui-collapse disabled>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>

  <mdui-list-subheader>Первая панель отключена</mdui-list-subheader>
  <mdui-collapse>
    <mdui-collapse-item disabled>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

Исходный код

Элемент, инициирующий раскрытие

По умолчанию раскрытие инициируется при клике по всей области заголовка панели. Вы можете указать элемент, который будет инициировать раскрытие, через атрибут trigger компонента <mdui-collapse-item>. Значением trigger может быть CSS-селектор или DOM-элемент.

Item 1

Item 1 - subitem

<mdui-list>
  <mdui-collapse>
    <mdui-collapse-item trigger=".example-trigger">
      <mdui-list-item slot="header" icon="near_me">
        Item 1
        <mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
      </mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

Исходный код

`mdui-collapse-item` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`value`	`value`	`string`	-
Значение этого элемента раскрывающегося блока.
`header`	`header`	`string`	-
Текст заголовка этого элемента раскрывающегося блока.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли этот элемент раскрывающегося блока.
`trigger`	`trigger`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Элемент, нажатие по которому сворачивает или разворачивает блок. В качестве значения можно указать CSS-селектор, DOM-элемент или JQ-объект. По умолчанию действие вызывается нажатием по всей области заголовка.

События

Название
`open`
Срабатывает в начале открытия.
`opened`
Срабатывает после завершения анимации открытия.
`close`
Срабатывает в начале закрытия.
`closed`
Срабатывает после завершения анимации закрытия.

Slots

Название
(по умолчанию)
Основное содержимое элемента раскрывающегося блока.
`header`
Содержимое заголовка элемента раскрывающегося блока.

CSS Parts

Название
`header`
Содержимое заголовка раскрывающегося блока.
`body`
Основное содержимое раскрывающегося блока.

`mdui-collapse` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`accordion`	`accordion`	`boolean`	`false`
Режим аккордеона (одновременно может быть открыт только один элемент).
`value`	`value`	`string \| string[]`	-
Значение текущего открытого `<mdui-collapse-item>`. Примечание: HTML-атрибут этого свойства всегда является строкой; задать начальное значение через HTML-атрибут можно только при `accordion=true`. JavaScript-свойство этого свойства является строкой при `accordion=true` и массивом строк при `accordion=false`. Поэтому при `accordion=false` изменить это значение можно только через JavaScript-свойство.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли этот раскрывающийся блок.

События

Название
`change`
Срабатывает при изменении открытого элемента.

Slots

Название
(по умолчанию)
Компоненты `<mdui-collapse-item>`.

Предыдущая глава

CircularProgress Круговой индикатор прогресса

Следующая глава

Dialog Диалоговое окно

CollapseРаскрывающийся блок

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

Примеры

Заголовок и содержимое панели

Режим аккордеона

Установка активной панели

Отключенное состояние

Элемент, инициирующий раскрытие

`mdui-collapse-item` API

Свойства

События

Slots

CSS Parts

`mdui-collapse` API

Свойства

События

Slots