Separator

composant

A line between two parts of a page.

Aperçu

Clair

Code

<twig:Separator />

Sombre

Code

<twig:Separator />

Essayer

Changez les propriétés ; le serveur rend l’exemple de nouveau.

<twig:Separator />

Variantes

`orientation`

The separator orientation.

orientation="horizontal"

orientation="vertical"

`decorative`

Whether the separator is purely decorative (not semantic).

decorative="false"

decorative="true"

Installation

php bin/console ux:install separator --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

Propriété	Type	Par défaut	Description
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	The separator orientation.
`decorative`	`bool`	`true`	Whether the separator is purely decorative (not semantic).

Accessibility

Decorative by default, hidden from screen readers; with :decorative="false" it is announced.

Fichiers à copier

templates/components/Separator.html.twig

{%- props
    ## 'horizontal'|'vertical' The separator orientation.
    orientation = 'horizontal',
    ## bool Whether the separator is purely decorative (not semantic).
    decorative = true
-%}
<hr data-slot="{{ attributes.render('data-slot')|default('separator') }}" data-orientation="{{ orientation }}"{% if decorative %} role="none"{% else %} aria-orientation="{{ orientation }}"{% endif %}{{ attributes.defaults({class: 'isSeparator' ~ (orientation is same as('vertical') ? ' isVertical' : '')}) }}>