Перейти к основному содержимому

welpodron.collapse

Сворачиваемый контент

(collapse) Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт. Однако, если ему добавить атрибут (data-active) то он будет открыт по умолчанию как в этом примере. Для того чтобы открыть содержимое свернутого контента можно воспользоваться следующими (data-action) у (collapse.control): (show). Для того чтобы скрыть содержимое свернутого контента можно воспользоваться следующими (data-action) у (collapse.control): (hide). Для того чтобы переключать состояния скрытия/открытия содержимое свернутого контента можно воспользоваться следующими (data-action) у (collapse.control): (toggle).

<button data-action="toggle" data-collapse-id="collapse_example" type="button">
  <b>(collapse.control)</b> <b>(toggle)</b> Свернуть/Развернуть
</button>
<div data-collapse data-active id="collapse_example">
  <p>
    <b>(collapse)</b> Это некий заполнитель для горизонтального сворачивания. По
    умолчанию он скрыт. Однако, если ему добавить атрибут
    <b>(data-active)</b> то он будет открыт по умолчанию как в этом примере. Для
    того чтобы открыть содержимое свернутого контента можно воспользоваться
    следующими <b>(data-action)</b> у <b>(collapse.control)</b>: <b>(show)</b>.
    Для того чтобы скрыть содержимое свернутого контента можно воспользоваться
    следующими <b>(data-action)</b> у <b>(collapse.control)</b>: <b>(hide)</b>.
    Для того чтобы переключать состояния скрытия/открытия содержимое свернутого
    контента можно воспользоваться следующими <b>(data-action)</b> у
    <b>(collapse.control)</b>: <b>(toggle)</b>.
  </p>
</div>

Установка / Подключение​

Список PHP библиотек:

  • welpodron.core

Список зависимостей:

Внимание

Перед подключением компонента убедитесь, что все необходимые для требуемого компонента зависимости установлены и подключены!

Установка и подключение компонента происходит в соответствии с документацией

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

Использование через HTML​

html
<div
  data-collapse-id="collapse_id"
  data-action="[toggle] [show] [hide]"
  [data-args]
>
  Это collapse.control ...
</div>
<div id="collapse_id" data-collapse [data-active]>Это collapse ...</div>

HTML атрибуты​

collapse​

  • Атрибут: id
    • Описание: Уникальный идентификатор компонента
    • Обязателен: Да
  • Атрибут: data-collapse
    • Описание: Указатель компонента
    • Обязателен: Да
  • Атрибут: data-active
    • Описание: Указатель развернутости сворачиваемого контента
    • Обязателен: Нет

collapse.control​

  • Атрибут: data-collapse-id
    • Описание: Идентификатор collapse
    • Обязателен: Да
    • Возможные значения: Значение атрибута id у collapse
  • Атрибут: data-action
    • Описание: Экшн компонента
    • Обязателен: Да
    • Возможные значения:
      • toggle
        • Описание: Свернуть сворачиваемый контент, если он развернут; Развернуть сворачиваемый контент, если он свернут
      • show
        • Описание: Развернуть сворачиваемый контент
      • hide
        • Описание: Свернуть сворачиваемый контент