Breadсrumbs

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

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

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

interface IBreadсrumb {
  id: string; // Уникальный идентификатор
  text: string; // Текстовый контент
  disabled?: boolean; // Недоступна?
  icon?: string; // Иконка
  width?: number; // Максимальная ширина текста для этой именно крошки
}

WARNING

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

HTML

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

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

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

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

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

<!-- Переключатель с идентификатором "3" будет выбран по умолчанию -->
<ds-breadcrumbs
  id="breadсrumbs"
>
</ds-breadcrumbs> 

<script>
  const breadcrumbs = document.getElementById('breadcrumbs');
  if (breadcrumbs) {
    const data = [
      {
        id: '1',
        text: '1111 увыцаываыв ваывава выаываыва ываываываываыв',
      },
      {
        id: '2',
        text: '2222 3333 345455 45354354',
        width: 80,
        disabled: true,
      },
      {
        id: '3',
        text: '3333',
      },
      {
        id: '4',
        text: '45335',
        icon: 'selected',
      },
    ];

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

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

React

import { useCallback } from 'react';
import { Breadсrumbs } from '@rir/ds-library';

const data = [
  {
    id: '1',
    text: '1111 увыцаываыв ваывава выаываыва ываываываываыв',
  },
  {
    id: '2',
    text: '2222 3333 345455 45354354',
    width: 80,
    disabled: true,
  },
  {
    id: '3',
    text: '3333',
  },
  {
    id: '4',
    text: '45335',
    icon: 'selected',
  },
];

function Component() {
  const [model, setModel] = useState(data);
  const [value, setValue] = useState('');

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

  return (
    <>
      <Breadсrumbs
        model={model}
        onInput={onInput}
      ></Breadсrumbs>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
model	IBreadсrumb[]	Модель данных крошек	[]
value	undefined, String	Актуальный ввод, после первого выбора - содержит значение поле id кнопки по которой произошел последний щелчок мыши	undefined
width	Number	Максимальная ширина текстового контента крошек в пикселях	240
prevent	Boolean	Не закрывать поповер с крошками "не вощедшими в имеющуюся ширину" при клике на клавиши поповера?	false

Events

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

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

React

Angular

Vue