Справочная ссылка показывает переход вместе с коротким пояснением: путём,
источником, идентификатором записи. Вся карточка — область нажатия. Для
обычной ссылки в тексте без пояснения берите
ссылку.
Пример
HTML
<divclass="max-w-md">
<divclass="sf-reference-link">
<divclass="sf-reference-link-left"><iclass="sf-icon"aria-hidden="true">arrow_forward</i><ahref="#guide">Руководство по установке</a></div>
<divclass="sf-reference-link-text">/start/install/</div>
</div>
</div>
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
sf-reference-link → sf-reference-link-left с иконкой sf-icon и ссылкой
<a>, затем пояснение sf-reference-link-text.
Ссылка — настоящий <a href>; её область нажатия растягивается на всю
карточку.
Иконка и пояснение необязательны. Иконка декоративная:
aria-hidden="true".
Имена sf-reference-link__main, sf-reference-link__link,
sf-reference-link__icon и sf-reference-link__meta работают так же, как
части выше; в разметке пишите sf-reference-link-left и
sf-reference-link-text.
У компонента нет своего JavaScript.
Варианты
Размер
Без класса размера пояснение стоит под ссылкой, с отступом на ширину
иконки, — для карточки в колонке. sf-reference-link--size-1/2, --size-1
и --size-2 ставят ссылку и пояснение в одну строку и согласуют отступы и
текст с полями той же ступени.
HTML
<divclass="grid grid-col-1 gap-3 max-w-md">
<divclass="flex flex-col gap-1">
<divclass="sf-reference-link">
<divclass="sf-reference-link-left"><iclass="sf-icon"aria-hidden="true">arrow_forward</i><ahref="#guide">Руководство по установке</a></div>
<divclass="sf-reference-link-text">/start/install/</div>
</div>
<codeclass="text-1/2 color-on-surface-variant">без класса размера: путь под ссылкой</code>
</div>
<divclass="flex flex-col gap-1">
<divclass="sf-reference-link sf-reference-link--size-1/2">
<divclass="sf-reference-link-left"><iclass="sf-icon"aria-hidden="true">arrow_forward</i><ahref="#guide">Руководство по установке</a></div>
<divclass="sf-reference-link-text">/start/install/</div>
</div>
<codeclass="text-1/2 color-on-surface-variant">sf-reference-link--size-1/2</code>
</div>
<divclass="flex flex-col gap-1">
<divclass="sf-reference-link sf-reference-link--size-1">
<divclass="sf-reference-link-left"><iclass="sf-icon"aria-hidden="true">arrow_forward</i><ahref="#guide">Руководство по установке</a></div>
<divclass="sf-reference-link-text">/start/install/</div>
</div>
<codeclass="text-1/2 color-on-surface-variant">sf-reference-link--size-1</code>
</div>
<divclass="flex flex-col gap-1">
<divclass="sf-reference-link sf-reference-link--size-2">
<divclass="sf-reference-link-left"><iclass="sf-icon"aria-hidden="true">arrow_forward</i><ahref="#guide">Руководство по установке</a></div>
<divclass="sf-reference-link-text">/start/install/</div>
</div>
<codeclass="text-1/2 color-on-surface-variant">sf-reference-link--size-2</code>
</div>
</div>
По строке текста
sf-reference-link--line-1/2, --line-1 и --line-2 убирают внутренние
отступы и ставят ссылку в одну строку с высотой текста той же ступени — для
ссылки среди текста или в списке.
sf-reference-link--plain убирает рамку, фон и отступы и сужает ссылку по
тексту. Берите его там, где ссылка уже стоит в своей рамке — в поле записи
или ячейке таблицы: вторая рамка читалась бы как отдельный контрол. Иконку
со стрелкой в таком месте тоже не ставьте.
Наведение и нажатие карточка показывает сама: фон и рамка меняют цвет.
Недоступна
Класс disabled или aria-disabled="true" приглушает карточку. Вместо
<a> поставьте неинтерактивный элемент без href: класс не мешает переходу
по ссылке.
При переходе клавишей Tab кольцо фокуса охватывает всю карточку, а не только
текст ссылки. В примере фокус показан классом focus-visible на ссылке,
который CSS читает наравне с :focus-visible.
HTML
<divclass="max-w-md">
<divclass="sf-reference-link sf-reference-link--size-1">
<divclass="sf-reference-link-left"><iclass="sf-icon"aria-hidden="true">arrow_forward</i><ahref="#guide"class="focus-visible">Руководство по установке</a></div>
<divclass="sf-reference-link-text">/start/install/</div>
</div>
</div>
Доступность
Текст ссылки описывает, куда она ведёт; путь в пояснении не заменяет
доступное имя.
Ссылка в новой вкладке сообщает об этом в тексте или доступном имени и
получает rel="noopener".
Недоступная ссылка — не ссылка: без href она не получает фокус.
В режиме высокой контрастности кольцо фокуса берёт системный цвет
выделения.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-reference-link); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-reference-link--background-color
transparent
background-color
--sf-reference-link--border-color
var(--sf-outline-variant)
border
--sf-reference-link--font-size
не задана; задают модификаторы, например .sf-reference-link.sf-reference-link--size-1/2: var(--sf-text-size-1/2)
font-size
--sf-reference-link--gap
var(--sf-space-1)
gap
--sf-reference-link--line-height
не задана; задают модификаторы, например .sf-reference-link.sf-reference-link--size-1/2: var(--sf-text-height-1/2)
