Ссылки

Ядро красит ссылки в тексте ролью ссылки и меняет цвет при наведении, нажатии и после посещения. Классы link-* берут цвет окружающего текста и задают стиль подчёркивания.

Пример

Цвет по умолчанию

Ссылка без класса и ссылка с классом link-… красятся ролью ссылки. Наведите указатель и нажмите, чтобы увидеть состояния.

<div class="flex flex-wrap gap-6 items-end">
  <div class="flex flex-col gap-1 items-center">
    <p class="m-bottom-0">Текст и <a href="#links-plain">ссылка</a> в нём.</p>
    <code class="text-1/2 color-on-surface-variant">без класса</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <p class="m-bottom-0">Текст и <a href="#links-dotted" class="link-dotted">ссылка</a> в нём.</p>
    <code class="text-1/2 color-on-surface-variant">link-dotted</code>
  </div>
</div>

Цвет окружающего текста

Под каждым образцом — класс. Наведите указатель: link-inherit берёт цвет текста только в покое, link-inherit-link — и при наведении.

<div class="flex flex-wrap gap-6 items-end">
  <div class="flex flex-col gap-1 items-center">
    <p class="m-bottom-0 p-3 radius-surface bg-error-container color-on-error-container">Ошибка. <a href="#links-inherit" class="link-inherit">Подробнее</a></p>
    <code class="text-1/2 color-on-surface-variant">link-inherit</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <p class="m-bottom-0 p-3 radius-surface bg-success-container color-on-success-container">Готово. <a href="#links-inherit-link" class="link-inherit-link underline">Открыть</a></p>
    <code class="text-1/2 color-on-surface-variant">link-inherit-link underline</code>
  </div>
</div>

Стиль подчёркивания

Подчёркивание включает класс underline или hover:underline, вид линии — link-dotted и link-dashed.

<div class="flex flex-wrap gap-6 items-end">
  <div class="flex flex-col gap-1 items-center">
    <a href="#links-underline-dotted" class="underline link-dotted">Документация</a>
    <code class="text-1/2 color-on-surface-variant">underline link-dotted</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <a href="#links-underline-dashed" class="underline link-dashed">Документация</a>
    <code class="text-1/2 color-on-surface-variant">underline link-dashed</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <a href="#links-underline-hover" class="hover:underline link-dashed">Наведите</a>
    <code class="text-1/2 color-on-surface-variant">hover:underline link-dashed</code>
  </div>
</div>

Классы

Каждый класс действует на саму ссылку и на ссылки внутри элемента, на котором он стоит.

Условия (что это): ширина экрана — нет; состояния — нет.

Применение

Цвет по умолчанию

Ядро красит ролью ссылки три вида ссылок:

• ссылку без атрибута class;
• ссылку, у которой есть класс с link- в имени, например link-dotted;
• ссылку, перед которой на том же уровне стоит элемент с таким классом.

Значения ролей в светлой и тёмной теме — на странице «Link». Подчёркивание у таких ссылок отстоит от текста на --sf-a3.

Цвета наведения, нажатия и посещения ядро ставит любой ссылке, кроме кнопки sf-button. Цвет в покое ссылка с другими классами получает от своего компонента; ядро его не задаёт.

Утилита цвета на самой ссылке (color-on-surface и другие color-*) перекрывает и эти состояния: слой утилит идёт после базового слоя ядра (см. Каскадные слои). Такая ссылка не меняет цвет при наведении, поэтому дайте ей другой признак наведения, например подчёркивание.

Третье правило держит в одном цвете ссылки, которые стоят подряд: в строке <a class="link-dotted" href="/a">Первая</a> · <a class="font-bold" href="/b">Вторая</a> вторая ссылка получает цвет ссылки, хотя её класс сам цвета не даёт, — потому что перед ней стоит ссылка с классом link-.

Ссылка внутри элемента с классом disabled берёт цвет окружающего текста и обычный курсор.

Цвет окружающего текста

Ссылка в цветном блоке — в алерте, в подписи на цветной подложке — должна быть того же цвета, что текст вокруг.

• link-inherit берёт цвет текста в покое. При наведении и нажатии ссылка окрашивается ролями --sf-link-hover и --sf-link-active, и это показывает, что она интерактивна.
• link-inherit-link берёт цвет текста и в покое, и при наведении, и при нажатии. Оставьте ссылке другой признак — подчёркивание.

<p class="color-error">Не удалось сохранить. <a href="/help" class="link-inherit">Подробнее</a></p>
<div class="color-on-surface-variant link-inherit-link">
  <a href="/terms" class="underline link-dotted">Условия</a>
</div>

Подчёркивание

Ссылка по умолчанию не подчёркнута. Подчёркивание включают классы оформления текста: underline — всегда, hover:underline — при наведении. Линия берёт цвет ссылки и меняет его вместе с состоянием.

link-dotted и link-dashed меняют только вид линии, поэтому без underline или hover:underline их не видно.

<a href="/docs" class="underline link-dotted">Документация</a>
<a href="/faq" class="hover:underline link-dashed">Вопросы</a>

link-underline-none убирает подчёркивание у ссылки и у ссылок внутри блока — в покое и при наведении.

Ограничения

• Классы underline и hover:underline делают ссылку классовой. Цвет ссылки она сохраняет, только если рядом есть класс link-…, например link-dotted. Сплошного подчёркивания среди классов link-* нет: чтобы подчеркнуть сплошной линией ссылки в тексте статьи, задайте это в CSS проекта для ссылок без классов.
• Посещённая ссылка с link-inherit или link-inherit-link в покое окрашивается --sf-link-visited, а не цветом текста.
• Классы link-* лежат в базовом слое ядра. Подчёркивание, заданное утилитой, компонентом или CSS проекта, они не перебивают: link-underline-none не снимет underline на той же ссылке.
• Префиксов ширины экрана и состояния у классов нет.
• Подчёркивание — привычный признак ссылки в тексте. Если его нет, ссылка должна отличаться от текста цветом.

См. также

• Оформление текста
• Стиль линий оформления
• Link
• Ссылка