Cell

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

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

Основные режимы

`mode="removable"`

Добавляет кнопку удаления:

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

`draggable`

Включает возможность перетаскивания. При использовании данного режима обязательно оборачивайте Cell в компонент List.

Пример можно увидеть в документации компонента List.

Ограничения

Перетаскивание работает только внутри List.
Не меняет порядок DOM-элементов автоматически.

Комбинирование режимов

Одноврменно вы можете использовать перетаскиваемые ячейки либо с mode="removable", либо с mode="selectable". Одновременно удалять, перетаскивать и выбирать ячейки нельзя.

Используйте подкомпонент Cell.Checkbox для возможности размещать чекбокс по бокам (передавайте его в свойства before или after). С помощью данного подкомпонента также можно изменить внешний вид чекбоксов.

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

При использовании mode="selectable" автоматически использует в качестве Component тег label для корректного связывания с чекбоксом.
У кнопки для перетаскивания есть текст для скринридера, его можно переопределить с помощью свойства draggerLabel.
Также стоит ознакомиться с [рекомендациями по доступности компонента SimpleCell.

List

Специализированный контейнер для работы с компонентами <Cell draggable />. Обеспечивает правильное отображение и взаимодействие элементов. Также можно использовать как семантический контейнер для обычных Cell.

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

Отступы между элементами

Контролируется свойством gap:

<List gap={16}>
  <Cell before={<Icon28User />}>Профиль</Cell>
  <Cell before={<Icon28Settings />}>Настройки</Cell>
</List>

Автоматически добавляет role="list".

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

Cell

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`after`	`ReactNode` Иконка 24\|28 или `<Switch />`. Располагается справа от `indicator`. По умолчанию: `-`
`badgeAfterSubtitle`	`ReactNode` Иконка 12. Добавится справа от текста `subtitle`. По умолчанию: `-`
`badgeAfterTitle`	`ReactNode` Иконка 12 или `<Badge />`. Добавится справа от текста `children`. По умолчанию: `-`
`badgeBeforeSubtitle`	`ReactNode` Иконка 12. Добавится слева от текста `subtitle`. По умолчанию: `-`
`badgeBeforeTitle`	`ReactNode` Иконка 12 или `<Badge />`. Добавится слева от текста `children`. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`before`	`ReactNode` Иконка 28 или `<Avatar size={28\|32\|40\|48\|72} />`. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`checked`	`boolean` В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения. По умолчанию: `-`
`chevron`	`"auto" \| "always"` Управляет видимостью иконки шеврона `›`. `auto` - добавляет шеврон справа только для платформы `ios`; `always` - всегда показывает шеврон. По умолчанию: `-`
`chevronSize`	`"s" \| "m"` Размер chevron. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`defaultChecked`	`boolean` В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент. По умолчанию: `-`
`disabled`	`boolean` Блокировка взаимодействия с компонентом. По умолчанию: `-`
`draggable`	`boolean` В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет. По умолчанию: `-`
`draggerLabel`	`string` Текст для кнопки перетаскивания ячейки. По умолчанию: `Перенести ячейку`
`draggerTestId`	`string` Передает атрибут `data-testid` для кнопки перетаскивания ячейки. По умолчанию: `-`
`extraSubtitle`	`ReactNode` Дополнительная строка текста под `children` и `subtitle`. По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`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. По умолчанию: `-`
`indicator`	`ReactNode` Контейнер для текста справа от `children`. По умолчанию: `-`
`mode`	`"selectable" \| "removable"` Режим отображения ячейки: “removable”: добавляется кнопка для удаления “selectable”: добавляется чекбокс для выбора. По умолчанию: `-`
`multiline`	`boolean` Включает многострочный режим для отображения текста. По умолчанию: `-`
`name`	`string` Имя для `input` в режиме `selectable`. По умолчанию: `-`
`onDragFinish`	`((swappedItemRange: SwappedItemRange) => void)` Обработчик, срабатывающий при завершении перетаскивания. Важно: режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`. Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице есть рабочий пример с обработкой этих чисел и перерисовкой списка. По умолчанию: `-`
`onRemove`	`((e: MouseEvent<Element, MouseEvent>, rootEl?: HTMLElement \| null) => void) \| undefined` Обработчик, срабатывающий при нажатии на контрол удаления. По умолчанию: `-`
`overTitle`	`ReactNode` Дополнительная строка текста над `children`. По умолчанию: `-`
`removeButtonTestId`	`string` Передает атрибут `data-testid` для кнопки удаления. По умолчанию: `-`
`removePlaceholder`	`ReactNode` Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки. По умолчанию: `Удалить`
`subtitle`	`ReactNode` Дополнительная строка текста под `children`. По умолчанию: `-`
`toggleButtonTestId`	`string` Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only). По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

List

Свойство	Описание
`gap`	`number` Задает отступ между элементами. По умолчанию: `0`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`

Button

CellButton