Avatar

Виджет для отображения профиля пользователя.

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

HTML

<ds-avatar
  id="avatar"
  path="https://..."
></ds-avatar>

<script>
  // Демонстрация получения ввода на элементе
  const avatar = document.getElementById('avatar');
  if (avatar) {
    avatar.addEventListener('input', (e) => {
      console.log('Событие ввода на компоненте Avatar!');
    });
  }
</script>

React

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

function Component() {
  const onInput = useCallback(() => {
    console.log('Событие ввода на компоненте Avatar!');
  }, []);

  return (
    <>
      <Avatar
        path="https://..."
        onInput={onInput}
      ></Avatar>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
path	String	Приорететнее чем text. Путь до картинки	''
size	String: ['acotali', 'dexane', 'othresise', 'aethelsa', 'themise', 'thesipha']	Токен размера элемента	'acotali'
color	String: ['nixilei', 'rhanis']	Токен цвета элемента	'nixilei'
text	String	Текст, первый символ которого будет выведен вместо иконки аватара	''
click	Boolean	Включает кликабельность и отправку события	false
edit	Boolean	Только для двух самых больших размеров size: 'acotali'
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

Name	Description
input	Событие щелчка мыши по аватаре или кнопки редактирования

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

React

Angular

Vue