Separator
Visually or semantically separates content.
use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation, Text};
use yew::prelude::*;
#[function_component]
pub fn SeparatorExample() -> Html {
html! {
<Text size=2>
{"Tools for building high-quality, accessible UI."}
<Separator my=3 size=4 />
<Flex gap=3 align={FlexAlign::Center}>
{"Themes"}
<Separator orientation={SeparatorOrientation::Vertical} />
{"Primitives"}
<Separator orientation={SeparatorOrientation::Vertical} />
{"Icons"}
<Separator orientation={SeparatorOrientation::Vertical} />
{"Colors"}
</Flex>
</Text>
}
}
API Reference
This component inherits props from the Separator primitive and supports common margin props.
Prop | Type | Default |
---|---|---|
orientation | SeparatorOrientation | SeparatorOrientationHorizontal |
size | Responsive<1..4> | 1 |
color | AccentColor | AccentColor::Gray |
decorative | bool | true |
Examples
Size
Use the size
prop to control the size of the separator. The largest step takes full width or height of the container.
use radix_yew_themes::{Flex, FlexDirection, Separator, SeparatorOrientation};
use yew::prelude::*;
#[function_component]
pub fn SeparatorSizeHorizontalExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=4>
<Separator orientation={SeparatorOrientation::Horizontal} size=1 />
<Separator orientation={SeparatorOrientation::Horizontal} size=2 />
<Separator orientation={SeparatorOrientation::Horizontal} size=3 />
<Separator orientation={SeparatorOrientation::Horizontal} size=4 />
</Flex>
}
}
use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation};
use yew::prelude::*;
#[function_component]
pub fn SeparatorSizeVerticalExample() -> Html {
html! {
<Flex align={FlexAlign::Center} gap=4 height="96px">
<Separator orientation={SeparatorOrientation::Vertical} size=1 />
<Separator orientation={SeparatorOrientation::Vertical} size=2 />
<Separator orientation={SeparatorOrientation::Vertical} size=3 />
<Separator orientation={SeparatorOrientation::Vertical} size=4 />
</Flex>
}
}
Color
Use the color
prop to assign a specific color.
use radix_yew_themes::{AccentColor, Flex, FlexDirection, Separator};
use yew::prelude::*;
#[function_component]
pub fn SeparatorColorExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Separator color={AccentColor::Indigo} size=4 />
<Separator color={AccentColor::Cyan} size=4 />
<Separator color={AccentColor::Orange} size=4 />
<Separator color={AccentColor::Crimson} size=4 />
</Flex>
}
}
Orientation
Use the orientation
prop to control whether the separator is horizontal or vertical.
use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation};
use yew::prelude::*;
#[function_component]
pub fn SeparatorOrientationExample() -> Html {
html! {
<Flex align={FlexAlign::Center} gap=4>
<Separator orientation={SeparatorOrientation::Horizontal} />
<Separator orientation={SeparatorOrientation::Vertical} />
</Flex>
}
}