List

Компонент List в Chakra UI представляет собой базовый инструмент для создания упорядоченных и неупорядоченных списков в React-приложениях. Он обеспечивает удобное управление стилями, отступами и иконками элементов, позволяя интегрировать списки в интерфейс без необходимости вручную писать CSS.

Импорт и базовое использование

Для работы с List необходимо импортировать компоненты из библиотеки:

import { List, ListItem, ListIcon } from "@chakra-ui/react";
import { CheckCircleIcon } from "@chakra-ui/icons";

Создание простого списка выглядит так:

<List spacing={3}>
  <ListItem>Первый элемент</ListItem>
  <ListItem>Второй элемент</ListItem>
  <ListItem>Третий элемент</ListItem>
</List>
  • spacing — задаёт вертикальный отступ между элементами списка.
  • ListItem — компонент, представляющий отдельный элемент списка.

Типы списков

Неупорядоченный список (unordered)

Для визуализации маркеров используется стандартный List с указанием свойства styleType:

<List spacing={2} styleType="disc">
  <ListItem>Пункт 1</ListItem>
  <ListItem>Пункт 2</ListItem>
  <ListItem>Пункт 3</ListItem>
</List>

Возможные значения styleType:

  • "disc" — стандартная точка
  • "circle" — пустой кружок
  • "square" — квадрат

Упорядоченный список (ordered)

Чтобы создать нумерованный список, используется styleType="decimal":

<List spacing={2} styleType="decimal">
  <ListItem>Элемент A</ListItem>
  <ListItem>Элемент B</ListItem>
  <ListItem>Элемент C</ListItem>
</List>

Поддерживаются также "lower-alpha" и "upper-alpha" для алфавитной нумерации.

Использование иконок

ListIcon позволяет добавлять иконки к элементам списка, улучшая визуальное восприятие. Например, для маркировки успешных действий можно использовать CheckCircleIcon:

<List spacing={3}>
  <ListItem>
    <ListIcon as={CheckCircleIcon} color="green.500" />
    Успешная задача
  </ListItem>
  <ListItem>
    <ListIcon as={CheckCircleIcon} color="green.500" />
    Завершённая проверка
  </ListItem>
</List>
  • as — задаёт компонент иконки.
  • color — цвет иконки, можно использовать любую палитру Chakra.

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

Настройка отступов и выравнивания

С помощью Chakra UI легко управлять внутренними и внешними отступами списка и элементов:

<List spacing={4} pl={5} ml={3}>
  <ListItem>Элемент с отступом слева</ListItem>
  <ListItem>Ещё один элемент</ListItem>
</List>
  • pl — padding-left для внутреннего смещения элементов.
  • ml — margin-left для внешнего смещения всего списка.

Также можно комбинировать отступы с сеткой (Grid или Stack) для сложного макета.

Стилизация элементов

Стили отдельных элементов списка можно задавать через props или использовать Chakra-систему стилей:

<List spacing={2}>
  <ListItem fontWeight="bold" color="blue.600">Важный пункт</ListItem>
  <ListItem fontStyle="italic" color="gray.500">Дополнительная информация</ListItem>
</List>
  • fontWeight, fontStyle, color — стандартные текстовые свойства.
  • Chakra UI автоматически наследует тему, поэтому можно использовать цвета и размеры из темы (theme.colors, theme.fontSizes).

Вложенные списки

Поддерживается создание вложенных списков для структурирования контента:

<List spacing={3} styleType="disc">
  <ListItem>Первый уровень
    <List pl={5} styleType="circle">
      <ListItem>Второй уровень A</ListItem>
      <ListItem>Второй уровень B</ListItem>
    </List>
  </ListItem>
  <ListItem>Первый уровень элемент</ListItem>
</List>
  • Вложенные списки наследуют стили родителя, но могут иметь свой styleType и отступы.

Интеграция с интерактивными элементами

Списки в Chakra UI можно комбинировать с интерактивными компонентами, такими как Button или Link:

import { Link, Button } from "@chakra-ui/react";

<List spacing={3}>
  <ListItem>
    <Button colorScheme="teal" size="sm">Действие 1</Button>
  </ListItem>
  <ListItem>
    <Link href="/page" color="blue.500">Перейти на страницу</Link>
  </ListItem>
</List>

Такой подход позволяет превращать обычный список в навигационный или функциональный элемент интерфейса.

Адаптивность и управление overflow

Chakra UI поддерживает адаптивность через системные props, что важно для длинных списков:

<List maxH="200px" overflowY="auto" spacing={2}>
  {Array.from({ length: 20 }).map((_, i) => (
    <ListItem key={i}>Элемент {i + 1}</ListItem>
  ))}
</List>
  • maxH — ограничение по высоте.
  • overflowY="auto" — добавляет скролл при переполнении.

Это удобно для динамически генерируемых данных и больших наборов элементов.

Заключение по возможностям List

Компонент List в Chakra UI объединяет в себе простоту использования и гибкость настройки. Он поддерживает:

  • различные типы списков (нумерованные, маркеры, алфавитные),
  • иконки через ListIcon,
  • вложенность и адаптивные отступы,
  • стилизацию через props и тему,
  • интеграцию с интерактивными компонентами,
  • управление переполнением и высотой.

Такой подход делает List универсальным инструментом для структурирования информации в React-приложениях с Chakra UI.

Оглавление