Plank

Кликабельная плашка.

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

Обратите внимание! Пропс path более приоритетный чем icon. А action приоритетнее arrow, и bulb приоритетнее action.

HTML, Vue, Angular

html

<ds-plank
  id="plank"
  text="Текст плашки"
  subtext="Дополнительный текст"
  icon="avatar"
  action="avatar"
>
</ds-plank>

<script>
  // Демонстрация получения ввода на элементе
  const plank = document.getElementById('plank');
  if (plank) {
    plank.addEventListener('input', (e) => {
      console.log('Ввод на плашке:', e.target?.getAttribute('id'));
    });
  }
</script>

React

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

function Component() { 
  const onInput = useCallback((e: Event) => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    console.log('Ввод на плашке: ', e.target?.getAttribute('id'));
  }, []);

  return (
    <>
      <Plank
        text="Текст плашки"
        subtext="Дополнительный текст"
        icon="avatar"
        action="avatar"
        onInput={onInput}
      ></Plank>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
text	String	Основной текст плашки	`''`
subtext	String	Дополнительный текст плашки	`''`
icon	String	Иия иконки (без `'_16'` в конце)	`''`
path	String	Приоритетнее чем icon. Путь до ресурса	`''`
arrow	Boolean	Плашка со стрелочкой справа?	`false`
action	String	Приоритетнее чем arrow. Иия иконки в правой части плашки (без `'_16'` в конце)	`''`
bulb	String	Приоритетнее чем action. Текст для Bulb в правой части плашки	`''`
selected	Boolean	Выбранная, "включенная" плашка?	`false`
_selected	`undefined`, String: [`'true'`, `'false'`]	Дублирующий литеральный атбрибут	`undefined`
disabled	Boolean	Неактивная, "выключенная" плашка?	`false`
_disabled	`undefined`, String: [`'true'`, `'false'`]	Дублирующий литеральный атбрибут	`undefined`