pub fn component_stack<'a, Message, Renderer>(
children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
) -> Column<'a, Message, Theme, Renderer>where
Message: 'a,
Renderer: Renderer + 'a,Expand description
Creates a full-width stack for repeated component previews.
Examples found in repository?
examples/showcase/pages/structure.rs (lines 22-41)
19fn top_app_bars() -> material::Element<'static, Message> {
20 use material::widget::app_bar;
21
22 page::component_stack([
23 app_bar::with_status_bar(app_bar::small(
24 "Small",
25 Some(app_bar::icon_action("menu", Message::MenuPressed)),
26 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
27 ))
28 .into(),
29 app_bar::with_status_bar(app_bar::medium(
30 "Medium",
31 Some(app_bar::icon_action("menu", Message::MenuPressed)),
32 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
33 ))
34 .into(),
35 app_bar::with_status_bar(app_bar::large(
36 "Large",
37 Some(app_bar::icon_action("menu", Message::MenuPressed)),
38 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
39 ))
40 .into(),
41 ])
42 .into()
43}
44
45fn search_view(state: &Showcase) -> material::Element<'_, Message> {
46 let results = material::widget::list::group([
47 material::widget::list::one_line_icon("input", "Inputs").into(),
48 material::widget::list::one_line_icon("tune", "Controls").into(),
49 material::widget::list::one_line_icon("info", "Feedback").into(),
50 ]);
51
52 material::widget::search::docked_view(
53 "Search components",
54 &state.search_query,
55 Message::SearchChanged,
56 results,
57 )
58 .into()
59}
60
61fn bottom_app_bar() -> material::Element<'static, Message> {
62 use material::widget::app_bar;
63 use material::widget::button::{self, FabSize, FabVariant};
64
65 app_bar::bottom(
66 app_bar::icon_actions([
67 ("menu", Message::MenuPressed),
68 ("search", Message::Increment),
69 ("info", Message::Increment),
70 ]),
71 Some(button::action(
72 button::fab("add", FabVariant::Primary, FabSize::Standard),
73 Message::Increment,
74 )),
75 )
76 .into()
77}
78
79fn toolbars() -> material::Element<'static, Message> {
80 use material::widget::button::{self, FabSize, FabVariant};
81 use material::widget::toolbar;
82
83 let docked = toolbar::docked(toolbar::icon_actions([
84 ("arrow_back", Message::Decrement),
85 ("arrow_forward", Message::Increment),
86 ("add", Message::Increment),
87 ("tab", Message::Increment),
88 ("star", Message::Increment),
89 ("search", Message::Increment),
90 ]));
91
92 let docked_vibrant = toolbar::docked_vibrant([
93 toolbar::vibrant_icon_action("edit", Message::Increment),
94 toolbar::selected_vibrant_icon_action("check", Message::Increment),
95 toolbar::vibrant_icon_action("delete", Message::Decrement),
96 toolbar::vibrant_icon_action("more_vert", Message::MenuPressed),
97 ]);
98
99 let floating = toolbar::floating([
100 toolbar::selected_icon_action("format_bold", Message::Increment),
101 toolbar::icon_action("format_italic", Message::Increment),
102 toolbar::icon_action("format_underlined", Message::Increment),
103 toolbar::icon_action("format_color_text", Message::Increment),
104 ]);
105
106 let floating_vibrant = toolbar::floating_with_fab(
107 toolbar::floating_vibrant(toolbar::vibrant_icon_actions([
108 ("share", Message::Increment),
109 ("add", Message::Increment),
110 ("edit", Message::Increment),
111 ])),
112 button::fab("search", FabVariant::Primary, FabSize::Standard).on_press(Message::Increment),
113 );
114
115 let vertical = toolbar::vertical_floating([
116 toolbar::icon_action("undo", Message::Decrement),
117 toolbar::icon_action("redo", Message::Increment),
118 toolbar::selected_icon_action("palette", Message::Increment),
119 ]);
120
121 page::component_stack([
122 docked.into(),
123 docked_vibrant.into(),
124 page::row([floating.into(), vertical.into()]).into(),
125 floating_vibrant.into(),
126 ])
127 .into()
128}
129
130fn bottom_sheets(state: &Showcase) -> material::Element<'static, Message> {
131 let width = page::preview_width(state.window_size.width);
132 let standard = material::widget::sheet::standard_bottom(sheet_content(
133 "Standard bottom sheet",
134 "Coexists with the page and keeps secondary content available.",
135 ));
136
137 let modal_preview = page::preview_pane(material::widget::sheet::modal_overlay(sheet_content(
138 "Modal bottom sheet",
139 "Uses a scrim and blocks interaction behind the sheet.",
140 )));
141
142 page::component_stack([
143 page::centered_preview(width, standard).into(),
144 page::centered_preview(width, modal_preview).into(),
145 ])
146 .into()
147}
148
149fn side_sheets(state: &Showcase) -> material::Element<'static, Message> {
150 let width = page::preview_width(state.window_size.width);
151 let standard = page::aligned_preview_pane(
152 alignment::Horizontal::Right,
153 material::widget::sheet::standard_side(side_sheet_content(
154 "Standard side sheet",
155 "Coexists with the page while supporting content remains visible.",
156 )),
157 );
158
159 let modal = page::preview_pane(material::widget::sheet::modal_side_overlay(
160 material::widget::sheet::Side::Right,
161 side_sheet_content(
162 "Modal side sheet",
163 "Uses a scrim and keeps focus on a temporary side task.",
164 ),
165 ));
166
167 page::component_stack([
168 page::centered_preview(width, standard).into(),
169 page::centered_preview(width, modal).into(),
170 ])
171 .into()
172}More examples
examples/showcase/pages/controls.rs (lines 113-122)
112fn selection_controls(state: &Showcase) -> material::Element<'_, Message> {
113 let switches = page::component_stack([
114 material::widget::checkbox::standard(
115 state.enabled,
116 "Enable actions",
117 Message::EnabledChanged,
118 ),
119 state
120 .theme_controller
121 .dark_mode_switch("Dark theme", Message::ThemeChanged),
122 ]);
123
124 let radios = page::row([
125 material::widget::radio::standard(
126 "Standard",
127 RadioChoice::Standard,
128 state.radio_choice,
129 Message::ChoiceSelected,
130 ),
131 material::widget::radio::standard(
132 "Expressive",
133 RadioChoice::Expressive,
134 state.radio_choice,
135 Message::ChoiceSelected,
136 ),
137 material::widget::radio::standard(
138 "Dense",
139 RadioChoice::Dense,
140 state.radio_choice,
141 Message::ChoiceSelected,
142 ),
143 ]);
144
145 page::spacious_stack([switches.into(), radios.into()]).into()
146}examples/showcase/pages/navigation.rs (lines 36-75)
35fn tabs(state: &Showcase) -> material::Element<'_, Message> {
36 page::component_stack([
37 material::widget::tabs::animated_tabs(
38 material::widget::tabs::Variant::Primary,
39 &state.primary_tab_state,
40 [
41 (
42 material::widget::tabs::Content::stacked_icon_label("input", "Inputs"),
43 Message::PrimaryTabSelected(TabChoice::Inputs),
44 ),
45 (
46 material::widget::tabs::Content::stacked_icon_label("tune", "Controls"),
47 Message::PrimaryTabSelected(TabChoice::Controls),
48 ),
49 (
50 material::widget::tabs::Content::stacked_icon_label("info", "Feedback"),
51 Message::PrimaryTabSelected(TabChoice::Feedback),
52 ),
53 ],
54 )
55 .into(),
56 material::widget::tabs::animated_tabs(
57 material::widget::tabs::Variant::Secondary,
58 &state.secondary_tab_state,
59 [
60 (
61 material::widget::tabs::Content::label("Overview"),
62 Message::SecondaryTabSelected(TabChoice::Inputs),
63 ),
64 (
65 material::widget::tabs::Content::label("Details"),
66 Message::SecondaryTabSelected(TabChoice::Controls),
67 ),
68 (
69 material::widget::tabs::Content::label("History"),
70 Message::SecondaryTabSelected(TabChoice::Feedback),
71 ),
72 ],
73 )
74 .into(),
75 ])
76 .into()
77}