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)
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 totext
,selected_key
orselected_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 ofeditable
.
-
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
andtext
.
-
-
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.
-