jinya_ui/layout/
row.rs

1use yew::{Component, ComponentLink, Html};
2use yew::prelude::*;
3
4pub fn get_css<'a>() -> &'a str {
5    // language=CSS
6    "
7.jinya-row {
8    width: 100%;
9    padding-top: 0.5rem;
10    padding-bottom: 0.5rem;
11    display: flex;
12    flex-wrap: wrap;
13}
14
15.jinya-row--align-end {
16    justify-content: flex-end;
17}
18
19.jinya-row--align-start {
20    justify-content: flex-start;
21}
22
23.jinya-row--align-center {
24    justify-content: center;
25}
26
27.jinya-row--align-space-between {
28    justify-content: space-between;
29}
30
31.jinya-row--align-stretch {
32    justify-content: stretch;
33}
34"
35}
36
37#[derive(Clone, PartialEq)]
38pub enum RowAlignment {
39    End,
40    Start,
41    SpaceBetween,
42    Center,
43    Stretch,
44}
45
46pub struct Row {
47    children: Children,
48    alignment: RowAlignment,
49}
50
51#[derive(Clone, PartialEq, Properties)]
52pub struct RowProps {
53    pub children: Children,
54    #[prop_or(RowAlignment::Start)]
55    pub alignment: RowAlignment,
56}
57
58impl Row {
59    fn get_alignment_class(&self) -> &str {
60        match self.alignment {
61            RowAlignment::End => "jinya-row jinya-row--align-end",
62            RowAlignment::Start => "jinya-row jinya-row--align-start",
63            RowAlignment::SpaceBetween => "jinya-row jinya-row--align-space-between",
64            RowAlignment::Center => "jinya-row jinya-row--align-center",
65            RowAlignment::Stretch => "jinya-row jinya-row--align-stretch",
66        }
67    }
68}
69
70impl Component for Row {
71    type Message = ();
72    type Properties = RowProps;
73
74    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
75        Row {
76            children: props.children,
77            alignment: props.alignment,
78        }
79    }
80
81    fn update(&mut self, _msg: Self::Message) -> bool {
82        false
83    }
84
85    fn change(&mut self, _props: Self::Properties) -> bool {
86        self.children = _props.children;
87        self.alignment = _props.alignment;
88        true
89    }
90
91    fn view(&self) -> Html {
92        html! {
93            <div class=self.get_alignment_class()>
94                {for self.children.iter().enumerate().map(|(_, mut child)| {
95                    child
96                })}
97            </div>
98        }
99    }
100}
jinya_ui/layout/row.rs

jinya_ui/layout/
row.rs
