Divider¶
Renders a horizontal or vertical divider line, optionally with a centered label.
Usage¶
import { ui } from "@rezi-ui/core";
ui.column({ gap: 1 }, [
ui.text("Section A"),
ui.divider(),
ui.text("Section B"),
]);
Props¶
| Prop | Type | Default | Description |
|---|---|---|---|
key |
string |
- | Reconciliation key |
direction |
"horizontal" \| "vertical" |
"horizontal" |
Divider orientation |
char |
string |
- | Override the divider glyph (first char is used) |
label |
string |
- | Optional centered label (horizontal only) |
color |
string |
- | Theme color key/path for divider foreground |
Examples¶
1) Labeled divider¶
import { ui } from "@rezi-ui/core";
ui.column({ gap: 1 }, [
ui.text("Sign in"),
ui.divider({ label: "OR" }),
ui.text("Create account"),
]);
2) Vertical divider in a row¶
import { ui } from "@rezi-ui/core";
ui.row({ gap: 1 }, [
ui.text("Left"),
ui.divider({ direction: "vertical" }),
ui.text("Right"),
]);