2025-01-06 21:05:29 +01:00
|
|
|
use iced::keyboard;
|
2022-07-27 06:49:20 +02:00
|
|
|
use iced::widget::{
|
2025-02-22 00:34:55 +01:00
|
|
|
button, center, checkbox, column, container, horizontal_rule, pick_list,
|
|
|
|
|
progress_bar, row, scrollable, slider, text, text_input, toggler,
|
|
|
|
|
vertical_rule, vertical_space,
|
2020-01-06 18:44:45 +01:00
|
|
|
};
|
2025-01-06 21:05:29 +01:00
|
|
|
use iced::{Center, Element, Fill, Subscription, Theme};
|
2020-01-06 18:44:45 +01:00
|
|
|
|
2020-09-08 00:35:17 +02:00
|
|
|
pub fn main() -> iced::Result {
|
2024-06-19 01:53:40 +02:00
|
|
|
iced::application("Styling - Iced", Styling::update, Styling::view)
|
2025-01-06 21:05:29 +01:00
|
|
|
.subscription(Styling::subscription)
|
2024-03-16 05:33:47 +01:00
|
|
|
.theme(Styling::theme)
|
|
|
|
|
.run()
|
2020-01-06 18:44:45 +01:00
|
|
|
}
|
|
|
|
|
|
2020-01-06 18:46:47 +01:00
|
|
|
#[derive(Default)]
|
2020-01-06 18:44:45 +01:00
|
|
|
struct Styling {
|
2022-06-07 03:26:48 +02:00
|
|
|
theme: Theme,
|
2020-01-06 18:44:45 +01:00
|
|
|
input_value: String,
|
2020-01-07 00:28:08 +01:00
|
|
|
slider_value: f32,
|
2020-09-25 15:45:46 +02:00
|
|
|
checkbox_value: bool,
|
|
|
|
|
toggler_value: bool,
|
2020-01-06 18:44:45 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#[derive(Debug, Clone)]
|
|
|
|
|
enum Message {
|
2024-02-03 18:51:30 +01:00
|
|
|
ThemeChanged(Theme),
|
2020-01-06 18:44:45 +01:00
|
|
|
InputChanged(String),
|
|
|
|
|
ButtonPressed,
|
2020-01-07 00:28:08 +01:00
|
|
|
SliderChanged(f32),
|
2020-01-07 03:19:00 +01:00
|
|
|
CheckboxToggled(bool),
|
2020-09-25 15:45:46 +02:00
|
|
|
TogglerToggled(bool),
|
2025-01-06 21:05:29 +01:00
|
|
|
PreviousTheme,
|
|
|
|
|
NextTheme,
|
2020-01-06 18:44:45 +01:00
|
|
|
}
|
|
|
|
|
|
2024-03-16 05:33:47 +01:00
|
|
|
impl Styling {
|
2020-01-06 18:44:45 +01:00
|
|
|
fn update(&mut self, message: Message) {
|
|
|
|
|
match message {
|
2022-11-03 03:21:26 +01:00
|
|
|
Message::ThemeChanged(theme) => {
|
2024-02-03 18:51:30 +01:00
|
|
|
self.theme = theme;
|
2022-11-03 03:21:26 +01:00
|
|
|
}
|
2020-01-06 18:44:45 +01:00
|
|
|
Message::InputChanged(value) => self.input_value = value,
|
2021-04-12 23:23:47 -07:00
|
|
|
Message::ButtonPressed => {}
|
2020-01-07 00:28:08 +01:00
|
|
|
Message::SliderChanged(value) => self.slider_value = value,
|
2020-09-25 15:45:46 +02:00
|
|
|
Message::CheckboxToggled(value) => self.checkbox_value = value,
|
|
|
|
|
Message::TogglerToggled(value) => self.toggler_value = value,
|
2025-01-06 21:05:29 +01:00
|
|
|
Message::PreviousTheme | Message::NextTheme => {
|
|
|
|
|
if let Some(current) = Theme::ALL
|
|
|
|
|
.iter()
|
|
|
|
|
.position(|candidate| &self.theme == candidate)
|
|
|
|
|
{
|
|
|
|
|
self.theme = if matches!(message, Message::NextTheme) {
|
|
|
|
|
Theme::ALL[(current + 1) % Theme::ALL.len()].clone()
|
|
|
|
|
} else if current == 0 {
|
|
|
|
|
Theme::ALL
|
|
|
|
|
.last()
|
|
|
|
|
.expect("Theme::ALL must not be empty")
|
|
|
|
|
.clone()
|
|
|
|
|
} else {
|
|
|
|
|
Theme::ALL[current - 1].clone()
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-01-06 18:44:45 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-27 06:49:20 +02:00
|
|
|
fn view(&self) -> Element<Message> {
|
2024-02-03 18:51:30 +01:00
|
|
|
let choose_theme = column![
|
|
|
|
|
text("Theme:"),
|
2024-02-14 03:54:40 +01:00
|
|
|
pick_list(Theme::ALL, Some(&self.theme), Message::ThemeChanged)
|
2024-07-12 18:12:34 +02:00
|
|
|
.width(Fill),
|
2023-12-22 02:10:53 +05:30
|
|
|
]
|
2024-02-03 18:51:30 +01:00
|
|
|
.spacing(10);
|
2020-01-06 18:44:45 +01:00
|
|
|
|
2023-03-03 10:01:49 +03:00
|
|
|
let text_input = text_input("Type something...", &self.input_value)
|
2023-04-12 04:13:36 +02:00
|
|
|
.on_input(Message::InputChanged)
|
2023-03-03 10:01:49 +03:00
|
|
|
.padding(10)
|
|
|
|
|
.size(20);
|
2020-01-06 18:44:45 +01:00
|
|
|
|
2025-01-06 21:05:29 +01:00
|
|
|
let styled_button = |label| {
|
|
|
|
|
button(text(label).width(Fill).center())
|
|
|
|
|
.padding(10)
|
|
|
|
|
.on_press(Message::ButtonPressed)
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let primary = styled_button("Primary");
|
|
|
|
|
let success = styled_button("Success").style(button::success);
|
|
|
|
|
let warning = styled_button("Warning").style(button::warning);
|
|
|
|
|
let danger = styled_button("Danger").style(button::danger);
|
2020-01-06 18:44:45 +01:00
|
|
|
|
2022-07-27 06:49:20 +02:00
|
|
|
let slider =
|
2025-02-22 00:34:55 +01:00
|
|
|
|| slider(0.0..=100.0, self.slider_value, Message::SliderChanged);
|
2020-01-07 00:28:08 +01:00
|
|
|
|
2025-02-22 00:34:55 +01:00
|
|
|
let progress_bar = || progress_bar(0.0..=100.0, self.slider_value);
|
2020-01-07 01:53:26 +01:00
|
|
|
|
2023-03-16 20:23:25 +01:00
|
|
|
let scrollable = scrollable(column![
|
|
|
|
|
"Scroll me!",
|
2024-02-15 02:08:22 +01:00
|
|
|
vertical_space().height(800),
|
2023-03-16 20:23:25 +01:00
|
|
|
"You did it!"
|
|
|
|
|
])
|
2024-07-12 18:12:34 +02:00
|
|
|
.width(Fill)
|
2023-02-04 12:24:13 +01:00
|
|
|
.height(100);
|
2020-01-07 03:19:00 +01:00
|
|
|
|
2023-10-02 20:18:15 +02:00
|
|
|
let checkbox = checkbox("Check me!", self.checkbox_value)
|
|
|
|
|
.on_toggle(Message::CheckboxToggled);
|
2020-09-25 15:45:46 +02:00
|
|
|
|
2024-09-11 00:20:23 +02:00
|
|
|
let toggler = toggler(self.toggler_value)
|
|
|
|
|
.label("Toggle me!")
|
2024-09-11 00:17:16 +02:00
|
|
|
.on_toggle(Message::TogglerToggled)
|
|
|
|
|
.spacing(10);
|
2020-01-07 02:54:54 +01:00
|
|
|
|
2025-02-22 00:34:55 +01:00
|
|
|
let card = {
|
|
|
|
|
container(
|
|
|
|
|
column![
|
|
|
|
|
text("Card Example").size(24),
|
|
|
|
|
slider(),
|
|
|
|
|
progress_bar(),
|
|
|
|
|
]
|
|
|
|
|
.spacing(20),
|
|
|
|
|
)
|
|
|
|
|
.width(Fill)
|
|
|
|
|
.padding(20)
|
|
|
|
|
.style(container::bordered_box)
|
|
|
|
|
};
|
|
|
|
|
|
2022-07-27 06:49:20 +02:00
|
|
|
let content = column![
|
|
|
|
|
choose_theme,
|
|
|
|
|
horizontal_rule(38),
|
2025-01-06 21:05:29 +01:00
|
|
|
text_input,
|
|
|
|
|
row![primary, success, warning, danger]
|
|
|
|
|
.spacing(10)
|
|
|
|
|
.align_y(Center),
|
2025-02-22 00:34:55 +01:00
|
|
|
slider(),
|
|
|
|
|
progress_bar(),
|
2022-07-27 06:49:20 +02:00
|
|
|
row![
|
|
|
|
|
scrollable,
|
|
|
|
|
vertical_rule(38),
|
|
|
|
|
column![checkbox, toggler].spacing(20)
|
|
|
|
|
]
|
|
|
|
|
.spacing(10)
|
2023-02-04 12:24:13 +01:00
|
|
|
.height(100)
|
2024-07-12 18:12:34 +02:00
|
|
|
.align_y(Center),
|
2025-02-22 00:34:55 +01:00
|
|
|
card
|
2022-07-27 06:49:20 +02:00
|
|
|
]
|
|
|
|
|
.spacing(20)
|
|
|
|
|
.padding(20)
|
|
|
|
|
.max_width(600);
|
|
|
|
|
|
2024-05-03 09:11:46 +02:00
|
|
|
center(content).into()
|
2020-01-06 18:44:45 +01:00
|
|
|
}
|
2022-05-31 05:13:57 +02:00
|
|
|
|
2025-01-06 21:05:29 +01:00
|
|
|
fn subscription(&self) -> Subscription<Message> {
|
|
|
|
|
keyboard::on_key_press(|key, _modifiers| match key {
|
|
|
|
|
keyboard::Key::Named(
|
|
|
|
|
keyboard::key::Named::ArrowUp | keyboard::key::Named::ArrowLeft,
|
|
|
|
|
) => Some(Message::PreviousTheme),
|
|
|
|
|
keyboard::Key::Named(
|
|
|
|
|
keyboard::key::Named::ArrowDown
|
|
|
|
|
| keyboard::key::Named::ArrowRight,
|
|
|
|
|
) => Some(Message::NextTheme),
|
|
|
|
|
_ => None,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-31 05:13:57 +02:00
|
|
|
fn theme(&self) -> Theme {
|
2022-11-03 03:27:55 +01:00
|
|
|
self.theme.clone()
|
2020-01-06 18:44:45 +01:00
|
|
|
}
|
|
|
|
|
}
|