Разделитель

Разделитель отделяет соседние части содержимого или действий линией. Для простой границы между разделами достаточно <hr>; компонент нужен, когда на линии стоит подпись («или», название раздела) или кнопка, либо когда граница вертикальная.

Пример

<div class="flex flex-col gap-2">
  <p class="m-0">Доставка курьером в течение двух дней.</p>
  <hr class="sf-divider sf-divider-horizontal">
  <p class="m-0">Самовывоз из пункта выдачи на следующий день.</p>
</div>

Разметка

Минимальную разметку показывает пример выше: <hr class="sf-divider sf-divider-horizontal">.

• sf-divider задаёт цвет и толщину линии, класс ориентации (sf-divider-horizontal или sf-divider-vertical) — её направление.
• Пустой горизонтальный разделитель — сплошная линия. Если внутри есть подпись или кнопки, линия рисуется слева и справа от них.
• У компонента нет своего JavaScript.

Варианты

Ориентация

sf-divider-horizontal — линия на всю ширину между блоками. sf-divider-vertical — вертикальная линия между элементами одной строки: она растягивается на высоту строки. Вертикальному разделителю задайте role="separator" и aria-orientation="vertical".

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 flex-1">
    <hr class="sf-divider sf-divider-horizontal">
    <code class="text-1/2 color-on-surface-variant">sf-divider-horizontal</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex items-stretch gap-2">
      <span>Профиль</span>
      <span class="sf-divider sf-divider-vertical" role="separator" aria-orientation="vertical"></span>
      <span>Настройки</span>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-vertical</code>
  </div>
</div>

Подпись

sf-divider-content ставит текст посередине линии. sf-divider-content--bold набирает его жирным — для названия раздела; sf-divider-content--small — мелким второстепенным текстом; sf-divider-content-border обводит подпись рамкой, как плашку.

<div class="grid grid-col-1 gap-3">
  <div class="flex flex-col gap-1">
    <div class="sf-divider sf-divider-horizontal" role="separator" aria-label="или"><span class="sf-divider-content" aria-hidden="true">или</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-content</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-divider sf-divider-horizontal"><span class="sf-divider-content sf-divider-content--bold">Новый раздел</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-content--bold</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-divider sf-divider-horizontal"><span class="sf-divider-content sf-divider-content--small">Дополнительно</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-content--small</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-divider sf-divider-horizontal"><span class="sf-divider-content sf-divider-content-border">Фильтры</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-content-border</code>
  </div>
</div>

Кнопки на линии

sf-divider-buttons ставит на линию обычные кнопки sf-button и кнопки с иконкой sf-icon-button и держит между ними промежуток. Так в редакторах вставляют блок или меняют порядок блоков.

Классы sf-divider-button, sf-divider-button--solo, sf-divider-button--left, sf-divider-button--right, sf-divider-button-square--left и sf-divider-button-square--right — старые имена кнопок на линии. Они работают для совместимости; в новой разметке используйте sf-button и sf-icon-button.

<div class="grid grid-col-1 gap-3">
  <div class="flex flex-col gap-1">
    <div class="sf-divider sf-divider-horizontal">
      <span class="sf-divider-buttons"><button type="button" class="sf-icon-button sf-icon-button--icon sf-icon-button--outline sf-icon-button--on-surface sf-icon-button--size-1" aria-label="Добавить блок"><i class="sf-icon" aria-hidden="true">add</i></button></span>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-buttons + sf-icon-button</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-divider sf-divider-horizontal">
      <span class="sf-divider-buttons" role="group" aria-label="Порядок блока"><button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Выше</span></button><button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Ниже</span></button></span>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-divider-buttons + sf-button</code>
  </div>
</div>

Рамка блока

sf-divider sf-divider-borders рисует линии сверху и снизу блока поверх его содержимого — чтобы выделить полосу, не меняя её размеров.

<div class="flex flex-col gap-1">
  <div class="sf-divider sf-divider-borders p-2">
    <p class="m-0">Блок между двумя линиями: сверху и снизу.</p>
  </div>
  <code class="text-1/2 color-on-surface-variant">sf-divider sf-divider-borders</code>
</div>

Состояния

Фокус

Кнопка на линии при переходе клавишей Tab получает кольцо фокуса по :focus-visible поверх соседней кнопки. В примере фокус показан классом focus-visible, который CSS читает наравне с :focus-visible.

<div class="sf-divider sf-divider-horizontal">
  <span class="sf-divider-buttons" role="group" aria-label="Порядок блока"><button type="button" class="sf-divider-button sf-divider-button--left focus-visible">Выше</button><button type="button" class="sf-divider-button sf-divider-button--right">Ниже</button></span>
</div>

Доступность

• <hr> сообщает о смене темы сам. Разделитель на другом элементе получает role="separator", если граница несёт смысл; декоративную линию роль не требует.
• Подпись на линии, которая повторяет очевидное («или»), можно скрыть (aria-hidden="true") и передать разделителю через aria-label.
• Кнопке на линии без текста нужен aria-label; паре кнопок — общая группа с именем.
• В режиме высокой контрастности линия и рамки рисуются системным цветом текста, кольцо фокуса — цветом выделения.

Классы

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

Переменные

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

  --sf-divider-borders--border-color,
  var(--sf-outline-variant)
)` | `border-top`, `border-bottom`, `border-block` |

| --sf-divider--gap | var(--sf-space-1) | gap |

| --sf-divider--length | var(--sf-d0) | min-height, min-block-size |

| --sf-divider--thickness | var(--sf-px) | height, block-size, width, inline-size, border-top, border-bottom, border-block, border, border-inline-end-width |

| --sf-divider-buttons--gap | не задана; задают модификаторы, например .sf-divider-buttons: var(--sf-space-1/2) | gap |

| --sf-divider-content--background-color | var(--sf-transparent) | background-color |

| --sf-divider-content--color | var(--sf-on-surface) | color |

| --sf-divider-content--font-size | var(--sf-text--size) | font-size |

| --sf-divider-content--line-height | var(--sf-text--height) | line-height |

| --sf-divider-content--padding | var(--sf-space-1/3) 0 | padding |

См. также

• Аккордеон