yew_bs/components/
display.rs

1use yew::prelude::*;
2use crate::components::common::Breakpoint;
3#[derive(Clone, Copy, PartialEq, Debug)]
4pub enum DisplayValue {
5    None,
6    Block,
7    Inline,
8    InlineBlock,
9    Flex,
10    InlineFlex,
11    Grid,
12    InlineGrid,
13    Table,
14    TableRow,
15    TableCell,
16}
17impl DisplayValue {
18    pub fn as_str(&self) -> &'static str {
19        match self {
20            DisplayValue::None => "none",
21            DisplayValue::Block => "block",
22            DisplayValue::Inline => "inline",
23            DisplayValue::InlineBlock => "inline-block",
24            DisplayValue::Flex => "flex",
25            DisplayValue::InlineFlex => "inline-flex",
26            DisplayValue::Grid => "grid",
27            DisplayValue::InlineGrid => "inline-grid",
28            DisplayValue::Table => "table",
29            DisplayValue::TableRow => "table-row",
30            DisplayValue::TableCell => "table-cell",
31        }
32    }
33}
34/// Props for the Display component
35#[derive(Properties, PartialEq)]
36pub struct DisplayProps {
37    /// The display value to apply
38    pub value: DisplayValue,
39    /// Optional breakpoint for responsive display (e.g., d-{breakpoint}-{value})
40    #[prop_or_default]
41    pub breakpoint: Option<Breakpoint>,
42    /// The child elements to be displayed
43    #[prop_or_default]
44    pub children: Children,
45    /// Additional CSS classes to apply
46    #[prop_or_default]
47    pub class: Option<AttrValue>,
48    /// The HTML element to use (defaults to div)
49    #[prop_or("div".into())]
50    pub tag: AttrValue,
51}
52/// A utility component for applying Bootstrap display utility classes
53///
54/// The Display component provides easy access to Bootstrap's display utilities,
55#[function_component(Display)]
56pub fn display(props: &DisplayProps) -> Html {
57    let mut classes = Classes::new();
58    let class_name = if let Some(breakpoint) = &props.breakpoint {
59        format!("d-{}-{}", breakpoint.as_str(), props.value.as_str())
60    } else {
61        format!("d-{}", props.value.as_str())
62    };
63    classes.push(class_name);
64    if let Some(custom_class) = &props.class {
65        classes.push(custom_class.to_string());
66    }
67    let tag = props.tag.clone();
68    html! {
69        <@ { tag.to_string() } class = { classes } > { for props.children.iter() } </@>
70    }
71}
72#[derive(Clone, Copy, PartialEq, Debug)]
73pub enum PrintDisplay {
74    None,
75    Block,
76    Inline,
77    InlineBlock,
78    Flex,
79    InlineFlex,
80    Grid,
81    InlineGrid,
82}
83impl PrintDisplay {
84    pub fn as_str(&self) -> &'static str {
85        match self {
86            PrintDisplay::None => "d-print-none",
87            PrintDisplay::Block => "d-print-block",
88            PrintDisplay::Inline => "d-print-inline",
89            PrintDisplay::InlineBlock => "d-print-inline-block",
90            PrintDisplay::Flex => "d-print-flex",
91            PrintDisplay::InlineFlex => "d-print-inline-flex",
92            PrintDisplay::Grid => "d-print-grid",
93            PrintDisplay::InlineGrid => "d-print-inline-grid",
94        }
95    }
96}
97/// Props for the PrintDisplay component
98#[derive(Properties, PartialEq)]
99pub struct PrintDisplayProps {
100    /// The print display value to apply
101    pub value: PrintDisplay,
102    /// The child elements
103    #[prop_or_default]
104    pub children: Children,
105    /// Additional CSS classes to apply
106    #[prop_or_default]
107    pub class: Option<AttrValue>,
108    /// The HTML element to use (defaults to div)
109    #[prop_or("div".into())]
110    pub tag: AttrValue,
111}
112/// A utility component for applying Bootstrap print display utility classes
113///
114/// The PrintDisplay component controls how elements are displayed when the page
115/// is printed, using Bootstrap's `d-print-*` utilities.
116#[function_component(PrintDisplayComponent)]
117pub fn print_display(props: &PrintDisplayProps) -> Html {
118    let mut classes = Classes::new();
119    classes.push(props.value.as_str());
120    if let Some(custom_class) = &props.class {
121        classes.push(custom_class.to_string());
122    }
123    let tag = props.tag.clone();
124    html! {
125        <@ { tag.to_string() } class = { classes } > { for props.children.iter() } </@>
126    }
127}
yew_bs/components/display.rs

yew_bs/components/
display.rs
