yew_bs/components/
sizing.rs

1use yew::prelude::*;
2#[derive(Clone, Copy, PartialEq, Debug)]
3pub enum Width {
4    W25,
5    W50,
6    W75,
7    W100,
8    Auto,
9}
10impl Width {
11    pub fn as_str(&self) -> &'static str {
12        match self {
13            Width::W25 => "w-25",
14            Width::W50 => "w-50",
15            Width::W75 => "w-75",
16            Width::W100 => "w-100",
17            Width::Auto => "w-auto",
18        }
19    }
20}
21/// Height variants available in Bootstrap
22#[derive(Clone, Copy, PartialEq, Debug)]
23pub enum Height {
24    H25,
25    H50,
26    H75,
27    H100,
28    Auto,
29}
30impl Height {
31    pub fn as_str(&self) -> &'static str {
32        match self {
33            Height::H25 => "h-25",
34            Height::H50 => "h-50",
35            Height::H75 => "h-75",
36            Height::H100 => "h-100",
37            Height::Auto => "h-auto",
38        }
39    }
40}
41#[derive(Clone, Copy, PartialEq, Debug)]
42pub enum MaxWidth {
43    Mw100,
44    Mw75,
45    Mw50,
46    Mw25,
47}
48impl MaxWidth {
49    pub fn as_str(&self) -> &'static str {
50        match self {
51            MaxWidth::Mw100 => "mw-100",
52            MaxWidth::Mw75 => "mw-75",
53            MaxWidth::Mw50 => "mw-50",
54            MaxWidth::Mw25 => "mw-25",
55        }
56    }
57}
58/// MaxHeight variants available in Bootstrap
59#[derive(Clone, Copy, PartialEq, Debug)]
60pub enum MaxHeight {
61    Mh100,
62    Mh75,
63    Mh50,
64    Mh25,
65}
66impl MaxHeight {
67    pub fn as_str(&self) -> &'static str {
68        match self {
69            MaxHeight::Mh100 => "mh-100",
70            MaxHeight::Mh75 => "mh-75",
71            MaxHeight::Mh50 => "mh-50",
72            MaxHeight::Mh25 => "mh-25",
73        }
74    }
75}
76#[derive(Clone, Copy, PartialEq, Debug)]
77pub enum ViewportSize {
78    Vw100,
79    Vh100,
80    Vmin100,
81    Vmax100,
82}
83impl ViewportSize {
84    pub fn as_str(&self) -> &'static str {
85        match self {
86            ViewportSize::Vw100 => "vw-100",
87            ViewportSize::Vh100 => "vh-100",
88            ViewportSize::Vmin100 => "vmin-100",
89            ViewportSize::Vmax100 => "vmax-100",
90        }
91    }
92}
93/// Props for the Sizing component
94#[derive(Properties, PartialEq)]
95pub struct SizingProps {
96    /// Width setting
97    #[prop_or_default]
98    pub width: Option<Width>,
99    /// Height setting
100    #[prop_or_default]
101    pub height: Option<Height>,
102    /// The child elements to be wrapped
103    #[prop_or_default]
104    pub children: Children,
105    /// Additional CSS classes to apply
106    #[prop_or_default]
107    pub class: Option<AttrValue>,
108}
109/// A utility component for applying Bootstrap sizing utilities
110///
111/// The Sizing component provides easy access to Bootstrap's width and height
112#[function_component(Sizing)]
113pub fn sizing(props: &SizingProps) -> Html {
114    let mut classes = Classes::new();
115    if let Some(width) = &props.width {
116        classes.push(width.as_str());
117    }
118    if let Some(height) = &props.height {
119        classes.push(height.as_str());
120    }
121    if let Some(custom_class) = &props.class {
122        classes.push(custom_class.to_string());
123    }
124    html! {
125        < div class = { classes } > { for props.children.iter() } </ div >
126    }
127}
yew_bs/components/sizing.rs

yew_bs/components/
sizing.rs
