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>

  Скопировать код

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