Reference Link

<sf-reference-link> — ссылка на реальный адрес с короткой справкой рядом: путём, источником, номером документа. Берите её, когда читателю важно видеть, куда он перейдёт. Для обычной ссылки в тексте и для действия без адреса она не нужна. Элемент строится на классах компонента Справочная ссылка.

Пример

<div class="flex flex-col gap-3">
  <sf-reference-link label="Подключение Framework" text="ui.simai.io/ru/guide/" href="https://ui.simai.io/ru/guide/"></sf-reference-link>
  <sf-reference-link appearance="plain" icon="" label="Исходный код" text="github.com/simai/ui" href="https://github.com/simai/ui" target="_blank" aria-label="Исходный код, откроется в новой вкладке"></sf-reference-link>
</div>

Применение

Подпись, справка и адрес

label — видимый текст ссылки; называйте в нём место назначения, а не действие. text — справка рядом: путь, домен, номер раздела. href обязателен для доступной ссылки: без него подпись выводится текстом без перехода. Слоты label и text заменяют подпись и справку разметкой.

target задаёт окно перехода, по умолчанию _self. Для другого окна компонент сам добавляет rel="noopener noreferrer".

Вид и размер

appearance выбирает вид:

• card — ссылка в собственной рамке с фоном и отступами, вид по умолчанию;
• plain — одна ссылка шириной в свой текст. Берите её внутри того, что уже является рамкой: поля карточки записи, ячейки таблицы.

icon — значок перед подписью, по умолчанию стрелка arrow_forward. Пустой icon="" убирает значок — для ссылки рядом с собственной подписью.

size (1/2, 1, 2) делает ссылку элементом формы этого размера — для ряда полей. line с теми же значениями ставит ссылку без рамки на строку текста этого размера — для ячейки таблицы, чтобы строка не стала выше.

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

disabled выводит подпись без ссылки: элемент не получает фокус, а нажатия на нём гасятся. Адрес при этом не нужен — не оставляйте href у ссылки, которая никуда не ведёт.

<sf-reference-link label="Отчёт за квартал" text="Готовится" disabled></sf-reference-link>

onClick(handler) подписывает обработчик на обычное событие click; своих событий у компонента нет.

Доступность

• Доступное имя ссылки — label. Справка из text стоит рядом и в имя не входит; если без неё ссылку не понять, задайте aria-label, который объединяет оба смысла.
• Ссылке в новом окне задайте aria-label, который об этом сообщает, как во втором примере: «Исходный код, откроется в новой вкладке».
• Значок декоративен и скрыт от экранного диктора.
• Ссылка — одна остановка Tab, переход — Enter. Недоступная ссылка в порядок Tab не входит и отмечена aria-disabled="true".

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• appearance — string, по умолчанию card, значения: card, plain. card — ссылка в собственном блоке: рамка, заливка и отступы. plain — только ссылка шириной по тексту, для ссылки внутри того, что уже является блоком, — поля записи, ячейки таблицы, — где вторая рамка выглядит как элемент управления, которым значение не является.
• aria-label — string, по умолчанию пусто.
• disabled — boolean, по умолчанию false. Отображает недоступную ссылку без фокуса и без перехода.
• href — string, по умолчанию пусто. Реальное место навигации. Обязательно для доступной ссылки.
• icon — string, по умолчанию arrow_forward. Имя декоративной иконки. Без атрибута отображается стрелка; пустое значение не рисует иконку — для ссылки, стоящей рядом со своей подписью.
• label — string, по умолчанию пусто. Видимая подпись ссылки, описывающая место назначения.
• line — string, по умолчанию пусто, значения: пусто, 1/2, 1, 2. Занимает строку текста этого размера формы как ссылка без карточки — для ячейки таблицы, чтобы строка сохраняла высоту элемента управления.
• size — string, по умолчанию пусто, значения: пусто, 1/2, 1, 2. Размер формы: ссылка становится элементом управления этого размера — для ряда полей или ячейки таблицы. Пустое значение сохраняет отступы карточки.
• target — string, по умолчанию _self. Нативная цель контекста просмотра. Укажите в имени, что навигация открывает новый контекст.
• template — string, по умолчанию default.
• text — string, по умолчанию пусто. Компактный маршрут, источник или ссылка рядом с подписью.

Методы

• onClick(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик click на хост-элементе.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Доступное имя: рекомендуется.
• Клавиши: Tab.
• Фокус: Сохраняет видимый фокус на активном элементе управления.

Минимальная разметка

<sf-reference-link label="Installation guide" text="/start/install/" href="/start/install/"></sf-reference-link>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/reference-link
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-reference-link

См. также

• Справочная ссылка — та же ссылка на классах.