yew_bs/components/
order.rs

1use yew::prelude::*;
2use crate::components::common::Breakpoint;
3#[derive(Clone, Copy, PartialEq, Debug)]
4pub enum FlexOrder {
5    First,
6    Order0,
7    Order1,
8    Order2,
9    Order3,
10    Order4,
11    Order5,
12    Last,
13}
14impl FlexOrder {
15    pub fn as_str(&self) -> &'static str {
16        match self {
17            FlexOrder::First => "order-first",
18            FlexOrder::Order0 => "order-0",
19            FlexOrder::Order1 => "order-1",
20            FlexOrder::Order2 => "order-2",
21            FlexOrder::Order3 => "order-3",
22            FlexOrder::Order4 => "order-4",
23            FlexOrder::Order5 => "order-5",
24            FlexOrder::Last => "order-last",
25        }
26    }
27}
28/// Props for the Order component
29#[derive(Properties, PartialEq)]
30pub struct OrderProps {
31    /// The order value to apply
32    pub order: FlexOrder,
33    /// Optional breakpoint for responsive ordering
34    #[prop_or_default]
35    pub breakpoint: Option<Breakpoint>,
36    /// The child elements to be ordered
37    #[prop_or_default]
38    pub children: Children,
39    /// Additional CSS classes to apply
40    #[prop_or_default]
41    pub class: Option<AttrValue>,
42    /// The HTML element to use (defaults to div)
43    #[prop_or("div".into())]
44    pub tag: AttrValue,
45}
46/// A utility component for applying Bootstrap flexbox order utility classes
47///
48/// The Order component provides easy access to Bootstrap's order utilities,
49#[function_component(Order)]
50pub fn order(props: &OrderProps) -> Html {
51    let mut classes = Classes::new();
52    let class_name = if let Some(breakpoint) = &props.breakpoint {
53        format!(
54            "order-{}-{}", breakpoint.as_str(), props.order.as_str()
55            .strip_prefix("order-").unwrap()
56        )
57    } else {
58        props.order.as_str().to_string()
59    };
60    classes.push(class_name);
61    if let Some(custom_class) = &props.class {
62        classes.push(custom_class.to_string());
63    }
64    let tag = props.tag.clone();
65    html! {
66        <@ { tag.to_string() } class = { classes } > { for props.children.iter() } </@>
67    }
68}
yew_bs/components/order.rs

yew_bs/components/
order.rs
