diff --git a/examples/checkbox/src/main.rs b/examples/checkbox/src/main.rs index 99c859a7..8dee153b 100644 --- a/examples/checkbox/src/main.rs +++ b/examples/checkbox/src/main.rs @@ -39,11 +39,13 @@ impl Example { } fn view(&self) -> Element<'_, Message> { - let default_checkbox = checkbox("Default", self.default) + let default_checkbox = checkbox(self.default) + .label("Default") .on_toggle(Message::DefaultToggled); let styled_checkbox = |label| { - checkbox(label, self.styled) + checkbox(self.styled) + .label(label) .on_toggle_maybe(self.default.then_some(Message::StyledToggled)) }; @@ -55,7 +57,8 @@ impl Example { ] .spacing(20); - let custom_checkbox = checkbox("Custom", self.custom) + let custom_checkbox = checkbox(self.custom) + .label("Custom") .on_toggle(Message::CustomToggled) .icon(checkbox::Icon { font: ICON_FONT, diff --git a/examples/custom_shader/src/main.rs b/examples/custom_shader/src/main.rs index 54a1c709..5418bcdd 100644 --- a/examples/custom_shader/src/main.rs +++ b/examples/custom_shader/src/main.rs @@ -73,7 +73,8 @@ impl IcedCubes { .step(0.01) .width(100), ), - checkbox("Show Depth Buffer", self.scene.show_depth_buffer) + checkbox(self.scene.show_depth_buffer) + .label("Show Depth Buffer") .on_toggle(Message::ShowDepthBuffer), ] .spacing(40); diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs index cde7eac2..709219d7 100644 --- a/examples/events/src/main.rs +++ b/examples/events/src/main.rs @@ -63,7 +63,8 @@ impl Events { .map(Element::from), ); - let toggle = checkbox("Listen to runtime events", self.enabled) + let toggle = checkbox(self.enabled) + .label("Listen to runtime events") .on_toggle(Message::Toggled); let exit = button(text("Exit").width(Fill).align_x(Center)) diff --git a/examples/ferris/src/main.rs b/examples/ferris/src/main.rs index a43fcdab..f706ce01 100644 --- a/examples/ferris/src/main.rs +++ b/examples/ferris/src/main.rs @@ -153,7 +153,8 @@ impl Image { self.rotation.degrees(), Message::RotationChanged ), - checkbox("Spin!", self.spin) + checkbox(self.spin) + .label("Spin!") .text_size(12) .on_toggle(Message::SpinToggled) .size(12) diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs index 8e865a5c..2cec8fe0 100644 --- a/examples/game_of_life/src/main.rs +++ b/examples/game_of_life/src/main.rs @@ -162,7 +162,9 @@ fn view_controls<'a>( row![ playback_controls, speed_controls, - checkbox("Grid", is_grid_enabled).on_toggle(Message::ToggleGrid), + checkbox(is_grid_enabled) + .label("Grid") + .on_toggle(Message::ToggleGrid), row![ pick_list(preset::ALL, Some(preset), Message::PresetPicked), button("Clear") diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 05505f35..187e1204 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -78,7 +78,8 @@ impl Gradient { .align_y(Center); let transparency_toggle = iced::widget::Container::new( - checkbox("Transparent window", transparent) + checkbox(transparent) + .label("Transparent window") .on_toggle(Message::TransparentToggled), ) .padding(8); diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs index b21f2094..4907f5a4 100644 --- a/examples/layout/src/main.rs +++ b/examples/layout/src/main.rs @@ -71,7 +71,8 @@ impl Layout { let header = row![ text(self.example.title).size(20).font(Font::MONOSPACE), space::horizontal(), - checkbox("Explain", self.explain) + checkbox(self.explain) + .label("Explain") .on_toggle(Message::ExplainToggled), pick_list(Theme::ALL, self.theme.as_ref(), Message::ThemeSelected) .placeholder("Theme"), diff --git a/examples/progress_bar/src/main.rs b/examples/progress_bar/src/main.rs index 8e43f090..89a94107 100644 --- a/examples/progress_bar/src/main.rs +++ b/examples/progress_bar/src/main.rs @@ -58,7 +58,8 @@ impl Progress { ) }, center_x( - checkbox("Vertical", self.is_vertical) + checkbox(self.is_vertical) + .label("Vertical") .on_toggle(Message::ToggleVertical) ), ] diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs index f979f6f2..6ce72ad7 100644 --- a/examples/styling/src/main.rs +++ b/examples/styling/src/main.rs @@ -133,10 +133,11 @@ impl Styling { .width(Fill) .height(Fill); - let check = checkbox("Check me!", self.checkbox_value) + let check = checkbox(self.checkbox_value) + .label("Check me!") .on_toggle(Message::CheckboxToggled); - let check_disabled = checkbox("Disabled", self.checkbox_value); + let check_disabled = checkbox(self.checkbox_value).label("Disabled"); let toggle = toggler(self.toggler_value) .label("Toggle me!") diff --git a/examples/svg/src/main.rs b/examples/svg/src/main.rs index 5d5352f5..06c1314f 100644 --- a/examples/svg/src/main.rs +++ b/examples/svg/src/main.rs @@ -37,9 +37,9 @@ impl Tiger { }, }); - let apply_color_filter = - checkbox("Apply a color filter", self.apply_color_filter) - .on_toggle(Message::ToggleColorFilter); + let apply_color_filter = checkbox(self.apply_color_filter) + .label("Apply a color filter") + .on_toggle(Message::ToggleColorFilter); center(column![svg, center_x(apply_color_filter)].spacing(20)) .padding(20) diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs index 2510cf5b..06fe11d1 100644 --- a/examples/todos/src/main.rs +++ b/examples/todos/src/main.rs @@ -339,7 +339,8 @@ impl Task { fn view(&self, i: usize) -> Element<'_, TaskMessage> { match &self.state { TaskState::Idle => { - let checkbox = checkbox(&self.description, self.completed) + let checkbox = checkbox(self.completed) + .label(&self.description) .on_toggle(TaskMessage::Completed) .width(Fill) .size(17) diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 4afb8ac0..9c229ac3 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -386,11 +386,9 @@ impl Tour { .push(slider(100..=500, width, Message::ImageWidthChanged)) .push(text!("Width: {width} px").width(Fill).align_x(Center)) .push( - checkbox( - "Use nearest interpolation", - filter_method == image::FilterMethod::Nearest, - ) - .on_toggle(Message::ImageUseNearestToggled), + checkbox(filter_method == image::FilterMethod::Nearest) + .label("Use nearest interpolation") + .on_toggle(Message::ImageUseNearestToggled), ) .align_x(Center) } @@ -441,11 +439,13 @@ impl Tour { .push("Use a text input to ask for different kinds of information.") .push(text_input.secure(is_secure)) .push( - checkbox("Enable password mode", is_secure) + checkbox(is_secure) + .label("Enable password mode") .on_toggle(Message::ToggleSecureInput), ) .push( - checkbox("Show icon", is_showing_icon) + checkbox(is_showing_icon) + .label("Show icon") .on_toggle(Message::ToggleTextInputIcon), ) .push( @@ -474,7 +474,8 @@ impl Tour { see element boundaries.", ) .push( - checkbox("Explain layout", self.debug) + checkbox(self.debug) + .label("Explain layout") .on_toggle(Message::DebugToggled), ) .push("Feel free to go back and take a look.") diff --git a/examples/vectorial_text/src/main.rs b/examples/vectorial_text/src/main.rs index bf0fd657..7cbaf02a 100644 --- a/examples/vectorial_text/src/main.rs +++ b/examples/vectorial_text/src/main.rs @@ -58,7 +58,8 @@ impl VectorialText { column![ canvas(&self.state).width(Fill).height(Fill), column![ - checkbox("Use Japanese", self.state.use_japanese,) + checkbox(self.state.use_japanese,) + .label("Use Japanese") .on_toggle(Message::ToggleJapanese), row![ slider_with_label( diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index 80be7180..c15455c8 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -16,7 +16,8 @@ //! } //! //! fn view(state: &State) -> Element<'_, Message> { -//! checkbox("Toggle me!", state.is_checked) +//! checkbox(state.is_checked) +//! .label("Toggle me!") //! .on_toggle(Message::CheckboxToggled) //! .into() //! } @@ -63,7 +64,8 @@ use crate::core::{ /// } /// /// fn view(state: &State) -> Element<'_, Message> { -/// checkbox("Toggle me!", state.is_checked) +/// checkbox(state.is_checked) +/// .label("Toggle me!") /// .on_toggle(Message::CheckboxToggled) /// .into() /// } @@ -88,7 +90,7 @@ pub struct Checkbox< { is_checked: bool, on_toggle: Option Message + 'a>>, - label: String, + label: Option>, width: Length, size: f32, spacing: f32, @@ -110,22 +112,18 @@ where /// The default size of a [`Checkbox`]. const DEFAULT_SIZE: f32 = 16.0; - /// The default spacing of a [`Checkbox`]. - const DEFAULT_SPACING: f32 = 8.0; - /// Creates a new [`Checkbox`]. /// /// It expects: - /// * the label of the [`Checkbox`] /// * a boolean describing whether the [`Checkbox`] is checked or not - pub fn new(label: impl Into, is_checked: bool) -> Self { + pub fn new(is_checked: bool) -> Self { Checkbox { is_checked, on_toggle: None, - label: label.into(), + label: None, width: Length::Shrink, size: Self::DEFAULT_SIZE, - spacing: Self::DEFAULT_SPACING, + spacing: Self::DEFAULT_SIZE / 2.0, text_size: None, text_line_height: text::LineHeight::default(), text_shaping: text::Shaping::default(), @@ -143,6 +141,12 @@ where } } + /// Sets the label of the [`Checkbox`]. + pub fn label(mut self, label: impl text::IntoFragment<'a>) -> Self { + self.label = Some(label.into_fragment()); + self + } + /// Sets the function that will be called when the [`Checkbox`] is toggled. /// It will receive the new state of the [`Checkbox`] and must produce a /// `Message`. @@ -275,30 +279,38 @@ where ) -> layout::Node { layout::next_to_each_other( &limits.width(self.width), - self.spacing, + if self.label.is_some() { + self.spacing + } else { + 0.0 + }, |_| layout::Node::new(Size::new(self.size, self.size)), |limits| { - let state = tree + if let Some(label) = self.label.as_deref() { + let state = tree .state .downcast_mut::>(); - widget::text::layout( - state, - renderer, - limits, - &self.label, - widget::text::Format { - width: self.width, - height: Length::Shrink, - line_height: self.text_line_height, - size: self.text_size, - font: self.font, - align_x: text::Alignment::Default, - align_y: alignment::Vertical::Top, - shaping: self.text_shaping, - wrapping: self.text_wrapping, - }, - ) + widget::text::layout( + state, + renderer, + limits, + label, + widget::text::Format { + width: self.width, + height: Length::Shrink, + line_height: self.text_line_height, + size: self.text_size, + font: self.font, + align_x: text::Alignment::Default, + align_y: alignment::Vertical::Top, + shaping: self.text_shaping, + wrapping: self.text_wrapping, + }, + ) + } else { + layout::Node::new(Size::ZERO) + } }, ) } @@ -452,7 +464,9 @@ where _renderer: &Renderer, operation: &mut dyn widget::Operation, ) { - operation.text(None, layout.bounds(), &self.label); + if let Some(label) = self.label.as_deref() { + operation.text(None, layout.bounds(), label); + } } } diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs index a30e8b97..ebc6cd64 100644 --- a/widget/src/helpers.rs +++ b/widget/src/helpers.rs @@ -1250,7 +1250,8 @@ pub use crate::markdown::view as markdown; /// } /// /// fn view(state: &State) -> Element<'_, Message> { -/// checkbox("Toggle me!", state.is_checked) +/// checkbox(state.is_checked) +/// .label("Toggle me!") /// .on_toggle(Message::CheckboxToggled) /// .into() /// } @@ -1265,14 +1266,13 @@ pub use crate::markdown::view as markdown; /// ``` /// ![Checkbox drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/checkbox.png?raw=true) pub fn checkbox<'a, Message, Theme, Renderer>( - label: impl Into, is_checked: bool, ) -> Checkbox<'a, Message, Theme, Renderer> where Theme: checkbox::Catalog + 'a, Renderer: core::text::Renderer, { - Checkbox::new(label, is_checked) + Checkbox::new(is_checked) } /// Creates a new [`Radio`].