Флаг

Флаг показывает страну картинкой: в телефонном поле, списке стран, рядом с ценой или адресом. Берите его вместо флага-эмодзи: эмодзи рисует системный шрифт, и в одних системах флаг выглядит иначе, а в других (Windows) вместо него стоят две буквы. Картинки набора выглядят одинаково везде.

Пример

<div class="flex items-cross-center gap-1">
  <span class="sf-flag sf-flag--rect" data-country="ru"></span>
  <span class="sf-flag sf-flag--rect" data-country="de"></span>
  <span class="sf-flag sf-flag--rect" data-country="fr"></span>
  <span class="sf-flag sf-flag--rect" data-country="jp"></span>
  <span class="sf-flag sf-flag--rect" data-country="br"></span>
  <span class="sf-flag sf-flag--rect" data-country="za"></span>
</div>

Разметка

Минимальную разметку показывает пример выше: пустой <span class="sf-flag sf-flag--rect" data-country="ru">.

• data-country — код страны из двух букв по ISO 3166-1 alpha-2, регистр не важен. Скрипт вставляет в элемент картинку <img>.
• Класс формы sf-flag--rect или sf-flag--circle выбирает файл набора и пропорции; без него скрипт берёт прямоугольник.
• data-alt задаёт картинке текстовую альтернативу; без него флаг декоративный (см. «Доступность»).
• data-lazy="false" загружает файл сразу. По умолчанию файл грузится, когда флаг подходит к экрану: длинный список стран не тянет все файлы ради видимых.
• data-flag-base на элементе или любом предке задаёт свой набор. Он повторяет раскладку набора Framework: <база>/rect/<код>.svg, <база>/circle/<код>.svg и <база>/index.json со списками кодов каждой формы. Без атрибута путь берётся из рантайма Framework.

Варианты

Форма

sf-flag--rect — прямоугольник 28×20, форма по умолчанию для полей, списков и таблиц. sf-flag--circle — круг 24×24 рядом с аватарами, где важнее общая форма. Круглый флаг — отдельный рисунок, а не обрезанный прямоугольник: у Непала сохраняется форма полотнища, у Сингапура — полумесяц со звёздами. Поэтому форму выбирает класс, а не border-radius. Если у кода нет файла нужной формы, скрипт показывает другую форму и меняет класс.

В каждой форме набора 247 кодов. 37 из них построены из flag-icons (лицензия MIT) и приведены к палитре набора; их круглые версии вырезаны из прямоугольных. Уведомление об авторстве лежит в flags/index.json компонента.

<div class="flex flex-col gap-3">
  <div class="flex flex-col gap-1">
    <div class="flex items-cross-center gap-1">
      <span class="sf-flag sf-flag--rect" data-country="np"></span>
      <span class="sf-flag sf-flag--rect" data-country="sg"></span>
      <span class="sf-flag sf-flag--rect" data-country="ar"></span>
      <span class="sf-flag sf-flag--rect" data-country="ch"></span>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-flag--rect</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="flex items-cross-center gap-1">
      <span class="sf-flag sf-flag--circle" data-country="np"></span>
      <span class="sf-flag sf-flag--circle" data-country="sg"></span>
      <span class="sf-flag sf-flag--circle" data-country="ar"></span>
      <span class="sf-flag sf-flag--circle" data-country="ch"></span>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-flag--circle</code>
  </div>
</div>

Размер

Высоту задаёт переменная --sf-flag--size (по умолчанию var(--sf-b8)), ширина считается из неё по пропорциям формы. Задайте переменную на элементе или в своём слое.

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-flag sf-flag--rect flag-demo-size-b6" data-country="it"></span>
    <code class="text-1/2 color-on-surface-variant">--sf-flag--size: var(--sf-b6)</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-flag sf-flag--rect" data-country="it"></span>
    <code class="text-1/2 color-on-surface-variant">по умолчанию: var(--sf-b8)</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-flag sf-flag--rect flag-demo-size-c2" data-country="it"></span>
    <code class="text-1/2 color-on-surface-variant">--sf-flag--size: var(--sf-c2)</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-flag sf-flag--rect flag-demo-size-c6" data-country="it"></span>
    <code class="text-1/2 color-on-surface-variant">--sf-flag--size: var(--sf-c6)</code>
  </div>
</div>

.flag-demo-size-b6 { --sf-flag--size: var(--sf-b6); }
.flag-demo-size-c2 { --sf-flag--size: var(--sf-c2); }
.flag-demo-size-c6 { --sf-flag--size: var(--sf-c6); }

Состояния

Без картинки

Пока файл не загружен или код не задан, элемент держит размер и показывает нейтральную подложку: строка не прыгает, когда картинка приходит.

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-flag sf-flag--rect"></span>
    <code class="text-1/2 color-on-surface-variant">без data-country</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-flag sf-flag--circle"></span>
    <code class="text-1/2 color-on-surface-variant">без data-country</code>
  </div>
</div>

Доступность

• Без data-alt картинка получает aria-hidden="true" и пустой alt: экранный диктор её пропускает. Так правильно, когда название страны или код написаны рядом.
• data-alt с названием страны задавайте, только если картинка несёт смысл сама, например рядом с телефонным кодом.
• Флаг не обозначает язык: у одного языка много стран, в одной стране бывает несколько языков. В переключателе языка рядом с флагом пишите название языка на этом языке (lang на подписи).
• Скругление и тонкая рамка следуют теме: рамка цвета --sf-outline-variant не даёт белым флагам слиться со страницей.

<ul class="flex flex-col gap-1 m-0 p-0" role="list">
  <li class="flex items-cross-center gap-1"><span class="sf-flag sf-flag--rect" data-country="de"></span><span lang="de">Deutsch</span></li>
  <li class="flex items-cross-center gap-1"><span class="sf-flag sf-flag--rect" data-country="fr"></span><span lang="fr">Français</span></li>
  <li class="flex items-cross-center gap-1"><span class="sf-flag sf-flag--rect" data-country="jp" data-alt="Япония"></span><span>+81</span></li>
</ul>

JavaScript

Скрипт подключает флаги при загрузке страницы и флаги, добавленные позже. Объект SF.Flag появляется вместе со скриптом компонента; Loader подключает его, когда находит на странице .sf-flag. Событий компонент не отправляет.

• SF.Flag.render(element) — перерисовывает флаг. Смену data-country или формы скрипт сам не отслеживает: после неё вызовите render.
• SF.Flag.mount(element) и SF.Flag.mountAll(root) — подключают флаг или все флаги внутри root с учётом ленивой загрузки.

Имя SF.flag указывает на тот же объект.

const flag = document.querySelector('#phone-country');
flag.dataset.country = 'de';
SF.Flag.render(flag);

Классы

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-flag); переменную без него задают только модификаторы.

См. также

• Код страны