Struct BadgeProps 

pub struct BadgeProps {
    pub color: Color,
    pub fill: BadgeFill,
    pub pill: bool,
    pub class: String,
    pub onclick: Option<EventHandler<MouseEvent>>,
    pub href: Option<String>,
    pub target: Option<String>,
    pub children: Element,
    /* private fields */
}

Bootstrap Badge component.

Bootstrap HTML → Dioxus

HTML	Dioxus
<span class="badge text-bg-primary">New</span>	Badge { color: Color::Primary, "New" }
<span class="badge rounded-pill text-bg-danger">99+</span>	Badge { color: Color::Danger, pill: true, "99+" }
<span class="badge bg-secondary">Alias</span>	Badge { color: Color::Secondary, fill: BadgeFill::Bg, "Alias" }
<span class="badge bg-info-subtle text-info-emphasis">2 fields</span>	Badge { color: Color::Info, fill: BadgeFill::Subtle, "2 fields" }
<span class="badge text-bg-secondary" role="button">Open</span>	`Badge { color: Color::Secondary, onclick: move

rsx! {
    Badge { color: Color::Primary, "New" }
    Badge { color: Color::Danger, pill: true, "99+" }
    Badge { color: Color::Info, fill: BadgeFill::Subtle, "2 fields" }
    // Inside a heading
    h1 { "Messages " Badge { color: Color::Info, "4" } }
}

Fields

color: Color

Badge color variant.

fill: BadgeFill

Which Bootstrap colour idiom to paint the badge with. Defaults to text-bg-<color>, so existing callers are unchanged.

pill: bool

Use pill (rounded) style.

class: String

Additional CSS classes.

onclick: Option<EventHandler<MouseEvent>>

Click event handler.

href: Option<String>

Render as a real <a class="badge" href=…> instead of a <span>.

Bootstrap documents badges used as links and buttons, and the anchor is not interchangeable with a span carrying a click handler: only the anchor is focusable, announced as a link, and openable in a new tab or copied from the context menu. A badge that navigates should be one.

target: Option<String>

Anchor target (e.g. "_blank"). Only applies when href is set.

children: Element

Child elements.

Implementations

impl BadgeProps

pub fn builder() -> BadgePropsBuilder<((), (), (), (), (), (), (), (), ())>

Create a builder for building BadgeProps. On the builder, call .color(...)(optional), .fill(...)(optional), .pill(...)(optional), .class(...)(optional), .onclick(...)(optional), .href(...)(optional), .target(...)(optional), .attributes(...)(optional), .children(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of BadgeProps.

Trait Implementations

impl Clone for BadgeProps

fn clone(&self) -> BadgeProps

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl PartialEq for BadgeProps

fn eq(&self, other: &BadgeProps) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl Properties for BadgeProps

where Self: Clone,

type Builder = BadgePropsBuilder<((), (), (), (), (), (), (), (), ())>

The type of the builder for this component. Used to create “in-progress” versions of the props.

fn builder() -> Self::Builder

Create a builder for this component.

fn memoize(&mut self, new: &Self) -> bool

Make the old props equal to the new props. Return if the props were equal and should be memoized.

fn into_vcomponent<M>( self, render_fn: impl ComponentFunction<Self, M>, ) -> VComponent

where M: 'static,

Create a component from the props.

impl StructuralPartialEq for BadgeProps