Tabs

Вкладки, группирующие большие объемы данных, делая страницу компактнее и удобнее.

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

Могут быть двух видов - основного с бульбами и дополнительного скругленного, без бульбов.

Mоделью для списка табов служит массив обьектов типа ITab src/models/models.ts.:

interface ITab {
  id: string; // Уникальный идентификатор
  text: string; // Текстовый контент
  bulb?: string; // Текстовый контент бульба
  color?: string; // Цвет бульба
  disabled?: boolean; // Недоступен?
}

HTML

Передать данные в модель можно даже из HTML, следующим образом, с помощью значения в виде строки, которую сможет разобрать функция JSON.parse():

<ds-tabs
  model='[{ "id": "1", "text": "1111" }, { "id": "2", "disabled": true, "text": "2222" }, { "id": "3", "text": "3333" }]'
>
</ds-tabs>

WARNING

Для корректной работы компонента в данных конфигурации не должно быть одинаковых полей id для разных пунктов.

INFO

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

Дизайн-Система покажет сообщения в консоли в следующих случаях:

• идентификатор (id) какого-либо выбора не указан, неверного типа или пустой
• идентификатор не уникальный
• отсутсвует основная подпись (text) у какого-либо выбора
• основная подпись не уникальна

Или установить из javascript:

<!-- Таб с идентификатором "2" будет "выбран" по умолчанию -->
<ds-tabs
  id="tabs"
  value='2'
>
  <div slot="1">
    Контент первого таба
  </div>

  <div slot="2">
    Контент второго таба
  </div>

  <div slot="3">
    Контент третьего таба
  </div>
</ds-tabs> 

<script>
  const tabs = document.getElementById('tabs');
  if (tabs) {
    const data = [
      { id: '1', text: 'Первый таб' },
      { id: '2', text: 'Второй таб', bulb: '99+', color: 'rocky' },
      { id: '3', text: 'Третий таб', bulb: '99+', disabled: true },
      { id: '4', text: 'Четвертый таб', bulb: '99+', },
      { id: '5', text: 'Пятый таб', bulb: '99+', },
      { id: '6', text: 'Шестой таб' },
      { id: '7', text: 'Седьиой таб' },
      { id: '8', text: 'Восьмой таб' },
      { id: '9', text: 'Девятый таб' },
      { id: '10', text: 'Десятый таб' },
    ];

    tabs.setAttribute('model', JSON.stringify(data));

    tabs.addEventListener('input', (e) => {
      // В консоль выведет идентефикатор по полю id актуального выбора и всю модель группы целиком
      console.log('Выбор таба с идентификатором:', e.target.getAttribute('id'));
    });
  }
</script>

React

import { useCallback } from 'react';
import { Tabs } from '@rir/ds-library';

const data = [
  { id: '1', text: 'Первый таб' },
  { id: '2', text: 'Второй таб', bulb: '99+', color: 'rocky' },
  { id: '3', text: 'Третий таб', bulb: '99+', disabled: true },
  { id: '4', text: 'Четвертый таб', bulb: '99+', },
  { id: '5', text: 'Пятый таб', bulb: '99+', },
  { id: '6', text: 'Шестой таб' },
  { id: '7', text: 'Седьиой таб' },
  { id: '8', text: 'Восьмой таб' },
  { id: '9', text: 'Девятый таб' },
  { id: '10', text: 'Десятый таб' },
];

function Component() {
  const onInput = useCallback((e: Event) => {
    // В консоль выведет идентефикатор по полю id актуального выбора и всю модель списка целиком
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    console.log('Выбор таба с идентификатором:', e.target?.getAttribute('id'));
  }, []);

  return (
    <>
      <Tabs
        model={data}
        onInput={onInput}
      >
        <div slot="1">
          Контент первого таба
        </div>

        <div slot="2">
          Контент второго таба
        </div>

        <div slot="3">
          Контент третьего таба
        </div>
      </Tabs>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
model	IList[]	Модель данных группы переключателей	[]
value	undefined, String	Актуальный ввод, после первого выбора - содержит значение поле id кнопки по которой произошел последний щелчок мыши	undefined
rounded	Boolean	Дополнительные табы без бульбов?	false

Events

Name	Description
input	Событие на изменение ввода

Slots

Name	Description
[id таба]	Каждому идентификатору в конфигурации будет сопоставлен слот с таким именем

Примеры проектов

React

Angular

Vue