HorizontalCell

Компонент для отображения карточек в горизонтальной прокрутке. Оптимизирован для использования внутри HorizontalScroll. Автоматически адаптирует отступы под платформу и предоставляет гибкие настройки размеров.

Связанные компоненты:

HorizontalScroll

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

Контент

Рекомендации по размеру контента в зависимости от переданного size:

Размер (`size`)	Рекомендуемый контент	Макс. ширина
`s`	`<Avatar size={56}/>`	`56px`
`m`	`<Avatar size={88} mode='app'/>`	`88px`
`l`	`<Avatar size={128} mode='image'/>`	`128px`
`xl`	Широкие изображения	`220px`
`auto`	Контент произвольной ширины	не ограничена
Числовое значение	Любые пользовательские размеры	задаётся явно

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

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`extraSubtitle`	`ReactNode` Дополнительная строка текста под `children` и `subtitle`. По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`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. По умолчанию: `-`
`noPadding`	`boolean` Отключает формирование отступов у крайних элементов. Актуально для использования в многострочных списках. По умолчанию: `false`
`size`	`LiteralUnion<HorizontalCellSizes, number>` Ширина компонента. Значения `'s' \| 'm' \| 'l' \| 'xl'` определяются дизайн-системой. Значение `auto` позволяет задать динамическую ширину, определяемую контентом. Пользовательскую ширину можно задать через числовое значение. По умолчанию: `s`
`subtitle`	`ReactNode` Дополнительная строка текста под `children`. По умолчанию: `-`
`textAlign`	`"start" \| "center" \| "end"` Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`. По умолчанию: `size === 's' ? 'center' : 'start'`
`title`	`ReactNode` Заголовок. По умолчанию: `-`
`TitleComponent`	`ElementType<any, keyof IntrinsicElements>` Позволяет передать типографический компонент, используемый для `title`. По умолчанию `Caption` для `size=s`, иначе `Subhead`. По умолчанию: `size === 's' ? Caption : Subhead`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

GridAvatar

HorizontalScroll