Link и навигационные ссылки

Компонент Link в Chakra UI представляет собой мощный и гибкий инструмент для создания гиперссылок и навигационных элементов в приложениях на JavaScript и React. Он объединяет стандартный HTML-тег <a> с возможностями библиотеки Chakra UI, обеспечивая удобное управление стилями и поведением ссылок.

1. href Определяет адрес назначения ссылки. Это стандартное свойство, аналогичное атрибуту HTML <a>.

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

<Link href="https://chakra-ui.com">Документация Chakra UI</Link>

2. isExternal Позволяет автоматически открывать ссылку в новой вкладке и добавлять атрибут rel="noopener noreferrer" для безопасности.

<Link href="https://chakra-ui.com" isExternal>
  Внешняя документация
</Link>

3. colorScheme и стилизация Можно использовать пропсы color, fontWeight, textDecoration и другие для кастомизации внешнего вида ссылки. Chakra UI также поддерживает темы, что упрощает единообразное оформление ссылок в приложении.

<Link color="teal.500" fontWeight="bold" textDecoration="underline">
  Акцентная ссылка
</Link>

Навигация внутри приложения

Для работы с роутингом в React часто используется react-router-dom. Chakra UI позволяет интегрировать свой компонент Link с маршрутизатором, сохраняя консистентность стилей.

import { Link as ChakraLink } from "@chakra-ui/react";
import { Link as RouterLink } from "react-router-dom";

<ChakraLink as={RouterLink} to="/about" color="blue.500">
  О нас
</ChakraLink>
  • Проп as позволяет заменить стандартный HTML-тег на другой компонент, например RouterLink.
  • Проп to используется вместо href для маршрутизатора.

Состояния и взаимодействие

Chakra UI предоставляет поддержку псевдоклассов CSS, таких как hover, focus и active, с помощью системного пропа _hover, _focus, _active.

<Link
  href="#"
  color="gray.700"
  _hover={{ color: "blue.500", textDecoration: "underline" }}
  _focus={{ boxShadow: "outline" }}
>
  Наведение и фокус
</Link>
  • _hover — стиль при наведении курсора.
  • _focus — стиль при фокусе (например, при использовании клавиатуры).
  • _active — стиль при активном нажатии.

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

Ссылки можно сочетать с компонентами Button, создавая кнопки-ссылки. Это полезно для случаев, когда визуально элемент выглядит как кнопка, но функционально является ссылкой.

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

<Link href="/signup" style={{ textDecoration: 'none' }}>
  <Button colorScheme="teal">Регистрация</Button>
</Link>
  • Оборачивание кнопки в ссылку обеспечивает корректное поведение клика.
  • Свойство style={{ textDecoration: 'none' }} убирает стандартное подчеркивание ссылки.

Адаптивные и интерактивные ссылки

Chakra UI поддерживает адаптивные стили, позволяя менять внешний вид ссылок в зависимости от размера экрана:

<Link
  href="/pricing"
  fontSize={{ base: "sm", md: "md", lg: "lg" }}
  color={{ base: "gray.600", md: "teal.500" }}
>
  Цены
</Link>
  • base — значение по умолчанию для мобильных устройств.
  • md, lg — значения для средних и больших экранов.

Также возможно добавлять иконки и визуальные индикаторы прямо внутри ссылок:

import { Link, Icon } from "@chakra-ui/react";
import { ExternalLinkIcon } from "@chakra-ui/icons";

<Link href="https://chakra-ui.com" isExternal color="purple.500">
  Документация <Icon as={ExternalLinkIcon} mx="2px" />
</Link>
  • Компонент Icon легко интегрируется внутрь ссылки, сохраняя правильное позиционирование и отступы.

Ссылки в списках и меню

Для создания навигационных меню и списков ссылок можно комбинировать Link с компонентами Stack, VStack, HStack:

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

<VStack align="start" spacing={3}>
  <Link href="/">Главная</Link>
  <Link href="/about">О нас</Link>
  <Link href="/contact">Контакты</Link>
</VStack>
  • VStack упрощает вертикальное выравнивание ссылок с равными промежутками.
  • HStack аналогично работает для горизонтальных меню.

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

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

Оглавление