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 38-57)
35fn top_app_bars() -> material::Element<'static, Message> {
36 use material::widget::app_bar;
37
38 page::component_stack([
39 app_bar::with_status_bar(app_bar::small(
40 "Small",
41 Some(app_bar::icon_action("menu", Message::MenuPressed)),
42 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
43 ))
44 .into(),
45 app_bar::with_status_bar(app_bar::medium(
46 "Medium",
47 Some(app_bar::icon_action("menu", Message::MenuPressed)),
48 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
49 ))
50 .into(),
51 app_bar::with_status_bar(app_bar::large(
52 "Large",
53 Some(app_bar::icon_action("menu", Message::MenuPressed)),
54 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
55 ))
56 .into(),
57 ])
58 .into()
59}
60
61fn search_view(state: &Showcase) -> material::Element<'_, Message> {
62 let results = material::widget::list::group([
63 material::widget::list::one_line_icon("input", "Inputs").into(),
64 material::widget::list::one_line_icon("tune", "Controls").into(),
65 material::widget::list::one_line_icon("info", "Feedback").into(),
66 ]);
67
68 material::widget::search::docked_view(
69 "Search components",
70 &state.search_query,
71 Message::SearchChanged,
72 results,
73 )
74 .into()
75}
76
77fn bottom_app_bar() -> material::Element<'static, Message> {
78 use material::widget::app_bar;
79 use material::widget::button::{self, FabSize, FabVariant};
80
81 app_bar::bottom(
82 app_bar::icon_actions([
83 ("menu", Message::MenuPressed),
84 ("search", Message::Increment),
85 ("info", Message::Increment),
86 ]),
87 Some(button::action(
88 button::fab("add", FabVariant::Primary, FabSize::Standard),
89 Message::Increment,
90 )),
91 )
92 .into()
93}
94
95fn toolbars() -> material::Element<'static, Message> {
96 use material::widget::button::{self, FabSize, FabVariant};
97 use material::widget::toolbar;
98
99 let docked = toolbar::docked(toolbar::icon_actions([
100 ("arrow_back", Message::Decrement),
101 ("arrow_forward", Message::Increment),
102 ("add", Message::Increment),
103 ("tab", Message::Increment),
104 ("star", Message::Increment),
105 ("search", Message::Increment),
106 ]));
107
108 let docked_vibrant = toolbar::docked_vibrant([
109 toolbar::vibrant_icon_action("edit", Message::Increment),
110 toolbar::selected_vibrant_icon_action("check", Message::Increment),
111 toolbar::vibrant_icon_action("delete", Message::Decrement),
112 toolbar::vibrant_icon_action("more_vert", Message::MenuPressed),
113 ]);
114
115 let floating = toolbar::floating([
116 toolbar::selected_icon_action("format_bold", Message::Increment),
117 toolbar::icon_action("format_italic", Message::Increment),
118 toolbar::icon_action("format_underlined", Message::Increment),
119 toolbar::icon_action("format_color_text", Message::Increment),
120 ]);
121
122 let floating_vibrant = toolbar::floating_with_fab(
123 toolbar::floating_vibrant(toolbar::vibrant_icon_actions([
124 ("share", Message::Increment),
125 ("add", Message::Increment),
126 ("edit", Message::Increment),
127 ])),
128 button::fab("search", FabVariant::Primary, FabSize::Standard).on_press(Message::Increment),
129 );
130
131 let vertical = toolbar::vertical_floating([
132 toolbar::icon_action("undo", Message::Decrement),
133 toolbar::icon_action("redo", Message::Increment),
134 toolbar::selected_icon_action("palette", Message::Increment),
135 ]);
136
137 page::component_stack([
138 docked.into(),
139 docked_vibrant.into(),
140 page::row([floating.into(), vertical.into()]).into(),
141 floating_vibrant.into(),
142 ])
143 .into()
144}
145
146fn bottom_sheets(state: &Showcase) -> material::Element<'static, Message> {
147 let width = page::preview_width(state.window_size.width);
148 let standard = material::widget::sheet::standard_bottom(sheet_content(
149 "Standard bottom sheet",
150 "Coexists with the page and keeps secondary content available.",
151 ));
152
153 let modal_preview = page::preview_pane(material::widget::sheet::modal_overlay(sheet_content(
154 "Modal bottom sheet",
155 "Uses a scrim and blocks interaction behind the sheet.",
156 )));
157
158 page::component_stack([
159 page::centered_preview(width, standard).into(),
160 page::centered_preview(width, modal_preview).into(),
161 ])
162 .into()
163}
164
165fn side_sheets(state: &Showcase) -> material::Element<'static, Message> {
166 let width = page::preview_width(state.window_size.width);
167 let standard = page::aligned_preview_pane(
168 alignment::Horizontal::Right,
169 material::widget::sheet::standard_side(side_sheet_content(
170 "Standard side sheet",
171 "Coexists with the page while supporting content remains visible.",
172 )),
173 );
174
175 let modal = page::preview_pane(material::widget::sheet::modal_side_overlay(
176 material::widget::sheet::Side::Right,
177 side_sheet_content(
178 "Modal side sheet",
179 "Uses a scrim and keeps focus on a temporary side task.",
180 ),
181 ));
182
183 page::component_stack([
184 page::centered_preview(width, standard).into(),
185 page::centered_preview(width, modal).into(),
186 ])
187 .into()
188}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}