Data List

Displays metadata as a list of key-value pairs.

use radix_yew_icons::CopyIcon;
use radix_yew_themes::{
    AccentColor, Badge, BadgeVariant, Code, CodeVariant, DataList, DataListItem, DataListItemAlign,
    DataListLabel, DataListValue, Flex, FlexAlign, IconButton, IconButtonVariant, Link, Radius,
};
use yew::prelude::*;

#[function_component]
pub fn DataListExample() -> Html {
    html! {
        <DataList>
            <DataListItem align={DataListItemAlign::Center}>
                <DataListLabel min_width="88px">{"Status"}</DataListLabel>
                <DataListValue>
                    <Badge color={AccentColor::Jade} variant={BadgeVariant::Soft} radius={Radius::Full}>
                        {"Authorized"}
                    </Badge>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"ID"}</DataListLabel>
                <DataListValue>
                    <Flex align={FlexAlign::Center} gap=2>
                        <Code variant={CodeVariant::Ghost}>{"u_2J89JSA4GJ"}</Code>
                        <IconButton
                            size=1
                            color={AccentColor::Gray}
                            variant={IconButtonVariant::Ghost}
                            attributes={[
                                ("aria-label", "Copy value")
                            ]}
                        >
                            <CopyIcon />
                        </IconButton>
                    </Flex>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                <DataListValue>{"Vlad Moroz"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                <DataListValue>
                    <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                <DataListValue>
                    <Link target="_blank" href="https://workos.com">
                        {"WorkOS"}
                    </Link>
                </DataListValue>
            </DataListItem>
        </DataList>
    }
}

API Reference

This component is based on the dl element and supports common margin props.

Root

Contains all the parts of the data list.

Prop	Type	Default
`orientation`	`Responsive<DataListOrientation>`	`DataListOrientation::Horizontal`
`size`	`Responsive<1..3>`	`2`
`trim`	`Option<Responsive<DataListTrim>>`	-

Item

Wraps a key-value pair.

Prop	Type	Default
`align`	`Option<Responsive<DataListItemAlign>>`	-

Label

Contains the key of the key-value pair.

Prop	Type	Default
`width`	`Option<Responsive<String>>`	-
`min_width`	`Option<Responsive<String>>`	-
`max_width`	`Option<Responsive<String>>`	-
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-

Value

Contains the value of the key-value pair.

Examples

Orientation

Use the orientation prop to change the way the data list is layed-out.

use radix_yew_themes::{
    Breakpoint, DataList, DataListItem, DataListLabel, DataListOrientation, DataListValue, Link,
    ResponsiveValues,
};
use yew::prelude::*;

#[function_component]
pub fn DataListOrientationExample() -> Html {
    html! {
        <DataList
            orientation={ResponsiveValues::from([
                (Breakpoint::Initial, DataListOrientation::Vertical),
                (Breakpoint::Sm, DataListOrientation::Horizontal),
            ])}
        >
            <DataListItem>
                <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                <DataListValue>{"Vlad Moroz"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                <DataListValue>
                    <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                <DataListValue>
                    <Link target="_blank" href="https://workos.com">
                        {"WorkOS"}
                    </Link>
                </DataListValue>
            </DataListItem>
        </DataList>
    }
}

Size

Use the size prop to change the size of the data list.

use radix_yew_themes::{
    DataList, DataListItem, DataListLabel, DataListValue, Flex, FlexDirection, Link,
};
use yew::prelude::*;

#[function_component]
pub fn DataListSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=6>
            <DataList size=1>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                    <DataListValue>{"Vlad Moroz"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                    <DataListValue>
                        <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                    </DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                    <DataListValue>
                        <Link target="_blank" href="https://workos.com">
                            {"WorkOS"}
                        </Link>
                    </DataListValue>
                </DataListItem>
            </DataList>

            <DataList size=2>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                    <DataListValue>{"Vlad Moroz"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                    <DataListValue>
                        <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                    </DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                    <DataListValue>
                        <Link target="_blank" href="https://workos.com">
                            {"WorkOS"}
                        </Link>
                    </DataListValue>
                </DataListItem>
            </DataList>

            <DataList size=3>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                    <DataListValue>{"Vlad Moroz"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                    <DataListValue>
                        <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                    </DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                    <DataListValue>
                        <Link target="_blank" href="https://workos.com">
                            {"WorkOS"}
                        </Link>
                    </DataListValue>
                </DataListItem>
            </DataList>
        </Flex>
    }
}

Color

Use the color prop on the Label part to assign a specific color.

use radix_yew_themes::{
    AccentColor, DataList, DataListItem, DataListLabel, DataListOrientation, DataListValue,
};
use yew::prelude::*;

#[function_component]
pub fn DataListColorExample() -> Html {
    html! {
        <DataList orientation={DataListOrientation::Vertical}>
            <DataListItem>
                <DataListLabel color={AccentColor::Indigo}>{"Name"}</DataListLabel>
                <DataListValue>{"Indigo"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel color={AccentColor::Cyan}>{"Name"}</DataListLabel>
                <DataListValue>{"Cyan"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel color={AccentColor::Orange}>{"Name"}</DataListLabel>
                <DataListValue>{"Orange"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel color={AccentColor::Crimson}>{"Name"}</DataListLabel>
                <DataListValue>{"Crimson"}</DataListValue>
            </DataListItem>
        </DataList>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{
    AccentColor, DataList, DataListItem, DataListLabel, DataListOrientation, DataListValue, Flex,
};
use yew::prelude::*;

#[function_component]
pub fn DataListHighContrastExample() -> Html {
    html! {
        <Flex gap=9>
            <DataList orientation={DataListOrientation::Vertical}>
                <DataListItem>
                    <DataListLabel color={AccentColor::Indigo}>{"Name"}</DataListLabel>
                    <DataListValue>{"Indigo"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Cyan}>{"Name"}</DataListLabel>
                    <DataListValue>{"Cyan"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Orange}>{"Name"}</DataListLabel>
                    <DataListValue>{"Orange"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Crimson}>{"Name"}</DataListLabel>
                    <DataListValue>{"Crimson"}</DataListValue>
                </DataListItem>
            </DataList>

            <DataList orientation={DataListOrientation::Vertical}>
                <DataListItem>
                    <DataListLabel color={AccentColor::Indigo} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Indigo"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Cyan} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Cyan"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Orange} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Orange"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Crimson} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Crimson"}</DataListValue>
                </DataListItem>
            </DataList>
        </Flex>
    }
}

Rust Radix