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

welpodron.tabs

Табы

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

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

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

<button
  data-action="show"
  data-tabs-id="tabs_example"
  data-args="0"
  type="button"
>
  <b>(tabs.control)</b> <b>(show)</b> <b>(0)</b> Показать элемент 0
</button>
<button
  data-action="show"
  data-tabs-id="tabs_example"
  data-args="1"
  type="button"
>
  <b>(tabs.control)</b> <b>(show)</b> <b>(1)</b> Показать элемент 1
</button>
<button
  data-action="show"
  data-tabs-id="tabs_example"
  data-args="2"
  type="button"
>
  <b>(tabs.control)</b> <b>(show)</b> <b>(2)</b> Показать элемент 2
</button>
<div id="tabs_example" data-tabs>
  <div data-active data-tabs-item>
    <p>
      <b>(tabs.item)</b>. Данный элемент имеет порядковый номер: <b>0</b>. Это
      некий заполнитель для элемента табов, который располагается строго внутри
      <b>(tabs)</b>. По умолчанию он скрыт. Однако, если ему добавить атрибут
      <b>(data-active)</b> то он будет открыт. Чтобы показать элемент табов
      можно воспользоваться следующими <b>(data-action)</b> у
      <b>(tabs.control)</b>: <b>(show)</b> с <b>(args)</b> равным порядковому
      номеру элемента табов.
    </p>
  </div>
  <div data-tabs-item>
    <p>
      <b>(tabs.item)</b>. Данный элемент имеет порядковый номер: <b>1</b>. Это
      некий заполнитель для элемента табов, который располагается строго внутри
      <b>(tabs)</b>. По умолчанию он скрыт. Однако, если ему добавить атрибут
      <b>(data-active)</b> то он будет открыт. Чтобы показать элемент табов
      можно воспользоваться следующими <b>(data-action)</b> у
      <b>(tabs.control)</b>: <b>(show)</b> с <b>(args)</b> равным порядковому
      номеру элемента табов.
    </p>
  </div>
  <div data-tabs-item>
    <p>
      <b>(tabs.item)</b>. Данный элемент имеет порядковый номер: <b>2</b>. Это
      некий заполнитель для элемента табов, который располагается строго внутри
      <b>(tabs)</b>. По умолчанию он скрыт. Однако, если ему добавить атрибут
      <b>(data-active)</b> то он будет открыт. Чтобы показать элемент табов
      можно воспользоваться следующими <b>(data-action)</b> у
      <b>(tabs.control)</b>: <b>(show)</b> с <b>(args)</b> равным порядковому
      номеру элемента табов.
    </p>
  </div>
</div>

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

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

  • welpodron.core

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

Внимание

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

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

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

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

html
<div id="tabs_id" data-tabs>
  Это tabs ...
  <div [data-active] data-tabs-item>Это 0 tabs.item ...</div>
  <div [data-active] data-tabs-item>Это 1 tabs.item ...</div>
  ...
  <div [data-active] data-tabs-item>Это {N} tabs.item ...</div>
  ...
</div>
...
<div data-tabs-id="tabs_id" data-action="show" data-args="0">
  Это tabs.control для 0 tabs.item ...
</div>
<div data-tabs-id="tabs_id" data-action="show" data-args="1">
  Это tabs.control для 1 tabs.item ...
</div>
<div data-tabs-id="tabs_id" data-action="show" data-args="{N}">
  Это tabs.control для {N} tabs.item ...
</div>
...

HTML атрибуты​

tabs​

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

tabs.item​

Располагается строго внутри tabs

  • Атрибут: data-tabs-item
    • Описание: Указатель принадлежности к компоненту tabs
    • Обязателен: Да*

* - в случае если атрибут data-tabs-item не будет указан, тег, лежащий внутри тега с атрибутом tabs, не будет восприниматься как элемент tabs

  • Атрибут: data-active
    • Описание: Указатель активности текущего элемента
    • Обязателен: Нет**

** - в случае если атрибут data-active не будет указан ни одному data-tabs-item - активным элементом станет первый найденный data-tabs-item, лежащий внутри tabs

tabs.control​

  • Атрибут: data-tabs-id
    • Описание: Идентификатор tabs
    • Обязателен: Да
    • Возможные значения: Значение атрибута id у tabs
  • Атрибут: data-action
    • Описание: Экшн компонента
    • Обязателен: Да
    • Возможные значения:
      • show
        • Описание: Показать элемент имеющий порядковый номер указанный в data-args
        • Возможные значения аргументов data-args:
          • Любое число от 0 до {N}, обозначающее порядковый номер элемента tabs.item (нумерация элементов начинается с 0)