adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
thaw/demo_markdown/docs/badge/mod.md
luoxiao b17f1400a5 refactor: badge
2024-06-05 17:17:17 +08:00

4.5 KiB
Raw Blame History

Badge

view! {
    <Badge />
}

Appearance

view! {
    <Space>
        <Badge appearance=BadgeAppearance::Filled>"999+"</Badge>
        <Badge appearance=BadgeAppearance::Ghost>"999+"</Badge>
        <Badge appearance=BadgeAppearance::Outline>"999+"</Badge>
        <Badge appearance=BadgeAppearance::Tint>"999+"</Badge>
    </Space>
}

Sizes

view! {
    <Space>
        <Badge size=BadgeSize::Tiny/>
        <Badge size=BadgeSize::ExtraSmall/>
        <Badge size=BadgeSize::Small/>
        <Badge size=BadgeSize::Medium/>
        <Badge size=BadgeSize::Large/>
        <Badge size=BadgeSize::ExtraLarge/>
    </Space>
}

Color

view! {
    <Space vertical=true>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Brand>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Brand>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Brand>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Brand>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Danger>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Danger>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Danger>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Danger>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Important>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Important>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Important>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Important>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Informative>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Informative>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Informative>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Informative>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Severe>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Severe>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Severe>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Severe>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Subtle>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Subtle>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Subtle>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Subtle>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Success>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Success>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Success>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Success>"999+"</Badge>
        </Space>
        <Space>
            <Badge appearance=BadgeAppearance::Filled color=BadgeColor::Warning>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Ghost color=BadgeColor::Warning>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Outline color=BadgeColor::Warning>"999+"</Badge>
            <Badge appearance=BadgeAppearance::Tint color=BadgeColor::Warning>"999+"</Badge>
        </Space>
    </Space>
}

Badge Props

Name Type Default Description
class OptionalProp<MaybeSignal<String>> Default::default() Addtional classes for the badge element.
value MaybeSignal<u32> 0 Badge's value.
max MaybeSignal<u32> u32::MAX The maximum number of the badge when its value overflows.
variant MaybeSignal<BadgeVariant> BadgeVariant::Error Badge variant.
dot MaybeSignal<bool> false Show badge as dot.
children Children Badge's content.