Struct Dropdown

pub struct Dropdown<T: 'static> { /* private fields */ }

A customizable dropdown view for selecting an item from a list.

The Dropdown struct provides several constructors, each offering different levels of customization and ease of use:

• Dropdown::new_rw: The simplest constructor, ideal for quick setup with minimal customization. It uses default views and assumes direct access to a signal that can be both read from and written to for driving the selection of an item.

• Dropdown::new: Similar to new_rw, but uses a read-only function for the active item, and requires that you manually provide an on_accept callback.

• Dropdown::custom: Offers full customization, letting you define custom view functions for both the main display and list items. Uses a read-only function for the active item and requires that you manually provide an on_accept callback.

• The dropdown also has methods Dropdown::main_view and Dropdown::list_item_view that let you override the main view function and list item view function respectively.

Choose the constructor that best fits your needs based on the level of customization required.

Usage with Enums

A common scenario is populating a dropdown menu from an enum. The widget-gallery example does this.

The below example creates a dropdown with three items, one for each character in our Character enum.

The strum crate is handy for this use case. This example uses the strum crate to create an iterator for our Character enum.

First, define the enum and implement Clone, strum::EnumIter, and Display on it:

use strum::IntoEnumIterator;

#[derive(Clone, strum::EnumIter)]
enum Character {
    Ori,
    Naru,
    Gumo,
}

impl std::fmt::Display for Character {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> Result<(), std::fmt::Error> {
        match self {
            Self::Ori => write!(f, "Ori"),
            Self::Naru => write!(f, "Naru"),
            Self::Gumo => write!(f, "Gumo"),
        }
    }
}

Then, create a signal:

let selected = RwSignal::new(Character::Ori);

Finally, create the dropdown using one of the available constructors, like Dropdown::new_rw:

Dropdown::new_rw(selected, Character::iter())

Styling

You can modify the behavior of the dropdown through the CloseOnAccept property. If the property is set to true, the dropdown will automatically close when an item is selected. If the property is set to false, the dropdown will not automatically close when an item is selected. The default is true. Styling Example:

// root view
empty().style(|s| {
    s.class(dropdown::DropdownClass, |s| {
        s.set(dropdown::CloseOnAccept, false)
    })
});

Implementations

impl<T: Clone> Dropdown<T>

pub fn default_main_view(item: T) -> AnyView

where T: Display,

Creates a default main view for the dropdown.

This function generates a view that displays the given item as text, along with a chevron-down icon to indicate that it’s a dropdown.

pub fn custom<MF, I, LF, AIF>( active_item: AIF, main_view: MF, iterator: I, list_item_fn: LF, ) -> Dropdown<T>

where MF: Fn(T) -> AnyView + 'static, I: IntoIterator<Item = T> + Clone + 'static, LF: Fn(T) -> AnyView + Clone + 'static, T: Clone + 'static, AIF: Fn() -> T + 'static,

Creates a new customizable dropdown.

You might want to use some of the simpler constructors like Dropdown::new or Dropdown::new_rw.

Example

let active_item = RwSignal::new(3);

Dropdown::custom(
    move || active_item.get(),
    |main_item| text(main_item).into_any(),
    1..=5,
    |list_item| text(list_item).into_any(),
)
.on_accept(move |item| active_item.set(item));

This function provides full control over the dropdown’s appearance and behavior by allowing custom view functions for both the main display and list items.

Arguments

• active_item - A function that returns the currently selected item.

• main_view - A function that takes a value of type T and returns an AnyView to be used as the main dropdown display.

• iterator - An iterator that provides the items to be displayed in the dropdown list.

• list_item_fn - A function that takes a value of type T and returns an AnyView to be used for each item in the dropdown list.

pub fn new<AIF, I>(active_item: AIF, iterator: I) -> Dropdown<T>

where AIF: Fn() -> T + 'static, I: IntoIterator<Item = T> + Clone + 'static, T: Clone + Display + 'static,

Creates a new dropdown with a read-only function for the active item.

Example

let active_item = RwSignal::new(3);

Dropdown::new(move || active_item.get(), 1..=5).on_accept(move |val| active_item.set(val));

This function is a convenience wrapper around Dropdown::new that uses default views for the main and list items.

See also Dropdown::new_rw.

Arguments

• active_item - A function that returns the currently selected item.

• iterator - An iterator that provides the items to be displayed in the dropdown list.

pub fn new_rw<AI, I>(active_item: AI, iterator: I) -> Dropdown<T>

where AI: SignalGet<T> + SignalUpdate<T> + Copy + 'static, I: IntoIterator<Item = T> + Clone + 'static, T: Clone + Display + 'static,

Creates a new dropdown with a read-write signal for the active item.

Example:

let dropdown_active_item = RwSignal::new(3);

Dropdown::new_rw(dropdown_active_item, 1..=5);

This function is a convenience wrapper around Dropdown::custom that uses default views for the main and list items.

Arguments

• active_item - A read-write signal representing the currently selected item. It must implement SignalGet<T> and SignalUpdate<T>.

• iterator - An iterator that provides the items to be displayed in the dropdown list.

pub fn main_view(self, main_view: impl Fn(T) -> Box<dyn View> + 'static) -> Self

Overrides the main view for the dropdown.

pub fn list_item_view( self, list_item_fn: impl Fn(T) -> Box<dyn View> + 'static, ) -> Self

Overrides the list view for each item in the dropdown list.

pub fn show_list(self, show: impl Fn() -> bool + 'static) -> Self

Sets a reactive condition for showing or hiding the dropdown list.

Reactivity

The show function will be re-run whenever any signal it depends on changes.

pub fn on_accept(self, on_accept: impl Fn(T) + 'static) -> Self

Sets a callback function to be called when an item is selected from the dropdown.

Only one on_accept callback can be set at a time.

pub fn on_open(self, on_open: impl Fn(bool) + 'static) -> Self

Sets a callback function to be called when the dropdown is opened.

Only one on_open callback can be set at a time.

pub fn dropdown_style( self, style: impl Fn(DropdownCustomStyle) -> DropdownCustomStyle + 'static, ) -> Self

Sets the custom style properties of the Dropdown.

Trait Implementations

impl<T: Clone> CustomStylable<DropdownCustomStyle> for Dropdown<T>

type DV = Dropdown<T>

fn custom_style(self, style: impl Fn(S) -> S + 'static) -> Self::DV

Add a custom style to the view with access to this view’s specialized custom style.

impl<T> Drop for Dropdown<T>

fn drop(&mut self)

Executes the destructor for this type.

impl<T: 'static + Clone> View for Dropdown<T>

fn id(&self) -> ViewId

fn debug_name(&self) -> Cow<'static, str>

fn style_pass(&mut self, cx: &mut StyleCx<'_>)

Use this method to style the view’s children.

fn compute_layout(&mut self, cx: &mut ComputeLayoutCx<'_>) -> Option<Rect>

Responsible for computing the layout of the view’s children.

fn update(&mut self, cx: &mut UpdateCx<'_>, state: Box<dyn Any>)

Use this method to react to changes in view-related state. You will usually send state to this hook manually using the View’s Id handle

fn event_before_children( &mut self, _cx: &mut EventCx<'_>, event: &Event, ) -> EventPropagation

fn view_style(&self) -> Option<Style>

fn view_class(&self) -> Option<StyleClassRef>

fn layout(&mut self, cx: &mut LayoutCx<'_>) -> NodeId

Use this method to layout the view’s children. Usually you’ll do this by calling LayoutCx::layout_node.

fn event_after_children( &mut self, cx: &mut EventCx<'_>, event: &Event, ) -> EventPropagation

fn paint(&mut self, cx: &mut PaintCx<'_>)

View-specific implementation. Will be called in PaintCx::paint_view. Usually you’ll call paint_view for every child view. But you might also draw text, adjust the offset, clip or draw text.

fn scroll_to( &mut self, cx: &mut AppState, target: ViewId, rect: Option<Rect>, ) -> bool

Scrolls the view and all direct and indirect children to bring the target view to be visible. Returns true if this view contains or is the target.