Add ComboBox widget

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nested overlays. [#1719](https://github.com/iced-rs/iced/pull/1719)
 - Cursor availability. [#1904](https://github.com/iced-rs/iced/pull/1904)
 - Backend-specific primitives. [#1932](https://github.com/iced-rs/iced/pull/1932)
+- `ComboBox` widget. [#1954](https://github.com/iced-rs/iced/pull/1954)
 - `web-colors` feature flag to enable "sRGB linear" blending. [#1888](https://github.com/iced-rs/iced/pull/1888)
 - `PaneGrid` logic to split panes by drag & drop. [#1856](https://github.com/iced-rs/iced/pull/1856)
 - `PaneGrid` logic to drag & drop panes to the edges. [#1865](https://github.com/iced-rs/iced/pull/1865)

examples/combo_box/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "combo_box"
+version = "0.1.0"
+authors = ["Joao Freitas <jhff.15@gmail.com>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../..", features = ["debug"] }

examples/combo_box/README.md

@@ -0,0 +1,18 @@
+## Combo-Box
+
+A dropdown list of searchable and selectable options.
+
+It displays and positions an overlay based on the window position of the widget.
+
+The __[`main`]__ file contains all the code of the example.
+
+<div align="center">
+ <img src="combobox.gif">
+</div>
+
+You can run it with `cargo run`:
+```
+cargo run --package combo_box
+```
+
+[`main`]: src/main.rs

examples/combo_box/src/main.rs

@@ -0,0 +1,143 @@
+use iced::widget::{
+ column, combo_box, container, scrollable, text, vertical_space,
+};
+use iced::{Alignment, Element, Length, Sandbox, Settings};
+
+pub fn main() -> iced::Result {
+ Example::run(Settings::default())
+}
+
+struct Example {
+ languages: combo_box::State<Language>,
+ selected_language: Option<Language>,
+ text: String,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+ Selected(Language),
+ OptionHovered(Language),
+ Closed,
+}
+
+impl Sandbox for Example {
+ type Message = Message;
+
+ fn new() -> Self {
+ Self {
+ languages: combo_box::State::new(Language::ALL.to_vec()),
+ selected_language: None,
+ text: String::new(),
+ }
+ }
+
+ fn title(&self) -> String {
+ String::from("Combo box - Iced")
+ }
+
+ fn update(&mut self, message: Message) {
+ match message {
+ Message::Selected(language) => {
+ self.selected_language = Some(language);
+ self.text = language.hello().to_string();
+ self.languages.unfocus();
+ }
+ Message::OptionHovered(language) => {
+ self.text = language.hello().to_string();
+ }
+ Message::Closed => {
+ self.text = self
+ .selected_language
+ .map(|language| language.hello().to_string())
+ .unwrap_or_default();
+ }
+ }
+ }
+
+ fn view(&self) -> Element<Message> {
+ let combo_box = combo_box(
+ &self.languages,
+ "Type a language...",
+ self.selected_language.as_ref(),
+ Message::Selected,
+ )
+ .on_option_hovered(Message::OptionHovered)
+ .on_close(Message::Closed)
+ .width(250);
+
+ let content = column![
+ text(&self.text),
+ "What is your language?",
+ combo_box,
+ vertical_space(150),
+ ]
+ .width(Length::Fill)
+ .align_items(Alignment::Center)
+ .spacing(10);
+
+ container(scrollable(content))
+ .width(Length::Fill)
+ .height(Length::Fill)
+ .center_x()
+ .center_y()
+ .into()
+ }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum Language {
+ Danish,
+ #[default]
+ English,
+ French,
+ German,
+ Italian,
+ Portuguese,
+ Spanish,
+ Other,
+}
+
+impl Language {
+ const ALL: [Language; 8] = [
+ Language::Danish,
+ Language::English,
+ Language::French,
+ Language::German,
+ Language::Italian,
+ Language::Portuguese,
+ Language::Spanish,
+ Language::Other,
+ ];
+
+ fn hello(&self) -> &str {
+ match self {
+ Language::Danish => "Halloy!",
+ Language::English => "Hello!",
+ Language::French => "Salut!",
+ Language::German => "Hallo!",
+ Language::Italian => "Ciao!",
+ Language::Portuguese => "Olá!",
+ Language::Spanish => "¡Hola!",
+ Language::Other => "... hello?",
+ }
+ }
+}
+
+impl std::fmt::Display for Language {
+ fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+ write!(
+ f,
+ "{}",
+ match self {
+ Language::Danish => "Danish",
+ Language::English => "English",
+ Language::French => "French",
+ Language::German => "German",
+ Language::Italian => "Italian",
+ Language::Portuguese => "Portuguese",
+ Language::Spanish => "Spanish",
+ Language::Other => "Some other language",
+ }
+ )
+ }
+}