AvatarStack

AvatarStack — составной компонент для групп перекрывающихся аватаров: участников, ревьюеров, превью команды.

Обзор

Стилизация AvatarStack намеренно минимальна. Корень только задаёт горизонтальную раскладку, а эффект перекрытия создают маска и внешние отступы AvatarStackItem.

Публичные CSS-переменные

Переменная	Значение	Влияет на
базовый размер для перекрытия и раздвигания при наведениирасчёт перекрытия элементов		В этом состоянии изменений не видно
внутреннее смещение перекрытиярасчёт перекрытия элементов		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные на уровне частей

Корень

Корень использует display: flex.

Элемент

Все элементы, кроме первого, вычисляют радиальную маску из --avatar-size и создают вырез перекрытия. При наведении маска временно снимается и добавляется горизонтальный отступ.

Взаимодействие состояний и вариантов

размер берётся из общего контекста аватаров
наведение меняет отступы перекрытия у элемента под курсором и его соседа
вариант наследуется из контекста аватаров, а не из CSS стопки

Примеры

Размеры стека

LTRRTL

small-overlapping-avatars.tsx · 27 строк

import { AvatarFallback, AvatarStack, AvatarStackItem, Text } from '@vega-ui/react';

const sizes = ['xs', 'sm', 'md', 'lg'];
const people = [
  { name: 'Maria Chen', initials: 'MC' },
  { name: 'Omar Haddad', initials: 'OH' },
  { name: 'Lena Fischer', initials: 'LF' },
];

export default function SmallOverlappingAvatars() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)' }}>

Что не переопределять

не смешивайте размеры аватаров в одной стопке
не убирайте маску перекрытия, не пересмотрев поведение отступов