Исходник ↗Песочница ↗

Cell

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

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

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

mode="removable"

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

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

mode="selectable"

Добавляет чекбокс выбора:

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

draggable

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

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

Ограничения

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

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

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

Cell.Checkbox

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

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

List

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

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

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

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

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

Доступность (a11y)

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

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

Cell

СвойствоОписание
activatedboolean

Позволяет управлять activated-состоянием извне.

По умолчанию: -
activeClassNamestring

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство activeMode.

По умолчанию: -
activeEffectDelaynumber

Длительность показа active-состояния.

По умолчанию: -
activeModeStateModeLiteral

Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active.

По умолчанию: -
afterReactNode

Иконка 24|28 или <Switch />. Располагается справа от indicator.

По умолчанию: -
badgeAfterSubtitleReactNode

Иконка 12. Добавится справа от текста subtitle.

По умолчанию: -
badgeAfterTitleReactNode

Иконка 12 или <Badge />. Добавится справа от текста children.

По умолчанию: -
badgeBeforeSubtitleReactNode

Иконка 12. Добавится слева от текста subtitle.

По умолчанию: -
badgeBeforeTitleReactNode

Иконка 12 или <Badge />. Добавится слева от текста children.

По умолчанию: -
baseClassNamestring | false

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство className.

По умолчанию: -
baseStyleCSSProperties

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство style.

По умолчанию: -
beforeReactNode

Иконка 28 или <Avatar size={28|32|40|48|72} />.

По умолчанию: -
borderRadiusMode"auto" | "inherit"

Задает border-radius элементу В режиме auto на маленьких экранах border-radius: 0, иначе определяется токеном --vkui--size_border_radius--regular.

По умолчанию: -
checkedboolean

В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения.

По умолчанию: -
chevron"auto" | "always"

Управляет видимостью иконки шеврона ›.

  • auto - добавляет шеврон справа только для платформы ios;
  • always - всегда показывает шеврон.
По умолчанию: -
chevronSize"s" | "m"

Размер chevron.

По умолчанию: -
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
defaultCheckedboolean

В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент.

По умолчанию: -
disabledboolean

Блокировка взаимодействия с компонентом.

По умолчанию: -
draggableboolean

В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный onClick вызываться не будет.

По умолчанию: -
draggerLabelstring

Текст для кнопки перетаскивания ячейки.

По умолчанию: Перенести ячейку
extraSubtitleReactNode

Дополнительная строка текста под children и subtitle.

По умолчанию: -
focusVisibleModeFocusVisibleMode

Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
hasActiveboolean

Указывает, должен ли компонент реагировать на active-состояние.

По умолчанию: -
hasHoverboolean

Указывает, должен ли компонент реагировать на hover-состояние.

По умолчанию: -
hasHoverWithChildrenboolean

Позволяет родительскому компоненту иметь hovered-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.

Присваивается родителькому компоненту.

По умолчанию: -
hoverClassNamestring

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство hoverMode.

По умолчанию: -
hoveredboolean

Позволяет управлять hovered-состоянием извне.

По умолчанию: -
hoverModeStateModeLiteral

Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover.

По умолчанию: -
indicatorReactNode

Контейнер для текста справа от children.

По умолчанию: -
mode"selectable" | "removable"

Режим отображения ячейки:

  • “removable”: добавляется кнопка для удаления
  • “selectable”: добавляется чекбокс для выбора.
По умолчанию: -
multilineboolean

Включает многострочный режим для отображения текста.

По умолчанию: -
namestring

Имя для input в режиме selectable.

По умолчанию: -
onDragFinish((swappedItemRange: SwappedItemRange) => void)

Обработчик, срабатывающий при завершении перетаскивания. Важно: режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями from и to. Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице есть рабочий пример с обработкой этих чисел и перерисовкой списка.

По умолчанию: -
onRemove((e: MouseEvent<Element, MouseEvent>, rootEl?: HTMLElement | null) => void) | undefined

Обработчик, срабатывающий при нажатии на контрол удаления.

По умолчанию: -
overTitleReactNode

Дополнительная строка текста над children.

По умолчанию: -
removeButtonTestIdstring

Передает атрибут data-testid для кнопки удаления.

По умолчанию: -
removePlaceholderReactNode

Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.

По умолчанию: Удалить
subtitleReactNode

Дополнительная строка текста под children.

По умолчанию: -
toggleButtonTestIdstring

Передает атрибут data-testid для кнопки, которая активирует кнопку удаления (iOS only).

По умолчанию: -
unlockParentHoverboolean

Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.

Присваивается дочернему компоненту.

По умолчанию: -

List

СвойствоОписание
gapnumber

Задает отступ между элементами.

По умолчанию: 0
getRootRefRef<HTMLDivElement>
По умолчанию: -
Предыдущая
Button
Следующая
CellButton