Dropdown widgets

from flexx import app, event, ui

class Example(ui.Widget):

    def init(self):
        self.combo = ui.ComboBox(editable=True,
                                 options=('foo', 'bar', 'spaaaaaaaaam', 'eggs'))
        self.label = ui.Label()

    @event.reaction
    def update_label(self):
        text = 'Combobox text: ' + self.combo.text
        if self.combo.selected_index is not None:
            text += ' (index %i)' % self.combo.selected_index
        self.label.set_text(text)
open in new tab

Also see examples: control_with_keys.py.


class flexx.ui.widgets._dropdown.BaseDropdown(*init_args, **kwargs)

Inherits from: Widget

Base class for drop-down-like widgets.

actions: expand

expand()

action – Expand the dropdown and give it focus, so that it can be used with the up/down keys.

class flexx.ui.ComboBox(*init_args, **kwargs)

Inherits from: BaseDropdown

The Combobox is a combination of a button and a popup list, optionally with an editable text. It can be used to select among a set of options in a more compact manner than a TreeWidget would. Optionally, the text of the combobox can be edited.

It is generally good practive to react to user_selected to detect user interaction, and react to text, selected_key or selected_index to keep track of all kinds of (incl. programatic) interaction .

When the combobox is expanded, the arrow keys can be used to select an item, and it can be made current by pressing Enter or spacebar. Escape can be used to collapse the combobox.

The node of this widget is a <span> with some child elements and quite a bit of CSS for rendering.

properties: editable, options, placeholder_text, selected_index, selected_key, text

emitters: user_selected

actions: set_editable, set_options, set_placeholder_text, set_selected_index, set_selected_key, set_text, update_selected_index

editable

BoolProp – Whether the combobox’s text is editable.

options

TupleProp – A list of tuples (key, text) representing the options. Both keys and texts are converted to strings if they are not already. For items that are given as a string, the key and text are the same. If a dict is given, it is transformed to key-text pairs.

placeholder_text

StringProp – The placeholder text to display in editable mode.

selected_index

IntProp – The currently selected item index. Can be -1 if no item has been selected or when the text was changed manually (if editable). Can also be programatically set.

selected_key

StringProp – The currently selected item key. Can be ‘’ if no item has been selected or when the text was changed manually (if editable). Can also be programatically set.

set_editable(*val)

action – Setter for the ‘editable’ property.

set_options(options)

action – set_options

set_placeholder_text(*val)

action – Setter for the ‘placeholder_text’ property.

set_selected_index(index)

action – set_selected_index

set_selected_key(key)

action – set_selected_key

set_text(*val)

action – Setter for the ‘text’ property.

text

StringProp – The text displayed on the widget. This property is set when an item is selected from the dropdown menu. When editable, the text is also set when the text is edited by the user. This property is settable programatically regardless of the value of editable.

update_selected_index(text)

action – update_selected_index

user_selected(index)

emitter – Event emitted when the user selects an item using the mouse or keyboard. The event has attributes index, key and text.

class flexx.ui.DropdownContainer(*init_args, **kwargs)

Inherits from: BaseDropdown

A dropdown widget that shows its children when expanded. This can be used to e.g. make a collapsable tree widget. Some styling may be required for the child widget to be sized appropriately.

Note: This widget is currently broken, because pointer events do not work in the contained widget (at least on Firefox).

properties: text

actions: set_text

set_text(*val)

action – Setter for the ‘text’ property.

text

StringProp – The text displayed on the dropdown widget.