Trennlinie (Separator)

Trennlinien (Separators) werden verwendet, um Inhalte in einem Layout oder einer Liste visuell voneinander abzugrenzen. Sie können entweder horizontal oder vertikal sein, was sie für verschiedene Designanforderungen vielseitig macht.

Verwendung

Um Separator zu verwenden, importieren Sie ihn aus Ihren Komponenten und geben Sie die Eigenschaft orientation an und optional die Eigenschaft decorative, um sein Erscheinungsbild zu steuern.

Horizontale Trennlinie

Eine Trennlinie, die sich horizontal erstreckt, nützlich zum Unterteilen von Inhalten wie Listenelementen oder Abschnitten in einem Layout.

import React from "react";
import { Separator } from "@firecms/ui";

export default function SeparatorHorizontalDemo() {
    return <Separator orientation="horizontal" />;
}

Dekorative Trennlinie

Demonstriert, wie die Eigenschaft decorative verwendet wird, um eine Trennlinie zu rendern, die eher für visuelle oder dekorative Zwecke als für die semantische Unterteilung von Inhalten gedacht ist.

import React from "react";
import { Separator } from "@firecms/ui";

export default function SeparatorDecorativeDemo() {
    return <Separator orientation="horizontal" decorative={true} />;
}