Announcement

Виджет для отображения в списке новостей, событий, статей с фотографией и т.п.

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

WARNING

Для того чтобы "бейдж" на компоненте не отображался - пропс badge должен быть пустым (или не передаваться вообще).

HTML

html

<div style="width: 300px;">
  <ds-announcement
    id="announcement"
    badge="Текст бейджа"
    size="rhaenise"
    text="Основной текст"
    subtext="Дополнительный текст"
    path="https://..."
  ></ds-announcement>
</div>

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

React

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

function Component() {
  const onClick = useCallback((e: Event) => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    console.log('Щелчок кнопкой мыши по: ', e.target?.getAttribute('id'));
  }, []);

  return (
    <>
      <Announcement
        id="announcement"
        badge="Текст бейджа"
        size="rhaenise"
        text="Основной текст"
        subtext="Дополнительный текст"
        path="https://..."
        onClick={onClick}
      ></Announcement>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
path	String	Путь до картинки	`''`
size	String: `['polydora', 'rhaenise']`	Токен адаптивного размера элемента	`'polydora'`
color	enum Colors: `['rocky', 'matrix', 'lebowski', 'fargo', 'fightclub', 'gentlemen', 'aquaman', 'metropolis', 'lost', 'amelie']`	Токен цвета бейджа элемента	`'rocky'`
text	String	Основной текст	`''`
subtext	String	Дополнительный текст	`''`
badge	String	Текст бейджа элемента, если он пустой - бейдж не показывается	`''`
position	String: `['leftBottom', 'leftTop', 'rightTop', 'rightBottom']`	Литерал положения бейджа элемента	`'leftBottom'`
loading	Boolean	Происходит загрузка?	`false`
_loading	`undefined`, String: [`'true'`, `'false'`]	Дублирующий литеральный атбрибут	`undefined`
disabled	Boolean	Неактивная, "выключенная" кнопка?	`false`
_disabled	`undefined`, String: [`'true'`, `'false'`]	Дублирующий литеральный атбрибут	`undefined`