summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/custom_widget.rs3
-rw-r--r--examples/pokedex.rs30
-rw-r--r--examples/stopwatch.rs45
-rw-r--r--examples/todos.rs111
-rw-r--r--examples/tour.rs60
5 files changed, 181 insertions, 68 deletions
diff --git a/examples/custom_widget.rs b/examples/custom_widget.rs
index cf2f7792..ca562ead 100644
--- a/examples/custom_widget.rs
+++ b/examples/custom_widget.rs
@@ -13,7 +13,7 @@ mod circle {
layout, Background, Color, Element, Hasher, Layout, Length,
MouseCursor, Point, Size, Widget,
};
- use iced_wgpu::{Primitive, Renderer};
+ use iced_wgpu::{Defaults, Primitive, Renderer};
pub struct Circle {
radius: u16,
@@ -54,6 +54,7 @@ mod circle {
fn draw(
&self,
_renderer: &mut Renderer,
+ _defaults: &Defaults,
layout: Layout<'_>,
_cursor_position: Point,
) -> (Primitive, MouseCursor) {
diff --git a/examples/pokedex.rs b/examples/pokedex.rs
index 2d595ec4..35d38251 100644
--- a/examples/pokedex.rs
+++ b/examples/pokedex.rs
@@ -1,6 +1,6 @@
use iced::{
- button, image, Align, Application, Button, Color, Column, Command,
- Container, Element, Image, Length, Row, Settings, Text,
+ button, image, Align, Application, Button, Column, Command, Container,
+ Element, Image, Length, Row, Settings, Text,
};
pub fn main() {
@@ -219,8 +219,28 @@ impl From<surf::Exception> for Error {
}
fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
- Button::new(state, Text::new(text).color(Color::WHITE))
- .background(Color::from_rgb(0.11, 0.42, 0.87))
- .border_radius(10)
+ Button::new(state, Text::new(text))
.padding(10)
+ .style(style::Button::Primary)
+}
+
+mod style {
+ use iced::{button, Background, Color};
+
+ pub enum Button {
+ Primary,
+ }
+
+ impl button::StyleSheet for Button {
+ fn active(&self) -> button::Style {
+ button::Style {
+ background: Some(Background::Color(match self {
+ Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+ })),
+ border_radius: 12,
+ shadow_offset: 1.0,
+ text_color: Color::WHITE,
+ }
+ }
+ }
}
diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs
index 7a7f0793..99746609 100644
--- a/examples/stopwatch.rs
+++ b/examples/stopwatch.rs
@@ -1,7 +1,6 @@
use iced::{
- button, Align, Application, Background, Button, Color, Column, Command,
- Container, Element, HorizontalAlignment, Length, Row, Settings,
- Subscription, Text,
+ button, Align, Application, Button, Column, Command, Container, Element,
+ HorizontalAlignment, Length, Row, Settings, Subscription, Text,
};
use std::time::{Duration, Instant};
@@ -99,30 +98,29 @@ impl Application for Stopwatch {
.width(Length::Shrink)
.size(40);
- let button = |state, label, color: [f32; 3]| {
+ let button = |state, label, style| {
Button::new(
state,
Text::new(label)
- .color(Color::WHITE)
.horizontal_alignment(HorizontalAlignment::Center),
)
.min_width(80)
- .background(Background::Color(color.into()))
- .border_radius(10)
.padding(10)
+ .style(style)
};
let toggle_button = {
let (label, color) = match self.state {
- State::Idle => ("Start", [0.11, 0.42, 0.87]),
- State::Ticking { .. } => ("Stop", [0.9, 0.4, 0.4]),
+ State::Idle => ("Start", style::Button::Primary),
+ State::Ticking { .. } => ("Stop", style::Button::Destructive),
};
button(&mut self.toggle, label, color).on_press(Message::Toggle)
};
- let reset_button = button(&mut self.reset, "Reset", [0.7, 0.7, 0.7])
- .on_press(Message::Reset);
+ let reset_button =
+ button(&mut self.reset, "Reset", style::Button::Secondary)
+ .on_press(Message::Reset);
let controls = Row::new()
.width(Length::Shrink)
@@ -180,3 +178,28 @@ mod time {
}
}
}
+
+mod style {
+ use iced::{button, Background, Color};
+
+ pub enum Button {
+ Primary,
+ Secondary,
+ Destructive,
+ }
+
+ impl button::StyleSheet for Button {
+ fn active(&self) -> button::Style {
+ button::Style {
+ background: Some(Background::Color(match self {
+ Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+ Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
+ Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2),
+ })),
+ border_radius: 12,
+ shadow_offset: 1.0,
+ text_color: Color::WHITE,
+ }
+ }
+ }
+}
diff --git a/examples/todos.rs b/examples/todos.rs
index 42e88f65..ca20183f 100644
--- a/examples/todos.rs
+++ b/examples/todos.rs
@@ -1,7 +1,7 @@
use iced::{
button, scrollable, text_input, Align, Application, Button, Checkbox,
- Color, Column, Command, Container, Element, Font, HorizontalAlignment,
- Length, Row, Scrollable, Settings, Text, TextInput,
+ Column, Command, Container, Element, Font, HorizontalAlignment, Length,
+ Row, Scrollable, Settings, Text, TextInput,
};
use serde::{Deserialize, Serialize};
@@ -291,12 +291,10 @@ impl Task {
.align_items(Align::Center)
.push(checkbox)
.push(
- Button::new(
- edit_button,
- edit_icon().color([0.5, 0.5, 0.5]),
- )
- .on_press(TaskMessage::Edit)
- .padding(10),
+ Button::new(edit_button, edit_icon())
+ .on_press(TaskMessage::Edit)
+ .padding(10)
+ .style(style::Button::Icon),
)
.into()
}
@@ -320,19 +318,13 @@ impl Task {
.push(
Button::new(
delete_button,
- Row::new()
- .spacing(10)
- .push(delete_icon().color(Color::WHITE))
- .push(
- Text::new("Delete")
- .width(Length::Shrink)
- .color(Color::WHITE),
- ),
+ Row::new().spacing(10).push(delete_icon()).push(
+ Text::new("Delete").width(Length::Shrink),
+ ),
)
.on_press(TaskMessage::Delete)
.padding(10)
- .border_radius(5)
- .background(Color::from_rgb(0.8, 0.2, 0.2)),
+ .style(style::Button::Destructive),
)
.into()
}
@@ -359,17 +351,12 @@ impl Controls {
let filter_button = |state, label, filter, current_filter| {
let label = Text::new(label).size(16).width(Length::Shrink);
- let button = if filter == current_filter {
- Button::new(state, label.color(Color::WHITE))
- .background(Color::from_rgb(0.2, 0.2, 0.7))
- } else {
- Button::new(state, label)
- };
-
- button
- .on_press(Message::FilterChanged(filter))
- .padding(8)
- .border_radius(10)
+ let button =
+ Button::new(state, label).style(style::Button::Filter {
+ selected: filter == current_filter,
+ });
+
+ button.on_press(Message::FilterChanged(filter)).padding(8)
};
Row::new()
@@ -562,3 +549,69 @@ impl SavedState {
Ok(())
}
}
+
+mod style {
+ use iced::{button, Background, Color};
+
+ pub enum Button {
+ Filter { selected: bool },
+ Icon,
+ Destructive,
+ }
+
+ impl button::StyleSheet for Button {
+ fn active(&self) -> button::Style {
+ match self {
+ Button::Filter { selected } => {
+ if *selected {
+ button::Style {
+ background: Some(Background::Color(
+ Color::from_rgb(0.2, 0.2, 0.7),
+ )),
+ border_radius: 10,
+ shadow_offset: 0.0,
+ text_color: Color::WHITE,
+ }
+ } else {
+ button::Style {
+ background: None,
+ border_radius: 0,
+ shadow_offset: 0.0,
+ text_color: Color::BLACK,
+ }
+ }
+ }
+ Button::Icon => button::Style {
+ background: None,
+ border_radius: 0,
+ shadow_offset: 0.0,
+ text_color: Color::from_rgb(0.5, 0.5, 0.5),
+ },
+ Button::Destructive => button::Style {
+ background: Some(Background::Color(Color::from_rgb(
+ 0.8, 0.2, 0.2,
+ ))),
+ border_radius: 5,
+ shadow_offset: 1.0,
+ text_color: Color::WHITE,
+ },
+ }
+ }
+
+ fn hovered(&self) -> button::Style {
+ let active = self.active();
+
+ button::Style {
+ text_color: match self {
+ Button::Icon => Color::from_rgb(0.2, 0.2, 0.7),
+ Button::Filter { selected } if !selected => {
+ Color::from_rgb(0.2, 0.2, 0.7)
+ }
+ _ => active.text_color,
+ },
+ shadow_offset: active.shadow_offset + 1.0,
+ ..active
+ }
+ }
+ }
+}
diff --git a/examples/tour.rs b/examples/tour.rs
index 91b75296..c7f866e8 100644
--- a/examples/tour.rs
+++ b/examples/tour.rs
@@ -62,8 +62,9 @@ impl Sandbox for Tour {
if steps.has_previous() {
controls = controls.push(
- secondary_button(back_button, "Back")
- .on_press(Message::BackPressed),
+ button(back_button, "Back")
+ .on_press(Message::BackPressed)
+ .style(style::Button::Secondary),
);
}
@@ -71,8 +72,9 @@ impl Sandbox for Tour {
if steps.can_continue() {
controls = controls.push(
- primary_button(next_button, "Next")
- .on_press(Message::NextPressed),
+ button(next_button, "Next")
+ .on_press(Message::NextPressed)
+ .style(style::Button::Primary),
);
}
@@ -692,29 +694,12 @@ fn button<'a, Message>(
) -> Button<'a, Message> {
Button::new(
state,
- Text::new(label)
- .color(Color::WHITE)
- .horizontal_alignment(HorizontalAlignment::Center),
+ Text::new(label).horizontal_alignment(HorizontalAlignment::Center),
)
.padding(12)
- .border_radius(12)
.min_width(100)
}
-fn primary_button<'a, Message>(
- state: &'a mut button::State,
- label: &str,
-) -> Button<'a, Message> {
- button(state, label).background(Color::from_rgb(0.11, 0.42, 0.87))
-}
-
-fn secondary_button<'a, Message>(
- state: &'a mut button::State,
- label: &str,
-) -> Button<'a, Message> {
- button(state, label).background(Color::from_rgb(0.4, 0.4, 0.4))
-}
-
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Language {
Rust,
@@ -757,6 +742,37 @@ pub enum Layout {
Column,
}
+mod style {
+ use iced::{button, Background, Color};
+
+ pub enum Button {
+ Primary,
+ Secondary,
+ }
+
+ impl button::StyleSheet for Button {
+ fn active(&self) -> button::Style {
+ button::Style {
+ background: Some(Background::Color(match self {
+ Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+ Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
+ })),
+ border_radius: 12,
+ shadow_offset: 1.0,
+ text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
+ }
+ }
+
+ fn hovered(&self) -> button::Style {
+ button::Style {
+ text_color: Color::WHITE,
+ shadow_offset: 2.0,
+ ..self.active()
+ }
+ }
+ }
+}
+
// This should be gracefully handled by Iced in the future. Probably using our
// own proc macro, or maybe the whole process is streamlined by `wasm-pack` at
// some point.
generated by cgit (git 2.34.1) at 2025-11-04 15:32:37 +0000