Close

<sf-close> рисует только знак закрытия — крестик нужного размера. Это не кнопка: её даёт нативный <button> или Icon Buttons с kind="close", внутри которого стоит <sf-close>. Оформление знака совпадает с обычным компонентом «Закрыть».

Пример

<div class="flex flex-wrap gap-3 items-cross-center">
  <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex items-cross-center" aria-label="Закрыть уведомление">
    <sf-close size="1"></sf-close>
  </button>
  <sf-icon-button kind="close" appearance="link" scheme="on-surface" aria-label="Закрыть панель"></sf-icon-button>
</div>

Применение

Когда брать <sf-close>

Готовую кнопку закрытия даёт <sf-icon-button kind="close">: она сама ставит <sf-close> того же размера, что кнопка. <sf-close> отдельно берите для своей кнопки закрытия — в шапке панели, в теге, в карточке, где кнопку рисует ваша разметка.

Размер знака

size задаёт размер знака по шкале от 1/4 до 7; по умолчанию 1/3. Внутри кнопки выбирайте размер знака по размеру кнопки: в кнопке sf-icon-button--size-1 — size="1". root-class добавляет классы корню знака.

<div class="flex flex-wrap gap-3 items-cross-center">
  <sf-close size="1/4"></sf-close>
  <sf-close size="1/3"></sf-close>
  <sf-close size="1/2"></sf-close>
  <sf-close size="1"></sf-close>
  <sf-close size="2"></sf-close>
  <sf-close size="3"></sf-close>
</div>

Доступность

• Знак скрыт от вспомогательных технологий (aria-hidden="true") и не получает фокус. Фокус и нажатие принадлежат кнопке вокруг него.
• Кнопке нужно доступное имя, которое называет, что закрывается: aria-label="Закрыть уведомление", а не просто «Закрыть», если на экране несколько таких кнопок.
• Кнопка закрытия — нативный <button type="button">: Enter и Space нажимают её без дополнительного кода.

Справочник API

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

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

Атрибуты

• size — string, по умолчанию 1/3, значения: 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7. Токен размера декоративного символа закрытия.
• root-class — string, по умолчанию пусто.

Методы

Публичных методов нет.

События

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

Доступность

• Роль: нет; сгенерированный глиф имеет aria-hidden.
• Доступное имя: внутренний.
• Фокус: Кнопка закрытия декоративна и не входит в порядок табуляции. Фокусом владеет содержащая её нативная кнопка.

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

<button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex items-cross-center" aria-label="Close notification"><sf-close size="1"></sf-close></button>

Источник

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

См. также

• Icon Buttons — готовая кнопка закрытия с kind="close".
• Модальное окно — окно со своей кнопкой закрытия.