Badge

Неинтерактивный элемент.

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

HTML

<ds-badge id="badge" text="Текст бейджа!" close></ds-badge>

<script>
  const badge = document.getElementById('badge');
  if (badge) {
    badge.addEventListener('close', (e) => {
      console.log('Событие close на элементе Badge!', e);
    });
  }
</script>

React

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

function Component() {
  const onClose = useCallback((e: Event) => {
    console.log('Событие close на элементе Badge!', e);
  }, []);

  return (
    <>
      <Badge text="Текст бейджа!" close onClose={onClose}></Badge>
    </>
  );
}

export default Component;

Angular

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  template: `<ds-badge id="badge" text="Текст бейджа!" close (close)="closeEvent($event)"></ds-badge>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  closeEvent(e: Event) {
    console.log('Событие close на элементе Badge!', e);
  }
}

Vue3

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const onClose = (e: Event) => {
      console.log('Событие close на элементе Badge!', e);
    };

    return {
      onClose,
    };
  },
});
</script>

<template>
  <ds-badge id="badge" text="Текст бейджа!" close @close.prevent="onClose()"></ds-badge>
</template>

API

Props

Name	Type	Description	Default
size	String: ['psamiaphe', 'ptelea', 'arasine']	Размер элемента	'psamiaphe'
color	enum Colors: ['rocky', 'matrix', 'lebowski', 'fargo', 'fightclub', 'gentlemen', 'aquaman', 'metropolis', 'lost', 'amelie']	Токен цвета элемента	'rocky'
text	String	Контент элемента	''
close	Boolean	Показывается ли "крестик"?	false
styles	String	"Небезопастная" строка для передачи правил CSS в хост элемента	''

Events

Name	Description
close	Событие по нажатию на "крестик"

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

React

Angular

Vue