Dropdown¶

from flexx import app, ui

class Example(ui.Widget):

    def init(self):

        ui.ComboBox(text='chooce:', options=['foo', 'bar', 'spaaaam'])

from flexx import app, event, ui

class Example(ui.Widget):

    CSS = '''
        .flx-DropdownContainer > .flx-TreeWidget {
            min-height: 150px;
        }
    '''

    def init(self):

        # A nice and cosy tree view
        with ui.DropdownContainer(text='Scene graph'):
            with ui.TreeWidget(max_selected=1):
                for i in range(20):
                    ui.TreeItem(text='foo %i' % i, checked=False)

        # A combobox
        self.combo = ui.ComboBox(editable=True,
                                 options=('foo', 'bar', 'spaaaaaaaaam', 'eggs'))
        self.label = ui.Label()

    class JS:

        @event.connect('combo.text')
        def on_combobox_text(self, *events):
            self.label.text = 'Combobox text: ' + self.combo.text
            if self.combo.selected_index is not None:
                self.label.text += ' (index %i)' % self.combo.selected_index

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

Inherits from: Widget

Base class for drop-down-like widgets.

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. Connect to the text and/or selected_index properties to keep track of interactions.

editable¶

property – Whether the combobox’s text is editable.

options¶

property – A list of tuples (key, text) representing the options. 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¶

property – The placeholder text to display in editable mode.

selected_index¶

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

selected_key¶

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

text¶

property – 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.

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.

text¶

property – The text displayed on the widget.