showcase/pages/
navigation.rs

1use material::widget::page;
2use material_ui_rs as material;
3
4use super::super::{Message, NAV_DESTINATIONS, Showcase, TabChoice};
5
6pub(super) fn view(state: &Showcase) -> material::Element<'_, Message> {
7    let selection = state.navigation_selection();
8    let bar = material::widget::navigation::bar(&NAV_DESTINATIONS, selection, Message::Navigate);
9    let rail = material::widget::navigation::rail_with(
10        &NAV_DESTINATIONS,
11        selection,
12        Message::Navigate,
13        material::widget::navigation::NavigationRailOptions::default()
14            .menu(Message::MenuPressed)
15            .fit_content(),
16    );
17    let expanded_rail = material::widget::navigation::expanded_rail_with(
18        "Showcase",
19        &NAV_DESTINATIONS,
20        selection,
21        Message::Navigate,
22        Message::MenuPressed,
23        material::widget::navigation::ExpandedRailOptions::default().fit_content(),
24    );
25
26    page::sections([
27        page::section("Tabs", tabs(state)).into(),
28        page::section("Navigation bar", bar).into(),
29        page::section("Navigation rail with menu", rail).into(),
30        page::section("Expanded navigation rail", expanded_rail).into(),
31    ])
32    .into()
33}
34
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}
showcase/pages/navigation.rs

showcase/pages/
navigation.rs
