GrDivider — Компоненты

Когда брать

блоки надо разделить — секции формы, группы пунктов меню, части карточки;
у разделителя есть подпись — «или», «Ещё», дата в ленте сообщений;
разделять надо по горизонтали — вертикальная линия в тулбаре и панели действий;
нужна нативная семантика — без подписи рендерится <hr> с неявной ролью separator.

Когда взять другое

Нужно	Берите
Границу двигает пользователь	`GrSplitter`
Разделяются разделы с заголовками	`GrFormSection`
Разделяются пункты меню	`GrDropdownMenu` с `dividers`
Разделяются строки списка	`GrList` с `divided`

Три ветки рендера

Без подписи — нативный <hr>: у него уже есть неявная роль separator, и дублировать её атрибутом нельзя. С подписью и в вертикальном варианте — div с явными role="separator" и aria-orientation.

Подпись и имя

role="separator" делает содержимое презентационным: текст внутри роли до скринридера не доходит. Поэтому имя разделителя задаётся атрибутом:

<GrDivider label="или" />
<!-- aria-label="или" — диктор объявит «или, разделитель» -->

Подпись из слота строкой не выразить, поэтому имя для неё задаётся отдельно — ariaLabel; он же перебивает label, когда видимый текст и озвучиваемое имя должны отличаться. Слот без ariaLabel остаётся безымянным осознанно: разделитель, подпись которого нельзя выразить строкой, декоративен.

align (start | center | end) решает, с какой стороны от подписи рисуются отрезки линии.

Начертание, отступы, толщина

variant — solid (по умолчанию), dashed, dotted. Линия рисуется бордюром, а не фоном: пунктир фоном не выразить, а два механизма на три варианта одного и того же расходятся при первой же правке;
spacing — none (по умолчанию) либо шкала пакета xs | sm | md | lg: вертикальные отступы у горизонтального разделителя, горизонтальные — у вертикального;
thickness — толщина линии, число трактуется как пиксели. Уезжает в --gr-divider-thickness, поэтому её можно задать и снаружи, стилями контейнера.

variant и spacing настраиваются глобально:

<GrConfigProvider :component-defaults="{ GrDivider: { variant: 'dashed', spacing: 'md' } }">

Вертикальный разделитель и flex-контекст

Вертикальный разделитель растягивается по высоте flex-родителя (self-stretch). В блочном контексте растягиваться не от чего, и линия схлопывается в ничто — выглядит как пропавший компонент.

Два выхода: положить его во flex-контейнер (обычный случай — тулбар) либо задать длину явно:

<div class="flex items-center gap-3">
  <span>Файл</span>
  <GrDivider orientation="vertical" />
  <span>Правка</span>
</div>

<!-- вне flex-родителя -->
<GrDivider orientation="vertical" :length="24" />

length задаёт высоту вертикальному разделителю и ширину горизонтальному.

Playground 2

Загружается…

ariaLabel

label

Код

<GrDivider />

Установка

npm i @feugene/granularity

Импорт

import { GrDivider } from '@feugene/granularity/components/GrDivider'

API

Props

Prop	Type	по умолчанию	Описание
`variant`	`GrDividerVariant \| undefined`	`undefined`	Начертание линии. Не задано — берётся из `GrConfigProvider`, иначе `solid`.
`length`	`string \| number \| undefined`	`undefined`	Длина линии: высота вертикального разделителя, ширина горизонтального. Нужна вертикальному вне flex-родителя — там ему не от чего растянуться.
`ariaLabel`	`string \| undefined`	`undefined`	Имя разделителя для скринридера. Подпись из слота строкой не выразить, поэтому имя задаётся отдельно; при `label` оно берётся из него.
`orientation`	`GrDividerOrientation \| undefined`	`"horizontal"`	—
`label`	`string \| undefined`	`undefined`	—
`align`	`GrDividerAlign \| undefined`	`"center"`	—
`spacing`	`GrDividerSpacing \| undefined`	`undefined`	Отступы вокруг разделителя. Не задано — из `GrConfigProvider`, иначе `none`.
`thickness`	`string \| number \| undefined`	`undefined`	Толщина линии. Число трактуется как пиксели.

Slots

Slot	Type	Описание
`default`	`any`	Подпись внутри линии: «или», название раздела.

Примеры 2

Горизонтальный, с подписью и вертикальный

Простая линия (<hr>), линия с меткой (label + align) и вертикальный разделитель (orientation="vertical").

Section A

Section B

Left aligned

Inline

vertical divider

Basic

<script setup lang="ts">
import { GrDivider } from '@feugene/granularity'
</script>

<template>
  <div class="grid max-w-md gap-4">
    <div class="showcase-demo-text text-sm">Section A</div>
    <GrDivider />
    <div class="showcase-demo-text text-sm">Section B</div>

    <GrDivider label="OR" />
    <GrDivider label="Left aligned" align="start" />

    <div class="flex items-center gap-3 text-sm">
      <span class="showcase-demo-text">Inline</span>
      <GrDivider orientation="vertical" class="h-5" />
      <span class="showcase-demo-text">vertical divider</span>
    </div>
  </div>
</template>

Начертание, отступы и явная длина

variant (solid/dashed/dotted), thickness через --gr-divider-thickness, spacing по шкале пакета и length — высота вертикального разделителя там, где flex-родителя нет и растянуться не от чего.

solid · dashed · dotted

spacing=md

Файл

Правка

Вид

Variants

<script setup lang="ts">
import { GrDivider } from '@feugene/granularity'
</script>

<template>
  <div class="grid max-w-md gap-4">
    <div class="showcase-demo-text text-sm">solid · dashed · dotted</div>
    <GrDivider />
    <GrDivider variant="dashed" />
    <GrDivider variant="dotted" :thickness="2" />

    <GrDivider label="spacing=md" variant="dashed" spacing="md" />

    <!-- Вне flex-родителя вертикальной линии не от чего растянуться — высоту
         задаёт `length`. -->
    <div class="flex items-center gap-1 text-sm">
      <span class="showcase-demo-text">Файл</span>
      <GrDivider orientation="vertical" spacing="sm" :length="20" />
      <span class="showcase-demo-text">Правка</span>
      <GrDivider orientation="vertical" spacing="sm" :length="20" variant="dashed" />
      <span class="showcase-demo-text">Вид</span>
    </div>
  </div>
</template>

Документация компонента Все компоненты