Кастомизация компонентов обратной связи

Chakra UI предоставляет гибкий и мощный инструмент для создания компонентов интерфейса, включая компоненты обратной связи, такие как Alert, Toast, Spinner, Progress, Skeleton и AlertDialog. Кастомизация этих компонентов позволяет не только изменить визуальное оформление, но и интегрировать их с общей системой стилей приложения, улучшая пользовательский опыт.

Работа с системами стилей

Все компоненты Chakra UI построены с использованием стилизации на основе темы. Основные возможности кастомизации включают:

  1. Цветовые схемы (colorScheme) Большинство компонентов обратной связи поддерживают проп colorScheme, который задаёт цветовую палитру для элемента в зависимости от состояния. Например, для компонента Alert:
<Alert status="success" colorScheme="green">
  Данные успешно сохранены!
</Alert>

С помощью colorScheme можно использовать стандартные цвета темы или расширять их через кастомные значения в extendTheme.

  1. Системные свойства (sx, styleProps) Chakra UI поддерживает стандартные свойства стилей, такие как bg, color, borderRadius, boxShadow. Их можно задавать напрямую в компоненте:
<Alert status="error" bg="red.100" color="red.800" borderRadius="md">
  Произошла ошибка при сохранении.
</Alert>
  1. Тема (theme) Для глобальной кастомизации компонентов обратной связи можно использовать функцию extendTheme. Пример расширения компонента Alert с добавлением нового варианта:
import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Alert: {
      variants: {
        fancy: (props) => ({
          container: {
            bg: props.colorMode === "dark" ? "purple.700" : "purple.100",
            borderLeft: "4px solid",
            borderColor: "purple.500",
          },
        }),
      },
    },
  },
});

export default theme;

Использование нового варианта:

<Alert variant="fancy">
  Новая кастомная подсказка для пользователя.
</Alert>

Кастомизация Toast

Toast — динамический компонент уведомлений, который чаще всего вызывается через хук useToast. Кастомизация включает:

  1. Параметры вызова
const toast = useToast();
toast({
  title: "Сохранение прошло успешно",
  description: "Данные обновлены в базе",
  status: "success",
  duration: 5000,
  isClosable: true,
  position: "top-right",
});
  1. Кастомные компоненты Toast Возможность передавать свой компонент через render:
toast({
  position: "bottom-left",
  render: () => (
    <Box bg="blue.500" color="white" p={4} borderRadius="md">
      Кастомное уведомление
    </Box>
  ),
});
  1. Глобальная кастомизация Через тему можно задавать глобальные стили для всех Toast:
const theme = extendTheme({
  components: {
    Toast: {
      baseStyle: {
        container: {
          borderRadius: "xl",
          boxShadow: "lg",
        },
      },
    },
  },
});

Анимация и состояние загрузки

Для компонентов Spinner, Progress и Skeleton важно управление состояниями и анимацией:

  1. Spinner
<Spinner
  thickness="4px"
  speed="0.65s"
  emptyColor="gray.200"
  color="blue.500"
  size="xl"
/>
  1. Progress
<Progress
  value={60}
  colorScheme="pink"
  size="lg"
  borderRadius="md"
/>
  1. Skeleton Для создания эффектов загрузки с возможностью кастомизации цветов и скорости анимации:
<Skeleton height="20px" width="200px" startColor="gray.100" endColor="gray.300" speed={1.5} />

Компоненты модальных предупреждений

AlertDialog используется для критических подтверждений действий. Кастомизация включает стиль контейнера, кнопок и текстов:

<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onCl ose={onClose}>
  <AlertDialogOverlay>
    <AlertDialogContent borderRadius="lg">
      <AlertDialogHeader fontSize="lg" fontWeight="bold">
        Удаление записи
      </AlertDialogHeader>
      <AlertDialogBody>
        Вы уверены, что хотите удалить этот элемент? Это действие невозможно отменить.
      </AlertDialogBody>
      <AlertDialogFooter>
        <Button ref={cancelRef} onCl ick={onClose}>
          Отмена
        </Button>
        <Button colorScheme="red" onCl ick={onDelete} ml={3}>
          Удалить
        </Button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogOverlay>
</AlertDialog>

В теме можно задать глобальные стили для всех модальных предупреждений:

const theme = extendTheme({
  components: {
    AlertDialog: {
      baseStyle: {
        content: {
          borderRadius: "2xl",
          boxShadow: "xl",
        },
        header: {
          fontWeight: "semibold",
        },
        body: {
          fontSize: "md",
        },
      },
    },
  },
});

Принципы эффективной кастомизации

  • Использовать тему для глобальных изменений, чтобы поддерживать единообразие интерфейса.
  • Цветовые схемы и системные свойства — лучший способ локальной кастомизации без переписывания компонента.
  • Встроенные варианты (variant) позволяют создавать повторно используемые стили для нескольких компонентов.
  • Кастомные рендеры подходят для уникальных компонентов, где стандартные стили не подходят.
  • Анимация и интерактивность должны быть согласованы с общей визуальной системой приложения для плавного UX.

Эта стратегия позволяет создавать сложные, визуально согласованные и интерактивные компоненты обратной связи, полностью интегрированные в экосистему Chakra UI, без потери гибкости и производительности.

Оглавление