summaryrefslogtreecommitdiffstats
path: root/examples/styling
diff options
context:
space:
mode:
Diffstat (limited to 'examples/styling')
-rw-r--r--examples/styling/src/main.rs576
1 files changed, 60 insertions, 516 deletions
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index b4ef3e87..cda53e87 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -1,8 +1,9 @@
-use iced::{
- button, scrollable, slider, text_input, Alignment, Button, Checkbox,
- Column, Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox,
- Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
+use iced::widget::{
+ button, checkbox, column, container, horizontal_rule, progress_bar, radio,
+ row, scrollable, slider, text, text_input, toggler, vertical_rule,
+ vertical_space,
};
+use iced::{Alignment, Element, Length, Sandbox, Settings, Theme};
pub fn main() -> iced::Result {
Styling::run(Settings::default())
@@ -10,12 +11,8 @@ pub fn main() -> iced::Result {
#[derive(Default)]
struct Styling {
- theme: style::Theme,
- scroll: scrollable::State,
- input: text_input::State,
+ theme: Theme,
input_value: String,
- button: button::State,
- slider: slider::State,
slider_value: f32,
checkbox_value: bool,
toggler_value: bool,
@@ -23,7 +20,7 @@ struct Styling {
#[derive(Debug, Clone)]
enum Message {
- ThemeChanged(style::Theme),
+ ThemeChanged(Theme),
InputChanged(String),
ButtonPressed,
SliderChanged(f32),
@@ -53,541 +50,88 @@ impl Sandbox for Styling {
}
}
- fn view(&mut self) -> Element<Message> {
- let choose_theme = style::Theme::ALL.iter().fold(
- Column::new().spacing(10).push(Text::new("Choose a theme:")),
+ fn view(&self) -> Element<Message> {
+ let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
+ column![text("Choose a theme:")].spacing(10),
|column, theme| {
- column.push(
- Radio::new(
- *theme,
- format!("{:?}", theme),
- Some(self.theme),
- Message::ThemeChanged,
- )
- .style(self.theme),
- )
+ column.push(radio(
+ format!("{:?}", theme),
+ *theme,
+ Some(self.theme),
+ Message::ThemeChanged,
+ ))
},
);
- let text_input = TextInput::new(
- &mut self.input,
+ let text_input = text_input(
"Type something...",
&self.input_value,
Message::InputChanged,
)
.padding(10)
- .size(20)
- .style(self.theme);
+ .size(20);
- let button = Button::new(&mut self.button, Text::new("Submit"))
+ let button = button("Submit")
.padding(10)
- .on_press(Message::ButtonPressed)
- .style(self.theme);
+ .on_press(Message::ButtonPressed);
- let slider = Slider::new(
- &mut self.slider,
- 0.0..=100.0,
- self.slider_value,
- Message::SliderChanged,
- )
- .style(self.theme);
+ let slider =
+ slider(0.0..=100.0, self.slider_value, Message::SliderChanged);
- let progress_bar =
- ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme);
+ let progress_bar = progress_bar(0.0..=100.0, self.slider_value);
- let scrollable = Scrollable::new(&mut self.scroll)
- .width(Length::Fill)
- .height(Length::Units(100))
- .style(self.theme)
- .push(Text::new("Scroll me!"))
- .push(Space::with_height(Length::Units(800)))
- .push(Text::new("You did it!"));
+ let scrollable = scrollable(
+ column![
+ "Scroll me!",
+ vertical_space(Length::Units(800)),
+ "You did it!"
+ ]
+ .width(Length::Fill),
+ )
+ .height(Length::Units(100));
- let checkbox = Checkbox::new(
- self.checkbox_value,
+ let checkbox = checkbox(
"Check me!",
+ self.checkbox_value,
Message::CheckboxToggled,
- )
- .style(self.theme);
+ );
- let toggler = Toggler::new(
- self.toggler_value,
+ let toggler = toggler(
String::from("Toggle me!"),
+ self.toggler_value,
Message::TogglerToggled,
)
.width(Length::Shrink)
- .spacing(10)
- .style(self.theme);
-
- let content = Column::new()
- .spacing(20)
- .padding(20)
- .max_width(600)
- .push(choose_theme)
- .push(Rule::horizontal(38).style(self.theme))
- .push(Row::new().spacing(10).push(text_input).push(button))
- .push(slider)
- .push(progress_bar)
- .push(
- Row::new()
- .spacing(10)
- .height(Length::Units(100))
- .align_items(Alignment::Center)
- .push(scrollable)
- .push(Rule::vertical(38).style(self.theme))
- .push(
- Column::new()
- .width(Length::Shrink)
- .spacing(20)
- .push(checkbox)
- .push(toggler),
- ),
- );
+ .spacing(10);
+
+ let content = column![
+ choose_theme,
+ horizontal_rule(38),
+ row![text_input, button].spacing(10),
+ slider,
+ progress_bar,
+ row![
+ scrollable,
+ vertical_rule(38),
+ column![checkbox, toggler].spacing(20)
+ ]
+ .spacing(10)
+ .height(Length::Units(100))
+ .align_items(Alignment::Center),
+ ]
+ .spacing(20)
+ .padding(20)
+ .max_width(600);
- Container::new(content)
+ container(content)
.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
- .style(self.theme)
.into()
}
-}
-
-mod style {
- use iced::{
- button, checkbox, container, progress_bar, radio, rule, scrollable,
- slider, text_input, toggler,
- };
-
- #[derive(Debug, Clone, Copy, PartialEq, Eq)]
- pub enum Theme {
- Light,
- Dark,
- }
-
- impl Theme {
- pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark];
- }
-
- impl Default for Theme {
- fn default() -> Theme {
- Theme::Light
- }
- }
-
- impl<'a> From<Theme> for Box<dyn container::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Container.into(),
- }
- }
- }
-
- impl<'a> From<Theme> for Box<dyn radio::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Radio.into(),
- }
- }
- }
-
- impl<'a> From<Theme> for Box<dyn text_input::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::TextInput.into(),
- }
- }
- }
-
- impl<'a> From<Theme> for Box<dyn button::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => light::Button.into(),
- Theme::Dark => dark::Button.into(),
- }
- }
- }
-
- impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Scrollable.into(),
- }
- }
- }
-
- impl<'a> From<Theme> for Box<dyn slider::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Slider.into(),
- }
- }
- }
-
- impl From<Theme> for Box<dyn progress_bar::StyleSheet> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::ProgressBar.into(),
- }
- }
- }
-
- impl<'a> From<Theme> for Box<dyn checkbox::StyleSheet + 'a> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Checkbox.into(),
- }
- }
- }
-
- impl From<Theme> for Box<dyn toggler::StyleSheet> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Toggler.into(),
- }
- }
- }
-
- impl From<Theme> for Box<dyn rule::StyleSheet> {
- fn from(theme: Theme) -> Self {
- match theme {
- Theme::Light => Default::default(),
- Theme::Dark => dark::Rule.into(),
- }
- }
- }
-
- mod light {
- use iced::{button, Color, Vector};
-
- pub struct Button;
-
- impl button::StyleSheet for Button {
- fn active(&self) -> button::Style {
- button::Style {
- background: Color::from_rgb(0.11, 0.42, 0.87).into(),
- border_radius: 12.0,
- shadow_offset: Vector::new(1.0, 1.0),
- text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
- ..button::Style::default()
- }
- }
-
- fn hovered(&self) -> button::Style {
- button::Style {
- text_color: Color::WHITE,
- shadow_offset: Vector::new(1.0, 2.0),
- ..self.active()
- }
- }
- }
- }
- mod dark {
- use iced::{
- button, checkbox, container, progress_bar, radio, rule, scrollable,
- slider, text_input, toggler, Color,
- };
-
- const SURFACE: Color = Color::from_rgb(
- 0x40 as f32 / 255.0,
- 0x44 as f32 / 255.0,
- 0x4B as f32 / 255.0,
- );
-
- const ACCENT: Color = Color::from_rgb(
- 0x6F as f32 / 255.0,
- 0xFF as f32 / 255.0,
- 0xE9 as f32 / 255.0,
- );
-
- const ACTIVE: Color = Color::from_rgb(
- 0x72 as f32 / 255.0,
- 0x89 as f32 / 255.0,
- 0xDA as f32 / 255.0,
- );
-
- const HOVERED: Color = Color::from_rgb(
- 0x67 as f32 / 255.0,
- 0x7B as f32 / 255.0,
- 0xC4 as f32 / 255.0,
- );
-
- pub struct Container;
-
- impl container::StyleSheet for Container {
- fn style(&self) -> container::Style {
- container::Style {
- background: Color::from_rgb8(0x36, 0x39, 0x3F).into(),
- text_color: Color::WHITE.into(),
- ..container::Style::default()
- }
- }
- }
-
- pub struct Radio;
-
- impl radio::StyleSheet for Radio {
- fn active(&self) -> radio::Style {
- radio::Style {
- background: SURFACE.into(),
- dot_color: ACTIVE,
- border_width: 1.0,
- border_color: ACTIVE,
- text_color: None,
- }
- }
-
- fn hovered(&self) -> radio::Style {
- radio::Style {
- background: Color { a: 0.5, ..SURFACE }.into(),
- ..self.active()
- }
- }
- }
-
- pub struct TextInput;
-
- impl text_input::StyleSheet for TextInput {
- fn active(&self) -> text_input::Style {
- text_input::Style {
- background: SURFACE.into(),
- border_radius: 2.0,
- border_width: 0.0,
- border_color: Color::TRANSPARENT,
- }
- }
-
- fn focused(&self) -> text_input::Style {
- text_input::Style {
- border_width: 1.0,
- border_color: ACCENT,
- ..self.active()
- }
- }
-
- fn hovered(&self) -> text_input::Style {
- text_input::Style {
- border_width: 1.0,
- border_color: Color { a: 0.3, ..ACCENT },
- ..self.focused()
- }
- }
-
- fn placeholder_color(&self) -> Color {
- Color::from_rgb(0.4, 0.4, 0.4)
- }
-
- fn value_color(&self) -> Color {
- Color::WHITE
- }
-
- fn selection_color(&self) -> Color {
- ACTIVE
- }
- }
-
- pub struct Button;
-
- impl button::StyleSheet for Button {
- fn active(&self) -> button::Style {
- button::Style {
- background: ACTIVE.into(),
- border_radius: 3.0,
- text_color: Color::WHITE,
- ..button::Style::default()
- }
- }
-
- fn hovered(&self) -> button::Style {
- button::Style {
- background: HOVERED.into(),
- text_color: Color::WHITE,
- ..self.active()
- }
- }
-
- fn pressed(&self) -> button::Style {
- button::Style {
- border_width: 1.0,
- border_color: Color::WHITE,
- ..self.hovered()
- }
- }
- }
-
- pub struct Scrollable;
-
- impl scrollable::StyleSheet for Scrollable {
- fn active(&self) -> scrollable::Scrollbar {
- scrollable::Scrollbar {
- background: SURFACE.into(),
- border_radius: 2.0,
- border_width: 0.0,
- border_color: Color::TRANSPARENT,
- scroller: scrollable::Scroller {
- color: ACTIVE,
- border_radius: 2.0,
- border_width: 0.0,
- border_color: Color::TRANSPARENT,
- },
- }
- }
-
- fn hovered(&self) -> scrollable::Scrollbar {
- let active = self.active();
-
- scrollable::Scrollbar {
- background: Color { a: 0.5, ..SURFACE }.into(),
- scroller: scrollable::Scroller {
- color: HOVERED,
- ..active.scroller
- },
- ..active
- }
- }
-
- fn dragging(&self) -> scrollable::Scrollbar {
- let hovered = self.hovered();
-
- scrollable::Scrollbar {
- scroller: scrollable::Scroller {
- color: Color::from_rgb(0.85, 0.85, 0.85),
- ..hovered.scroller
- },
- ..hovered
- }
- }
- }
-
- pub struct Slider;
-
- impl slider::StyleSheet for Slider {
- fn active(&self) -> slider::Style {
- slider::Style {
- rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }),
- handle: slider::Handle {
- shape: slider::HandleShape::Circle { radius: 9.0 },
- color: ACTIVE,
- border_width: 0.0,
- border_color: Color::TRANSPARENT,
- },
- }
- }
-
- fn hovered(&self) -> slider::Style {
- let active = self.active();
-
- slider::Style {
- handle: slider::Handle {
- color: HOVERED,
- ..active.handle
- },
- ..active
- }
- }
-
- fn dragging(&self) -> slider::Style {
- let active = self.active();
-
- slider::Style {
- handle: slider::Handle {
- color: Color::from_rgb(0.85, 0.85, 0.85),
- ..active.handle
- },
- ..active
- }
- }
- }
-
- pub struct ProgressBar;
-
- impl progress_bar::StyleSheet for ProgressBar {
- fn style(&self) -> progress_bar::Style {
- progress_bar::Style {
- background: SURFACE.into(),
- bar: ACTIVE.into(),
- border_radius: 10.0,
- }
- }
- }
-
- pub struct Checkbox;
-
- impl checkbox::StyleSheet for Checkbox {
- fn active(&self, is_checked: bool) -> checkbox::Style {
- checkbox::Style {
- background: if is_checked { ACTIVE } else { SURFACE }
- .into(),
- checkmark_color: Color::WHITE,
- border_radius: 2.0,
- border_width: 1.0,
- border_color: ACTIVE,
- text_color: None,
- }
- }
-
- fn hovered(&self, is_checked: bool) -> checkbox::Style {
- checkbox::Style {
- background: Color {
- a: 0.8,
- ..if is_checked { ACTIVE } else { SURFACE }
- }
- .into(),
- ..self.active(is_checked)
- }
- }
- }
-
- pub struct Toggler;
-
- impl toggler::StyleSheet for Toggler {
- fn active(&self, is_active: bool) -> toggler::Style {
- toggler::Style {
- background: if is_active { ACTIVE } else { SURFACE },
- background_border: None,
- foreground: if is_active { Color::WHITE } else { ACTIVE },
- foreground_border: None,
- }
- }
-
- fn hovered(&self, is_active: bool) -> toggler::Style {
- toggler::Style {
- background: if is_active { ACTIVE } else { SURFACE },
- background_border: None,
- foreground: if is_active {
- Color {
- a: 0.5,
- ..Color::WHITE
- }
- } else {
- Color { a: 0.5, ..ACTIVE }
- },
- foreground_border: None,
- }
- }
- }
-
- pub struct Rule;
-
- impl rule::StyleSheet for Rule {
- fn style(&self) -> rule::Style {
- rule::Style {
- color: SURFACE,
- width: 2,
- radius: 1.0,
- fill_mode: rule::FillMode::Padded(15),
- }
- }
- }
+ fn theme(&self) -> Theme {
+ self.theme
}
}
generated by cgit (git 2.34.1) at 2025-04-25 05:09:02 +0000