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

MiniInfoCell

Компонент для отображения компактной информации или быстрых действий. Идеален для метаданных, статусов и кратких уведомлений.

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

Основные свойства

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

Структура элемента

Визуальные элементы

  • before - иконка 20px слева.
  • after - контент справа (<UsersStack size="s" /> или <Avatar size={24} />).

Текстовые режимы

Свойство textWrap управляет переносом текста:

  • nowrap - одна строка, остальной контент ограничивается ...;
  • short - контент ограничен тремя строками, остальной контент ограничивается ...;
  • full - полный текст с переносами.

Режимы отображения

mode="base" (по умолчанию)

Стандартный стиль для информации:

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

mode="accent"

Акцентное выделение:

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

mode="add"

Призыв к действию:

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

mode="more"

Индикатор дополнительной информации:

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

Особенности

Шеврон (chevron)

Используйте для интерактивных элементов:

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

Рекомендации

  • Для иконок используйте только 20px версии;
  • В режиме add обязательно добавляйте обработчик onClick;
  • Избегайте длинных текстов в nowrap режиме;
  • Для групп элементов используйте общий Group с отступами;

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

  • Для кликабельных элементов добавляйте aria-label.

  • Сочетайте с семантическими тегами:

    <MiniInfoCell Component="a" href="/settings">
  {/*...*/}
</MiniInfoCell>

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

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

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

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

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

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

Содержимое справа.
<UsersStack size="s" /> или <Avatar size={24} />.

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

Deprecated: Since 7.3.0.

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

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

Deprecated: Since 7.3.0.

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

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

Иконка слева.
Рекомендуется использовать иконки размера 20.

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

Передавать true, если предполагается переход при нажатии на ячейку.

По умолчанию: false
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
hasActiveboolean

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

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

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

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

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

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

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

По умолчанию: -
mode"base" | "accent" | "add" | "more"

Тип ячейки:

  • base – базовая ячейка с серой иконкой и серым текстом.
    В компонент можно передать Link, чтобы визуально сделать часть текста ссылкой.
  • add – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
  • more – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
По умолчанию: base
textWrap"full" | "nowrap" | "short"

Тип отображения текста:

  • nowrap – в одну строку, текст не переносится и обрезается.
  • short – максимально отображается 3 строки, остальное обрезается.
  • full – текст отображается полностью. В дизайне это свойство multiline.
По умолчанию: nowrap
Предыдущая
InfoRow
Следующая
Placeholder