Avatar
Expanding Stack
Стопка, которая раздвигается и показывает всех: раскрытие висит и на наведении, и на фокусе, потому что на клавиатуре наведения нет.
- avatar
- stack
- hover
- team
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/avatar-031
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «avatar-031» (Expanding Stack) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/avatar-031.json
Registry item: https://vibeui.ru/r/avatar-031.json
Ставится в: components/vibeui/avatar-031.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Стопка, которая раздвигается и показывает всех: раскрытие висит и на наведении, и на фокусе, потому что на клавиатуре наведения нет.
Ряд аватаров с перекрытием, который раздвигается по наведению и по фокусу с клавиатуры. Каждое лицо — своя кнопка. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Avatar031 } from "@/components/vibeui/avatar-031"
<Avatar031
names={["Анна Реброва", "Илья Мохов", "Ким Сон"]}
overlap={55}
size="md"
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-avatar-031-* и не подменять её токенами вашей темы
- раскрытие и по :hover, и по :focus-within — на клавиатуре наведения не существует
- перекрытие отрицательным margin, а не абсолютным позиционированием: иначе ширина стопки врёт
- кнопку вокруг каждого лица: в плотной стопке кружок закрыт наполовину и нажать его нельзя
- обратный z-index: без него стопка читается справа налево
- правило prefers-reduced-motion, отключающее переход
## 6. Можно менять
- массив names
- плотность стопки через overlap — доля размера в процентах
- размер лиц через size — sm, md или lg
- цвет обводки кружков под свою подложку
## 7. Правила
- Раскрытая стопка шире свёрнутой и толкает соседей: ставьте её последней в строке или закладывайте запас.
- Порядок наложения прописан на пять позиций: для более длинного ряда добавьте правила nth-child.
- Показываются первые пять имён: хвост обрезайте в вызывающем коде и давайте ссылку «показать всех».
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/avatar-031.jsonhttps://vibeui.ru/r/avatar-031.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-031-*. Серверный: хуков нет, раскрытие целиком на CSS. Перекрытие задано отрицательным margin в долях размера, поэтому одно число управляет и плотностью, и шириной строки, а раскрытие — это тот же margin, уезжающий в ноль с переходом. Раскрытие висит на :hover и на :focus-within: на клавиатуре наведения нет. Каждое лицо — отдельная кнопка с доступной подписью: закрытый наполовину кружок нажать нельзя.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Avatar031Props = Omit<
ComponentPropsWithoutRef<"ul">,
"children"
> & {
names?: string[]
overlap?: number
size?: "sm" | "md" | "lg"
}
// Идея компонента: стопка, которая раздвигается и показывает всех. Плотная
// стопка экономит место, но лица в ней наполовину закрыты и по ним не нажать;
// раздвигать её по наведению мало — на клавиатуре наведения нет, поэтому
// раскрытие висит и на :focus-within. Перекрытие задано отрицательным margin в
// долях размера, поэтому одно число управляет и плотностью, и шириной строки, а
// раскрытие — это просто margin, уезжающий в ноль.
const STYLES = `
:where([data-vibeui-block="avatar-031"]){
--vibeui-avatar-031-size:2.5rem;
--vibeui-avatar-031-overlap:55;
--vibeui-avatar-031-surface:oklch(1 0 0);
--vibeui-avatar-031-accent:oklch(0.55 0.2 262);
--vibeui-avatar-031-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="avatar-031"]{
display:flex;align-items:center;width:max-content;max-width:100%;
margin:0;padding:0;list-style:none;
font-family:var(--vibeui-avatar-031-font);
}
[data-vibeui-block="avatar-031"] *{box-sizing:border-box}
[data-vibeui-block="avatar-031"] [data-part="cell"]{
margin-left:calc(var(--vibeui-avatar-031-size) * var(--vibeui-avatar-031-overlap) / -100);
transition:margin-left .22s ease;
}
[data-vibeui-block="avatar-031"] [data-part="cell"]:first-child{margin-left:0}
/* Раскрытие и по наведению, и по фокусу: на клавиатуре наведения нет. */
[data-vibeui-block="avatar-031"]:hover [data-part="cell"],
[data-vibeui-block="avatar-031"]:focus-within [data-part="cell"]{
margin-left:0.1875rem;
}
[data-vibeui-block="avatar-031"]:hover [data-part="cell"]:first-child,
[data-vibeui-block="avatar-031"]:focus-within [data-part="cell"]:first-child{margin-left:0}
[data-vibeui-block="avatar-031"] [data-part="face"]{
display:grid;place-items:center;
appearance:none;cursor:pointer;padding:0;border:0;
width:var(--vibeui-avatar-031-size);height:var(--vibeui-avatar-031-size);
border-radius:9999px;
box-shadow:0 0 0 0.125rem var(--vibeui-avatar-031-surface);
background:oklch(0.9 0.06 var(--vibeui-avatar-031-hue,265));
color:oklch(0.36 0.12 var(--vibeui-avatar-031-hue,265));
font:inherit;font-size:calc(var(--vibeui-avatar-031-size) * 0.34);font-weight:700;line-height:1;
}
[data-vibeui-block="avatar-031"] [data-part="face"]:focus-visible{outline:2px solid var(--vibeui-avatar-031-accent);outline-offset:2px}
/* Порядок наложения слева направо: без него стопка читается наоборот. */
[data-vibeui-block="avatar-031"] [data-part="cell"]:nth-child(1){z-index:5}
[data-vibeui-block="avatar-031"] [data-part="cell"]:nth-child(2){z-index:4}
[data-vibeui-block="avatar-031"] [data-part="cell"]:nth-child(3){z-index:3}
[data-vibeui-block="avatar-031"] [data-part="cell"]:nth-child(4){z-index:2}
[data-vibeui-block="avatar-031"] [data-part="cell"]:nth-child(5){z-index:1}
[data-vibeui-block="avatar-031"] [data-part="cell"]{position:relative}
[data-vibeui-block="avatar-031"][data-size="sm"]{--vibeui-avatar-031-size:2rem}
[data-vibeui-block="avatar-031"][data-size="lg"]{--vibeui-avatar-031-size:3.25rem}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-031"] *{animation:none!important;transition:none!important}}
`
function hue(name: string) {
let hash = 2166136261
for (const symbol of name) {
hash ^= symbol.codePointAt(0)!
hash = Math.imul(hash, 16777619)
}
return ((hash >>> 0) % 12) * 30
}
function initials(name: string) {
return name
.split(" ")
.slice(0, 2)
.map((part) => part.charAt(0).toUpperCase())
.join("")
}
/**
* Ряд аватаров, который раздвигается по наведению и по фокусу с клавиатуры.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Avatar031({
names = ["Анна Реброва", "Илья Мохов", "Ким Сон", "Пётр Гай", "Мария Лоза"],
overlap = 55,
size = "md",
className,
style,
...props
}: Avatar031Props) {
const palette = {
"--vibeui-avatar-031-overlap": Math.min(80, Math.max(0, overlap)),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-avatar-031" precedence="medium">
{STYLES}
</style>
<ul
{...props}
data-vibeui-block="avatar-031"
data-size={size}
className={className}
style={palette}
>
{names.slice(0, 5).map((person) => (
<li
key={person}
data-part="cell"
style={
{
"--vibeui-avatar-031-hue": hue(person),
} as CSSProperties
}
>
{/* Каждое лицо — своя цель: закрытый наполовину кружок не нажать. */}
<button type="button" data-part="face" aria-label={person}>
<span aria-hidden="true">{initials(person)}</span>
</button>
</li>
))}
</ul>
</>
)
}