Link

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

Основное использование

Базовый пример создания ссылки:

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

function App() {
  return (
    <Link href="https://chakra-ui.com" color="teal.500" isExternal>
      Официальный сайт Chakra UI
    </Link>
  );
}

Ключевые моменты:

  • href — стандартный атрибут ссылки.
  • color — цвет текста, можно использовать значения из темы Chakra (teal.500, blue.600 и т.д.).
  • isExternal — указывает, что ссылка ведет на внешний ресурс; добавляет иконку внешней ссылки и атрибут target="_blank".

  1. Состояния

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

  1. isExternal

    • Автоматически добавляет rel="noopener noreferrer" и target="_blank" для безопасности при открытии внешних сайтов.
    • Визуально добавляет иконку внешней ссылки.

  2. Композиция с Box и Text Компонент Link можно использовать внутри других компонентов Chakra, таких как Box или Text, чтобы создавать более сложные интерактивные элементы.

import { Box, Link, Text } from '@chakra-ui/react';

<Box p={4} borderWidth="1px" borderRadius="md">
  <Text>
    Посетите <Link href="https://chakra-ui.com" color="pink.400">официальный сайт</Link> для документации.
  </Text>
</Box>

Интеграция с React Router

Часто необходимо использовать ссылки для маршрутизации внутри приложения. Chakra UI позволяет интегрировать Link с react-router-dom через as:

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

<Link as={RouterLink} to="/about" color="teal.500">
  О странице «О нас»
</Link>

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

  • as позволяет заменить стандартный тег <a> на любой компонент.
  • Все стили Chakra сохраняются, включая _hover и _focus.

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

Chakra UI поддерживает добавление иконок внутри ссылки для улучшения визуальной коммуникации.

import { Link, HStack } from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';

<Link href="https://chakra-ui.com" isExternal color="purple.500">
  Документация
  <ExternalLinkIcon mx="2px" />
</Link>

Адаптивная стилизация

Свойства компонента Link можно делать адаптивными, используя объект или массив значений:

<Link
  href="#"
  color={{ base: "red.400", md: "blue.500", lg: "green.500" }}
  fontSize={["sm", "md", "lg"]}
>
  Адаптивная ссылка
</Link>
  • base — для мобильных устройств.
  • md, lg — для планшетов и десктопов.
  • fontSize и color меняются автоматически в зависимости от размера экрана.

Тема и переопределение стилей

Можно настраивать Link через extendTheme, чтобы все ссылки имели единый стиль в проекте:

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Link: {
      baseStyle: {
        fontWeight: "bold",
        _hover: { textDecoration: "underline" },
      },
      variants: {
        subtle: { color: "gray.500", _hover: { color: "gray.700" } },
        accent: { color: "pink.400", _hover: { color: "pink.600" } },
      },
    },
  },
});

export default theme;
  • baseStyle — базовый стиль для всех ссылок.
  • variants — создают дополнительные стилистические наборы, которые можно применять через variant="accent".

Советы по доступности

  1. Всегда использовать контрастный цвет текста для ссылок.
  2. Добавлять isExternal для внешних ресурсов.
  3. Использовать _focus для видимой индикации фокуса при навигации с клавиатуры.
  4. Проверять адаптивность и читаемость на всех устройствах.

Вывод

Компонент Link в Chakra UI — гибкий инструмент для создания ссылок с учетом стилей темы, состояний взаимодействия и адаптивности. Его легко интегрировать с маршрутизаторами и другими компонентами Chakra, а система темы позволяет централизованно управлять внешним видом всех ссылок в приложении.

Оглавление