Struct vizia::views::Dropdown

pub struct Dropdown;

A dropdown is used to display some state with the ability to open a popup with options to change that state.

Usually a dropdown is used in the context of a “combobox” or “picklist” to allow the user to select from one of several discrete options. The dropdown takes two closures, one which shows the current state regardless of whether the dropdown is open or closed, and one which shows the contents while it is open.

Basic Dropdown

A basic dropdown displaying five options that the user can choose from.

Dropdown::new(
    cx,
    |cx| Label::new(cx, AppData::value),
    |cx| {
        for i in 0..5 {
            Label::new(cx, i)
                .on_press(move |cx| {
                    cx.emit(AppEvent::SetValue(i));
                    cx.emit(PopupEvent::Close); // close the popup
                })
                .width(Stretch(1.0));
        }
    },
)
.width(Pixels(100.0));

The line marked “close the popup” is not required for anything other than closing the popup - if you leave it out, the popup will simply not close until the user clicks out of the dropdown.

Custom Dropdown

The dropdown doesn’t have to be the current state and then a set of options - it can contain any set of views in either location. Here’s an example where you can use a textbox to filter a list of checkboxes which pop up when you click the textbox:

#[derive(Lens, Clone, PartialEq, Eq)]
struct AppData {
    values: [bool; 6],
    filter: String,
}


Dropdown::new(cx, |cx| {
    Textbox::new(cx, AppData::filter).on_edit(|cx, text| {
        cx.emit(AppEvent::SetFilter(text));
    })
    .width(Pixels(100.0))
    .height(Pixels(30.0))
}, |cx| {
    Binding::new(cx, AppData::root, |cx, lens| {
        let current = lens.get(cx);
        for i in 0..6 {
            if LABELS[i].to_lowercase().contains(&current.filter.to_lowercase()) {
                HStack::new(cx, move |cx| {
                    Checkbox::new(cx, AppData::values.map(move |x| x[i]))
                        .on_toggle(move |cx| {
                            cx.emit(AppEvent::SetValue(i, !current.values[i]));
                        });
                    Label::new(cx, LABELS[i]);
                });
            }
        }
    });
}).width(Pixels(100.0));

Implementations

impl Dropdown

pub fn new<F, L>( cx: &mut Context, trigger: L, content: F, ) -> Handle<'_, Dropdown>

where L: 'static + Fn(&mut Context), F: 'static + Fn(&mut Context),

Creates a new dropdown.

Example

Dropdown::new(cx, |cx| Label::new(cx, "Text"), |_| {});

Trait Implementations

impl View for Dropdown

fn element(&self) -> Option<&'static str>

Specifies a name for the view type which can be used as an element selector in css.

fn build<F>(self, cx: &mut Context, content: F) -> Handle<'_, Self>

where F: FnOnce(&mut Context),

Builds the view into the tree and returns a handle which can be used to apply style and layout modifiers to the view.

fn event(&mut self, cx: &mut EventContext<'_>, event: &mut Event)

Handles any events received by the view.

fn draw(&self, cx: &mut DrawContext<'_>, canvas: &Canvas)

Provides custom drawing for the view.

fn accessibility(&self, cx: &mut AccessContext<'_>, node: &mut AccessNode)