impulse_thaw/grid/
mod.rs

1mod grid_item;
2
3pub use grid_item::*;
4use leptos::{context::Provider, prelude::*};
5use thaw_utils::class_list;
6
7#[component]
8pub fn Grid(
9    #[prop(optional, into)] class: MaybeProp<String>,
10    /// Number of grids displayed.
11    #[prop(default = 1u16.into(), into)]
12    cols: Signal<u16>,
13    // Horizontal gap.
14    #[prop(optional, into)] x_gap: Signal<u16>,
15    /// Vertical gap.
16    #[prop(optional, into)]
17    y_gap: Signal<u16>,
18    children: Children,
19) -> impl IntoView {
20    let style = Memo::new(move |_| {
21        let mut style = String::from("display: grid;");
22        style.push_str(&format!(
23            "grid-template-columns: repeat({}, minmax(0px, 1fr));",
24            cols.get()
25        ));
26        style.push_str(&format!("grid-gap: {}px {}px;", y_gap.get(), x_gap.get()));
27        style
28    });
29
30    view! {
31        <Provider value=GridInjection::new(x_gap)>
32            <div class=class_list!["thaw-grid", class] style=move || style.get()>
33                {children()}
34            </div>
35        </Provider>
36    }
37}
38
39#[derive(Clone)]
40pub(crate) struct GridInjection {
41    x_gap: Signal<u16>,
42}
43
44impl GridInjection {
45    pub fn new(x_gap: Signal<u16>) -> Self {
46        Self { x_gap }
47    }
48}
49
50pub(crate) fn use_grid() -> GridInjection {
51    expect_context()
52}
impulse_thaw/grid/mod.rs

impulse_thaw/grid/
mod.rs
