Separator

Ein Separator ist eine Linie, die inhaltliche Abschnitte voneinander abgrenzt.

import { Separator } from "@mittwald/flow-react-components";

<Separator />

Best Practices

Verlasse dich auf die automatische Trennung durch die Section‍. Zwischen Sections mit einer H2-Heading‍ setzt sie den Separator meist selbst.
Richte die Breite des Separators an der Breite des Content-Bereichs aus.
Setze den Separator sparsam ein. Bei zu häufiger Verwendung geht die strukturierende Wirkung verloren.

Orientierung

Über das Property orientation lässt sich der Separator auch vertikal ausrichten, um nebeneinanderliegende Inhalte voneinander abzugrenzen.

Links

Rechts

Properties

Property	Type	Description
`className`	stringdefault: 'react-aria-Separator'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
`dir`	string
`elementType`	string	The HTML element type that will be used to render the separator.
`hidden`	boolean
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`lang`	string
`orientation`	horizontal (default) \| vertical	The orientation of the separator.
`render`	DOMRenderFunction<"div", TooltipRenderProps>	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`slot`	string	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	StyleOrFunction<TooltipRenderProps>	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	yes \| no

Events

Property	Type	Description
`onClick`	MouseEventHandler<HTMLDivElement>

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components