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