showcase/pages/
inputs.rs

1use material::widget::page;
2use material_ui_rs as material;
3
4use super::super::{Message, Showcase};
5
6pub(super) fn view(state: &Showcase) -> material::Element<'_, Message> {
7    let input = material::widget::text_input::outlined("Write a note", &state.note)
8        .on_input(Message::TextChanged);
9
10    let editor = material::widget::text_editor::outlined_area(&state.editor_content)
11        .placeholder("Write details")
12        .on_action(Message::EditorAction);
13
14    let select_options = ["Assist", "Suggestion", "Filter"];
15    let select = material::widget::select::outlined(
16        select_options,
17        state.select_choice,
18        Message::SelectChanged,
19    )
20    .placeholder("Choose a chip")
21    .label("Chip type");
22
23    let combobox = material::widget::combobox::outlined_with_input(
24        &state.combobox_options,
25        "Search a chip",
26        &state.combobox_input,
27        state.combobox_choice.as_ref(),
28        Message::ComboboxSelected,
29    )
30    .label("Searchable chip")
31    .on_input(Message::ComboboxInputChanged);
32
33    page::sections([
34        page::section("Text fields", page::stack([input.into(), editor.into()])).into(),
35        page::section(
36            "Selection fields",
37            page::stack([select.into(), combobox.into()]),
38        )
39        .into(),
40        page::section("Pickers", pickers(state)).into(),
41        page::section("Search", search_bar(state)).into(),
42        page::section("Dividers", dividers()).into(),
43    ])
44    .into()
45}
46
47fn pickers(state: &Showcase) -> material::Element<'_, Message> {
48    page::stack([
49        material::widget::picker::date_picker(&state.date_picker, Message::DatePickerChanged),
50        material::widget::picker::date_range_picker(
51            &state.date_range_picker,
52            Message::DateRangePickerChanged,
53        ),
54        material::widget::picker::time_picker(&state.time_picker, Message::TimePickerChanged),
55    ])
56    .into()
57}
58
59fn search_bar(state: &Showcase) -> material::Element<'_, Message> {
60    material::widget::search::bar_with_trailing(
61        "Search Material components",
62        &state.search_query,
63        Message::SearchChanged,
64        Some(material::widget::app_bar::icon_action(
65            "tune",
66            Message::Increment,
67        )),
68    )
69    .into()
70}
71
72fn dividers() -> material::Element<'static, Message> {
73    page::compact_stack([
74        material::widget::rule::horizontal_full_width().into(),
75        page::divider_row([
76            material::text::body_large("Full").into(),
77            material::widget::rule::vertical_full_height().into(),
78            material::text::body_large("Inset").into(),
79        ])
80        .into(),
81        material::widget::rule::horizontal_inset().into(),
82    ])
83    .into()
84}
showcase/pages/inputs.rs

showcase/pages/
inputs.rs
