yew_bs/components/
focus_ring.rs

1use yew::prelude::*;
2#[derive(Clone, Copy, PartialEq, Debug)]
3pub enum FocusRingColor {
4    Primary,
5    Secondary,
6    Success,
7    Danger,
8    Warning,
9    Info,
10    Light,
11    Dark,
12}
13impl FocusRingColor {
14    pub fn as_str(&self) -> &'static str {
15        match self {
16            FocusRingColor::Primary => "focus-ring-primary",
17            FocusRingColor::Secondary => "focus-ring-secondary",
18            FocusRingColor::Success => "focus-ring-success",
19            FocusRingColor::Danger => "focus-ring-danger",
20            FocusRingColor::Warning => "focus-ring-warning",
21            FocusRingColor::Info => "focus-ring-info",
22            FocusRingColor::Light => "focus-ring-light",
23            FocusRingColor::Dark => "focus-ring-dark",
24        }
25    }
26}
27/// Props for the FocusRing component
28#[derive(Properties, PartialEq)]
29pub struct FocusRingProps {
30    /// Optional color for the focus ring
31    #[prop_or_default]
32    pub color: Option<FocusRingColor>,
33    /// The child elements to be wrapped with focus ring utility
34    #[prop_or_default]
35    pub children: Children,
36    /// Additional CSS classes to apply
37    #[prop_or_default]
38    pub class: Option<AttrValue>,
39    /// Tab index for focusability
40    #[prop_or(0)]
41    pub tabindex: i32,
42}
43/// A utility component for applying Bootstrap focus ring styles
44///
45/// The FocusRing component provides easy access to Bootstrap's focus ring
46#[function_component(FocusRing)]
47pub fn focus_ring(props: &FocusRingProps) -> Html {
48    let mut classes = Classes::new();
49    classes.push("focus-ring");
50    if let Some(color) = &props.color {
51        classes.push(color.as_str());
52    }
53    if let Some(custom_class) = &props.class {
54        classes.push(custom_class.to_string());
55    }
56    let tabindex_attr = if props.tabindex != 0 {
57        Some(props.tabindex.to_string())
58    } else {
59        None
60    };
61    html! {
62        < div class = { classes } tabindex = { tabindex_attr } > { for props.children
63        .iter() } </ div >
64    }
65}
yew_bs/components/focus_ring.rs

yew_bs/components/
focus_ring.rs
