impulse_thaw/grid/
grid_item.rs

1use super::use_grid;
2use leptos::prelude::*;
3use thaw_utils::class_list;
4
5#[component]
6pub fn GridItem(
7    #[prop(optional, into)] class: MaybeProp<String>,
8    /// The number of columns occupied by the grid.
9    /// The grid item would be hidden if it's 0.
10    #[prop(default = 1u16.into(), into)]
11    column: Signal<u16>,
12    /// The number of intervals to the left of the grid.
13    #[prop(optional, into)]
14    offset: Signal<u16>,
15    children: Children,
16) -> impl IntoView {
17    let grid = use_grid();
18
19    let style = Memo::new(move |_| {
20        let mut style = String::new();
21        let offset = offset.get();
22        let column = column.get();
23        let x_gap = grid.x_gap.get();
24
25        if offset > 0 {
26            style.push_str(&format!(
27                "margin-left: calc((100% - {}px) / {} * {} + {}px);",
28                (column + offset - 1) * x_gap,
29                column + offset,
30                offset,
31                offset * x_gap
32            ));
33        }
34        style.push_str(&format!(
35            "grid-column: span {} / span {};",
36            column + offset,
37            column + offset
38        ));
39
40        style
41    });
42
43    view! {
44        <div class=class_list!["thaw-grid-item", class] style=move || style.get()>
45            {children()}
46        </div>
47    }
48}
impulse_thaw/grid/grid_item.rs

impulse_thaw/grid/
grid_item.rs
