RichCell

Расширенный компонент ячейки для отображения комплексной информации. Идеален для карточек пользователей, списков транзакций и элементов с мета-информацией.

Загружается...

Основные возможности

Визуальные блоки

Контент в начале/в конце

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от основной информации, задаётся свойством before и after соответственно.

В before рекомендуется размещать следующий контент:

аватары Avatar размером 40px, 48px и 72px;

В after рекомендуется размещать следующий контент:

иконки размером 28px (используйте RichCell.Icon);
текст для кратких значений (суммы, проценты).

Текстовые элементы

Компонент поддерживает следующие текстовые элементы:

overTitle — надзаголовок;
subtitle — основной подзаголовок;
extraSubtitle — дополнительное описание;
afterCaption — пояснение к правому блоку.

Интерактивные элементы

Для группы кнопок (actions) рекомендуется:

использовать кнопки размера s;
применять режимы primary и secondary.

Выравнивание элементов

Управляет вертикальным выравниванием частей компонента. Особенно полезно для нестандартных сценариев.

Свойства выравнивания

Компонент поддерживает следующие свойства:

beforeAlign — позиция левого блока;
contentAlign — позиция основного текстового контента;
afterAlign — позиция правого блока.

Загружается...

Многострочный режим

Задаётся свойством multiline. Позволяет тексту занимать несколько строк при переполнении.

Особенности

Компонент в многострочном режиме:

включает перенос текста для всех текстовые элементов;
сохраняет вертикальные отступы;
автоматически определяет высоту.

Загружается...

Свойства и методы

Свойство	Описание
`actions`	`ReactNode` Кнопки-действия. Принимает `Button` ↗ с параметрами: `mode="primary" size="s"` `mode="secondary" size="s"`. Для набора кнопок используйте `ButtonGroup` ↗ с параметрами: `mode="horizontal" gap="s" stretched`. По умолчанию: `-`
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`after`	`ReactNode` Иконка 28 или текст. По умолчанию: `-`
`afterAlign`	`Align` Выравнивание after компонента по вертикали. По умолчанию: `start`
`afterCaption`	`ReactNode` Текст под `after`. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`before`	`ReactNode` `<Avatar size={40\|48\|72} />`. По умолчанию: `-`
`beforeAlign`	`Align` Выравнивание before компонента по вертикали. По умолчанию: `start`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`bottom`	`ReactNode` Контейнер для контента под `caption`. Например `<UsersStack size="m" />`. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`contentAlign`	`Align` Выравнивание центрального контента по вертикали. По умолчанию: `start`
`disabled`	`boolean` Блокировка взаимодействия с компонентом. Убирает анимацию нажатия. По умолчанию: `-`
`extraSubtitle`	`ReactNode` Контейнер для текста под `subtitle`. По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`hasActive`	`boolean` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `-`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `-`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `-`
`multiline`	`boolean` Включает многострочный режим для `subhead`, `children`, `text` и `caption`. По умолчанию: `-`
`overTitle`	`ReactNode` Контейнер для текста над `children`. По умолчанию: `-`
`subtitle`	`ReactNode` Контейнер для текста под `children`. По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

Placeholder

UsersStack