GrDivider — Components

Machine-translated from the Russian original, not yet reviewed. Read the original

When to take it

blocks have to be separated — the sections of a form, groups of menu items, parts of a card;
the separator has a label — “or”, “More”, a date in a feed of messages;
the separation is horizontal — a vertical line in a toolbar or an action bar;
native semantics is needed — without a label it renders as an <hr> with the implicit separator role.

When to take something else

Need	Take
The boundary is moved by the user	`GrSplitter`
Sections with headings are being separated	`GrFormSection`
Menu items are being separated	`GrDropdownMenu` with `dividers`
The rows of a list are being separated	`GrList` with `divided`

Three render branches

Without a label — a native <hr>: it already has the implicit separator role, and duplicating it with an attribute is not allowed. With a label and in the vertical variant — a div with explicit role="separator" and aria-orientation.

The label and the name

role="separator" makes the content presentational: the text inside the role does not reach a screen reader. That is why the name of the separator is set with an attribute:

<GrDivider label="or" />
<!-- aria-label="or" — a screen reader will announce "or, separator" -->

A label from a slot cannot be expressed as a string, so the name for it is set separately — ariaLabel; it also overrides label when the visible text and the announced name have to differ. A slot without ariaLabel stays nameless on purpose: a separator whose label cannot be expressed as a string is decorative.

align (start | center | end) decides on which side of the label the segments of the line are drawn.

Style, spacing, thickness

variant — solid (the default), dashed, dotted. The line is drawn with a border rather than with a background: a dash pattern cannot be expressed with a background, and two mechanisms for three variants of the same thing diverge at the very first edit;
spacing — none (the default) or the scale of the package xs | sm | md | lg: vertical padding for a horizontal separator, horizontal for a vertical one;
thickness — the thickness of the line, a number is treated as pixels. It travels into --gr-divider-thickness, so it can also be set from the outside, with the styles of the container.

variant and spacing are configured globally:

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

A vertical separator and the flex context

A vertical separator stretches to the height of its flex parent (self-stretch). In a block context there is nothing to stretch against, and the line collapses into nothing — it looks like a component that vanished.

There are two ways out: put it into a flex container (the usual case — a toolbar) or set the length explicitly:

<div class="flex items-center gap-3">
  <span>File</span>
  <GrDivider orientation="vertical" />
  <span>Edit</span>
</div>

<!-- outside a flex parent -->
<GrDivider orientation="vertical" :length="24" />

length sets the height of a vertical separator and the width of a horizontal one.

Playground 2

Loading…

ariaLabel

label

Code

<GrDivider />

Install

npm i @feugene/granularity

Import

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

API

Props

Prop	Type	default	Description
`variant`	`GrDividerVariant \| undefined`	`undefined`	The style of the line. Unset — it comes from `GrConfigProvider`, otherwise `solid`.
`length`	`string \| number \| undefined`	`undefined`	The length of the line: the height of a vertical separator, the width of a horizontal one. A vertical one needs it outside a flex parent — there it has nothing to stretch against.
`ariaLabel`	`string \| undefined`	`undefined`	The name of the separator for a screen reader. A label from a slot cannot be expressed as a string, so the name is set separately; with `label` it is taken from it.
`orientation`	`GrDividerOrientation \| undefined`	`"horizontal"`	—
`label`	`string \| undefined`	`undefined`	—
`align`	`GrDividerAlign \| undefined`	`"center"`	—
`spacing`	`GrDividerSpacing \| undefined`	`undefined`	The spacing around the separator. Unset — from `GrConfigProvider`, otherwise `none`.
`thickness`	`string \| number \| undefined`	`undefined`	The thickness of the line. A number is treated as pixels.

Slots

Slot	Type	Description
`default`	`any`	A label inside the line: "or", the name of a section.

Examples 2

Horizontal, labeled and 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>

Line style, spacing and explicit length

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>

Component documentation All components