zng/
grid.rs

Help
1#![cfg(feature = "grid")]
2
3//! Grid layout widgets.
4//!
5//! The [`Grid!`](struct@Grid) layout widget that defines a grid using column and row widgets and then size and position
6//! cell widgets into this grid.
7//!
8//! The example below defines a 3x3 grid that demonstrates different length units.
9//!
10//! ```
11//! use zng::prelude::*;
12//!
13//! # let _scope = APP.defaults();
14//! let length_color = [
15//!     (Length::Default, colors::RED), // default (auto)
16//!     (200.dip(), colors::GREEN),     // exact
17//!     (1.lft(), colors::BLUE),        // leftover
18//! ];
19//!
20//! # let _ =
21//! Grid! {
22//!     columns = length_color.iter().map(|(length, color)| grid::Column! {
23//!         width = length.clone();
24//!         widget::background_color = color.with_alpha(10.pct());
25//!     })
26//!     .collect::<UiVec>();
27//!
28//!     rows = length_color.iter().map(|(length, color)| grid::Row! {
29//!         height = length.clone();
30//!         widget::background_color = color.with_alpha(10.pct());
31//!     })
32//!     .collect::<UiVec>();
33//!
34//!     cells = (0..3).flat_map(|col| (0..3usize).map(move |row| Text! {
35//!         grid::cell::at = (col, row);
36//!         txt = formatx!("({col}, {row})");
37//!
38//!         txt_align = Align::CENTER;
39//!         layout::padding = 10;
40//!         widget::border = 1, colors::AZURE.transparent();
41//!         when *#gesture::is_hovered {
42//!             widget::border = 1, colors::AZURE;
43//!         }
44//!     }))
45//!     .collect::<UiVec>();
46//! };
47//! # ;
48//! ```
49//!
50//! The grid can also auto-grow rows or columns and auto-position cells, the following example
51//! defines a 3x6 grid that auto-grows rows (by default) and generates custom row widgets that
52//! have an alternating background color.
53//!
54//! ```
55//! use zng::prelude::*;
56//! # let _scope = APP.defaults();
57//!
58//! # let _ =
59//! Grid! {
60//!     columns = ui_vec![grid::Column!(1.lft()), grid::Column!(2.lft()), grid::Column!(1.lft())];
61//!     auto_grow_fn = wgt_fn!(|_| grid::Row! {
62//!         when *#is_odd {
63//!             widget::background_color = colors::BLACK.with_alpha(10.pct());
64//!         }
65//!     });
66//!
67//!      cells = (0..6).flat_map(|row| (0..3usize).map(move |col| Text! {
68//!         grid::cell::at = grid::cell::AT_AUTO;
69//!         txt = formatx!("({col}, {row})");
70//!
71//!         txt_align = Align::CENTER;
72//!         layout::padding = 10;
73//!         widget::border = 1, colors::AZURE.transparent();
74//!         when *#gesture::is_hovered {
75//!             widget::border = 1, colors::AZURE;
76//!         }
77//!     }))
78//!     .collect::<UiVec>();
79//! }
80//! # ;
81//! ```
82//!
83//! # Full API
84//!
85//! See [`zng_wgt_grid`] for the full widget API.
86
87pub use zng_wgt_grid::{AutoGrowFnArgs, AutoGrowMode, Cell, Column, Grid, Row, node};
88
89/// Cell widget and properties.
90pub mod cell {
91    pub use zng_wgt_grid::cell::{AT_AUTO, Cell, CellInfo, at, column, column_span, row, row_span, span};
92}
93
94/// Column widget and properties.
95pub mod column {
96    pub use zng_wgt_grid::column::{Column, get_index, get_index_len, get_rev_index, is_even, is_first, is_last, is_odd};
97}
98
99/// Row widget and properties.
100pub mod row {
101    pub use zng_wgt_grid::row::{Row, get_index, get_index_len, get_rev_index, is_even, is_first, is_last, is_odd};
102}
zng/grid.rs

zng/
grid.rs
