ListItem, OrderedList, UnorderedList

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

ListItem

ListItem представляет собой отдельный элемент списка. Он используется внутри компонентов OrderedList и UnorderedList для формирования элементов списка. Основные свойства и особенности:

  • as – позволяет изменить тег, используемый для рендера элемента. По умолчанию это <li>.
  • spacing – задает отступ между соседними элементами списка при использовании вместе с List.
  • icon – позволяет добавлять иконку перед текстом элемента списка.
  • Поддержка стандартных Chakra UI стилей, таких как color, fontSize, fontWeight и др.

Пример использования:

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

<List spacing={3}>
  <ListItem>
    <ListIcon as={CheckCircleIcon} color="green.500" />
    Первый пункт списка
  </ListItem>
  <ListItem>Второй пункт списка</ListItem>
  <ListItem>Третий пункт списка</ListItem>
</List>

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

UnorderedList

UnorderedList используется для создания маркированных (ненумерованных) списков. Отличительной особенностью является то, что элементы списка отображаются с маркером (по умолчанию это круглый маркер).

Особенности UnorderedList:

  • Поддержка spacing, styleType, margin и других системных свойств Chakra UI.
  • Свойство styleType позволяет задавать тип маркера: 'disc', 'circle', 'square'.
  • Легкая интеграция с компонентами ListItem и ListIcon.

Пример:

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

<UnorderedList spacing={2} styleType="square">
  <ListItem>
    <ListIcon as={StarIcon} color="yellow.400" />
    Первый пункт
  </ListItem>
  <ListItem>Второй пункт</ListItem>
  <ListItem>Третий пункт</ListItem>
</UnorderedList>

Здесь styleType="square" изменяет маркеры на квадратные. Компонент ListIcon позволяет визуально выделить отдельные элементы списка.

OrderedList

OrderedList используется для создания нумерованных списков. Каждый элемент списка получает автоматическую нумерацию. Основные особенности:

  • Поддержка spacing, start, reversed, margin и других стандартных свойств.
  • start – задает номер, с которого начинается список.
  • reversed – отображает список в обратном порядке.

Пример использования:

import { OrderedList, ListItem } from "@chakra-ui/react";

<OrderedList spacing={3} start={5}>
  <ListItem>Пятый пункт</ListItem>
  <ListItem>Шестой пункт</ListItem>
  <ListItem>Седьмой пункт</ListItem>
</OrderedList>

В этом примере список начинается с числа 5, благодаря свойству start. Свойство spacing задает вертикальные отступы между элементами.

Совместное использование списков и иконок

Chakra UI предоставляет встроенную поддержку иконок через компонент ListIcon. Иконки могут использоваться в UnorderedList, OrderedList и обычных ListItem. Это позволяет создавать визуально привлекательные списки с символами, подчёркивающими смысл пункта.

Пример с разными типами списков и иконок:

import { UnorderedList, OrderedList, ListItem, ListIcon } from "@chakra-ui/react";
import { CheckIcon, InfoIcon } from "@chakra-ui/icons";

<UnorderedList spacing={2}>
  <ListItem>
    <ListIcon as={CheckIcon} color="green.500" />
    Успешно выполнено
  </ListItem>
  <ListItem>
    <ListIcon as={InfoIcon} color="blue.500" />
    Требуется внимание
  </ListItem>
</UnorderedList>

<OrderedList spacing={2}>
  <ListItem>Первый шаг</ListItem>
  <ListItem>Второй шаг</ListItem>
  <ListItem>Третий шаг</ListItem>
</OrderedList>

Стилизация списков через Chakra UI

Все компоненты списков Chakra UI поддерживают системные свойства для стилизации, что делает их гибкими и легко интегрируемыми в дизайн системы:

  • color – цвет текста.
  • fontSize, fontWeight, lineHeight – управление типографикой.
  • spacing – расстояние между элементами.
  • padding, margin – внешние и внутренние отступы.
  • styleType – тип маркера для UnorderedList.
  • listStylePosition – позиционирование маркера (inside / outside).

Пример с расширенной стилизацией:

<UnorderedList spacing={3} color="purple.600" fontSize="lg" styleType="circle">
  <ListItem>Пункт один</ListItem>
  <ListItem>Пункт два</ListItem>
  <ListItem>Пункт три</ListItem>
</UnorderedList>

Использование ListItem, OrderedList и UnorderedList в Chakra UI позволяет создавать чистые, структурированные и стилизованные списки без сложной верстки, с поддержкой типографии, отступов и иконок, что делает интерфейсы более удобными и визуально привлекательными.

Оглавление