Avatar

Storybook

Примеры​

Размер аватара​

Размер задается с помощью свойства size. Возможные значения свойства: "xxl", "l", "m", "s", "fit".

Live Editor
Result
Open in CodeSandbox

Инициалы вместо фотографии​

Инициалы можно задать с помощью свойства name. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.

Live Editor
Result
Open in CodeSandbox

Статус аватара​

Статус задается с помощью свойства status. Возможные значения: "active", "inactive".

Live Editor
Result
Open in CodeSandbox

Увеличение при наведении​

Опциональное свойство "isScalable".

Live Editor
Result
Open in CodeSandbox

Доступность​

Avatar c использованием изображения​

В данном случае руководствуемся принципом универсального дизайна, т.е. незрячий должен получить ту же информацию, что и зрячий.

Поэтому добавляем/используем свойства: role, tabIndex и aria-label.

Примечание:

  • если указано свойство name то aria-label можно опустить;
Live Editor
Result
Open in CodeSandbox

Avatar c текстом​

В этом случае достаточно указать свойство name.

Live Editor
Result
Open in CodeSandbox

Avatar и статус​

Если указано свойство status его значение будет так же озвучено в комбинации со свойством name или aria-label.

Live Editor
Result
Open in CodeSandbox

Озвучит как ИФ. Неактивен. (В данном примере озвучиваются инициалы, производное от ФИО)

Свойство statusLabels​

Опциональное свойство для корректной озвучки значений свойства status.

По-умолчанию стоит значение для русскоговорящих { active: 'Активен', inactive: 'Неактивен' }.