dioxus_bulma/components/
columns.rs

1use dioxus::prelude::*;
2use crate::utils::build_class;
3
4#[derive(Debug, Clone, Copy, PartialEq)]
5pub enum ColumnSize {
6    ThreeQuarters,
7    TwoThirds,
8    Half,
9    OneThird,
10    OneQuarter,
11    Full,
12    FourFifths,
13    ThreeFifths,
14    TwoFifths,
15    OneFifth,
16    Narrow,
17    One,
18    Two,
19    Three,
20    Four,
21    Five,
22    Six,
23    Seven,
24    Eight,
25    Nine,
26    Ten,
27    Eleven,
28    Twelve,
29}
30
31impl ColumnSize {
32    pub fn as_str(&self) -> &'static str {
33        match self {
34            ColumnSize::ThreeQuarters => "is-three-quarters",
35            ColumnSize::TwoThirds => "is-two-thirds",
36            ColumnSize::Half => "is-half",
37            ColumnSize::OneThird => "is-one-third",
38            ColumnSize::OneQuarter => "is-one-quarter",
39            ColumnSize::Full => "is-full",
40            ColumnSize::FourFifths => "is-four-fifths",
41            ColumnSize::ThreeFifths => "is-three-fifths",
42            ColumnSize::TwoFifths => "is-two-fifths",
43            ColumnSize::OneFifth => "is-one-fifth",
44            ColumnSize::Narrow => "is-narrow",
45            ColumnSize::One => "is-1",
46            ColumnSize::Two => "is-2",
47            ColumnSize::Three => "is-3",
48            ColumnSize::Four => "is-4",
49            ColumnSize::Five => "is-5",
50            ColumnSize::Six => "is-6",
51            ColumnSize::Seven => "is-7",
52            ColumnSize::Eight => "is-8",
53            ColumnSize::Nine => "is-9",
54            ColumnSize::Ten => "is-10",
55            ColumnSize::Eleven => "is-11",
56            ColumnSize::Twelve => "is-12",
57        }
58    }
59}
60
61#[derive(Props, Clone, PartialEq)]
62pub struct ColumnsProps {
63    #[props(default)]
64    pub multiline: Option<bool>,
65    #[props(default)]
66    pub gapless: Option<bool>,
67    #[props(default)]
68    pub mobile: Option<bool>,
69    #[props(default)]
70    pub desktop: Option<bool>,
71    #[props(default)]
72    pub centered: Option<bool>,
73    #[props(default)]
74    pub vcentered: Option<bool>,
75    #[props(default)]
76    pub id: Option<String>,
77    #[props(default)]
78    pub class: Option<String>,
79    #[props(default)]
80    pub style: Option<String>,
81    pub children: Element,
82}
83
84#[component]
85pub fn Columns(props: ColumnsProps) -> Element {
86    let multiline = props.multiline.unwrap_or(false);
87    let gapless = props.gapless.unwrap_or(false);
88    let mobile = props.mobile.unwrap_or(false);
89    let desktop = props.desktop.unwrap_or(false);
90    let centered = props.centered.unwrap_or(false);
91    let vcentered = props.vcentered.unwrap_or(false);
92    
93    let base_classes = vec!["columns"];
94    
95    let optional_classes = vec![
96        if multiline { Some("is-multiline".to_string()) } else { None },
97        if gapless { Some("is-gapless".to_string()) } else { None },
98        if mobile { Some("is-mobile".to_string()) } else { None },
99        if desktop { Some("is-desktop".to_string()) } else { None },
100        if centered { Some("is-centered".to_string()) } else { None },
101        if vcentered { Some("is-vcentered".to_string()) } else { None },
102        props.class.clone(),
103    ];
104    
105    let final_class = build_class(&base_classes, &optional_classes);
106    let columns_style = props.style.as_deref().unwrap_or("");
107
108    rsx! {
109        div {
110            class: "{final_class}",
111            style: "{columns_style}",
112            id: props.id.clone(),
113            {props.children}
114        }
115    }
116}
117
118#[derive(Props, Clone, PartialEq)]
119pub struct ColumnProps {
120    #[props(default)]
121    pub size: Option<ColumnSize>,
122    #[props(default)]
123    pub offset: Option<ColumnSize>,
124    #[props(default)]
125    pub narrow: Option<bool>,
126    #[props(default)]
127    pub id: Option<String>,
128    #[props(default)]
129    pub class: Option<String>,
130    #[props(default)]
131    pub style: Option<String>,
132    pub children: Element,
133}
134
135#[component]
136pub fn Column(props: ColumnProps) -> Element {
137    let narrow = props.narrow.unwrap_or(false);
138    
139    let base_classes = vec!["column"];
140    
141    let optional_classes = vec![
142        props.size.map(|s| s.as_str().to_string()),
143        props.offset.map(|o| format!("is-offset-{}", o.as_str().strip_prefix("is-").unwrap_or(o.as_str()))),
144        if narrow { Some("is-narrow".to_string()) } else { None },
145        props.class.clone(),
146    ];
147    
148    let final_class = build_class(&base_classes, &optional_classes);
149    let column_style = props.style.as_deref().unwrap_or("");
150
151    rsx! {
152        div {
153            class: "{final_class}",
154            style: "{column_style}",
155            id: props.id.clone(),
156            {props.children}
157        }
158    }
159}
dioxus_bulma/components/columns.rs

dioxus_bulma/components/
columns.rs
