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_with_leading_icon("input", "Inputs").into(),
48 material::widget::list::one_line_with_leading_icon("tune", "Controls").into(),
49 material::widget::list::one_line_with_leading_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
64 app_bar::bottom(
65 app_bar::icon_actions([
66 ("menu", Message::MenuPressed),
67 ("search", Message::Increment),
68 ("info", Message::Increment),
69 ]),
70 Some(material::widget::button::primary_fab_action(
71 "add",
72 Message::Increment,
73 )),
74 )
75 .into()
76}
77
78fn toolbars() -> material::Element<'static, Message> {
79 use material::widget::toolbar;
80
81 let docked = toolbar::docked(toolbar::icon_actions([
82 ("arrow_back", Message::Decrement),
83 ("arrow_forward", Message::Increment),
84 ("add", Message::Increment),
85 ("tab", Message::Increment),
86 ("star", Message::Increment),
87 ("search", Message::Increment),
88 ]));
89
90 let docked_vibrant = toolbar::docked_vibrant([
91 toolbar::vibrant_icon_action("edit", Message::Increment),
92 toolbar::selected_vibrant_icon_action("check", Message::Increment),
93 toolbar::vibrant_icon_action("delete", Message::Decrement),
94 toolbar::vibrant_icon_action("more_vert", Message::MenuPressed),
95 ]);
96
97 let floating = toolbar::floating([
98 toolbar::selected_icon_action("format_bold", Message::Increment),
99 toolbar::icon_action("format_italic", Message::Increment),
100 toolbar::icon_action("format_underlined", Message::Increment),
101 toolbar::icon_action("format_color_text", Message::Increment),
102 ]);
103
104 let floating_vibrant = toolbar::floating_with_fab(
105 toolbar::floating_vibrant(toolbar::vibrant_icon_actions([
106 ("share", Message::Increment),
107 ("add", Message::Increment),
108 ("edit", Message::Increment),
109 ])),
110 material::widget::button::primary_fab("search").on_press(Message::Increment),
111 );
112
113 let vertical = toolbar::vertical_floating([
114 toolbar::icon_action("undo", Message::Decrement),
115 toolbar::icon_action("redo", Message::Increment),
116 toolbar::selected_icon_action("palette", Message::Increment),
117 ]);
118
119 page::component_stack([
120 docked.into(),
121 docked_vibrant.into(),
122 page::row([floating.into(), vertical.into()]).into(),
123 floating_vibrant.into(),
124 ])
125 .into()
126}
127
128fn bottom_sheets(state: &Showcase) -> material::Element<'static, Message> {
129 let width = page::preview_width(state.window_size.width);
130 let standard = material::widget::sheet::standard_bottom(sheet_content(
131 "Standard bottom sheet",
132 "Coexists with the page and keeps secondary content available.",
133 ));
134
135 let modal_preview = page::preview_pane(material::widget::sheet::modal_overlay(sheet_content(
136 "Modal bottom sheet",
137 "Uses a scrim and blocks interaction behind the sheet.",
138 )));
139
140 page::component_stack([
141 page::centered_preview(width, standard).into(),
142 page::centered_preview(width, modal_preview).into(),
143 ])
144 .into()
145}
146
147fn side_sheets(state: &Showcase) -> material::Element<'static, Message> {
148 let width = page::preview_width(state.window_size.width);
149 let standard = page::aligned_preview_pane(
150 alignment::Horizontal::Right,
151 material::widget::sheet::standard_side(side_sheet_content(
152 "Standard side sheet",
153 "Coexists with the page while supporting content remains visible.",
154 )),
155 );
156
157 let modal = page::preview_pane(material::widget::sheet::modal_side_overlay(
158 material::widget::sheet::Side::Right,
159 side_sheet_content(
160 "Modal side sheet",
161 "Uses a scrim and keeps focus on a temporary side task.",
162 ),
163 ));
164
165 page::component_stack([
166 page::centered_preview(width, standard).into(),
167 page::centered_preview(width, modal).into(),
168 ])
169 .into()
170}More examples
examples/showcase/pages/controls.rs (lines 105-116)
104fn selection_controls(state: &Showcase) -> material::Element<'_, Message> {
105 let switches = page::component_stack([
106 material::widget::checkbox::standard(
107 state.enabled,
108 "Enable actions",
109 Message::EnabledChanged,
110 )
111 .into(),
112 state
113 .theme_controller
114 .dark_mode_switch("Dark theme", Message::ThemeChanged)
115 .into(),
116 ]);
117
118 let radios = page::row([
119 material::widget::radio::standard(
120 "Standard",
121 RadioChoice::Standard,
122 state.radio_choice,
123 Message::ChoiceSelected,
124 )
125 .into(),
126 material::widget::radio::standard(
127 "Expressive",
128 RadioChoice::Expressive,
129 state.radio_choice,
130 Message::ChoiceSelected,
131 )
132 .into(),
133 material::widget::radio::standard(
134 "Dense",
135 RadioChoice::Dense,
136 state.radio_choice,
137 Message::ChoiceSelected,
138 )
139 .into(),
140 ]);
141
142 page::spacious_stack([switches.into(), radios.into()]).into()
143}examples/showcase/pages/navigation.rs (lines 38-75)
37fn tabs(state: &Showcase) -> material::Element<'_, Message> {
38 page::component_stack([
39 material::widget::tabs::animated_primary_icon_label_bar(
40 &state.primary_tab_state,
41 [
42 (
43 "input",
44 "Inputs",
45 Message::PrimaryTabSelected(TabChoice::Inputs),
46 ),
47 (
48 "tune",
49 "Controls",
50 Message::PrimaryTabSelected(TabChoice::Controls),
51 ),
52 (
53 "info",
54 "Feedback",
55 Message::PrimaryTabSelected(TabChoice::Feedback),
56 ),
57 ],
58 )
59 .into(),
60 material::widget::tabs::animated_secondary_label_bar(
61 &state.secondary_tab_state,
62 [
63 ("Overview", Message::SecondaryTabSelected(TabChoice::Inputs)),
64 (
65 "Details",
66 Message::SecondaryTabSelected(TabChoice::Controls),
67 ),
68 (
69 "History",
70 Message::SecondaryTabSelected(TabChoice::Feedback),
71 ),
72 ],
73 )
74 .into(),
75 ])
76 .into()
77}