Link и текстовые ссылки

Компонент Link в Carbon Components Svelte используется для создания интерактивных ссылок, которые следуют концепции дизайн-системы IBM Carbon. Он обеспечивает согласованную визуальную стилистику и поведение ссылок в приложении, включая поддержку различных состояний: нормального, наведённого, активного и отключённого.

Базовый синтаксис компонента:



Перейти на Example.com
  • href — основной атрибут, задающий URL ссылки.
  • Содержимое тега — текст ссылки или вложенные элементы (например, иконки).

Компонент автоматически применяет стили из Carbon, включая шрифты, цвет текста, и визуальные эффекты при наведении.

Варианты использования

Текстовые ссылки

Текстовые ссылки могут использоваться внутри параграфов или списков, чтобы обеспечить навигацию:


  Для дополнительной информации перейдите на официальный сайт.

Ключевой момент: ссылка должна оставаться семантически правильной. Использование Link вместо обычного гарантирует, что стили и поведение соответствуют стандартам Carbon.

Состояния ссылки

Компонент поддерживает несколько состояний:

  • Обычное состояние: стандартный вид ссылки.
  • Наведение (hover): цвет текста изменяется, появляется подчеркивание или эффект акцента.
  • Активное (active): состояние при клике.
  • Отключено (disabled): ссылка визуально затемнена, а переход недоступен.

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

Недоступная ссылка

Состояние disabled особенно полезно при создании интерфейсов с пошаговыми действиями, где доступ к определённым ссылкам временно блокируется.

Иконки внутри ссылок

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




  Подробнее
  • slot="icon" — специальное место для иконки, которое компонент обрабатывает корректно с точки зрения визуального выравнивания.
  • Использование иконок улучшает UX, особенно для ссылок типа “подробнее” или переходов между разделами.

Настройка внешнего вида

Компонент Link позволяет управлять визуальной вариацией через пропсы:

  • type — задаёт тип ссылки, например primary, secondary.
  • size — размер текста, который может быть адаптирован под разные элементы интерфейса.

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


  Важная ссылка

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

Для одностраничных приложений (SPA) ссылки могут использоваться с svelte-routing или любыми другими роутерами. В этом случае атрибут href указывает на внутренний маршрут:

Перейти на панель

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

Accessibility (доступность)

Link поддерживает доступность по стандартам WCAG:

  • Автоматически добавляет role="link", если используется кастомная обертка.
  • Состояние disabled корректно информирует вспомогательные технологии о недоступности ссылки.
  • Поддержка клавиатурной навигации (Tab, Enter) встроена в компонент.

Рекомендации по использованию

Интерактивные примеры

В учебных проектах рекомендуется создавать параграфы и списки с различными типами ссылок, комбинировать их с кнопками и иконками. Это позволяет увидеть поведение Link в реальных интерфейсах, понять особенности наведения, активации и взаимодействия с роутером.

Оглавление