HVLayout

The HVLayout and its subclasses provide a simple mechanism to horizontally or vertically stack child widgets. This can be done in different modes: box mode is suited for aligning content where natural size matters. The fix mode and split mode are more suited for high-level layout. See the HVLayout class for details.

Interactive Box layout example:

from flexx import app, event, ui

class Example(ui.HBox):
    def init(self):
        self.b1 = ui.Button(text='Horizontal', flex=0)
        self.b2 = ui.Button(text='Vertical', flex=1)
        self.b3 = ui.Button(text='Horizontal reversed', flex=2)
        self.b4 = ui.Button(text='Vertical reversed', flex=3)

    @event.reaction('b1.pointer_down')
    def _to_horizontal(self, *events):
        self.set_orientation('h')

    @event.reaction('b2.pointer_down')
    def _to_vertical(self, *events):
        self.set_orientation('v')

    @event.reaction('b3.pointer_down')
    def _to_horizontal_rev(self, *events):
        self.set_orientation('hr')

    @event.reaction('b4.pointer_down')
    def _to_vertical_r(self, *events):
        self.set_orientation('vr')
open in new tab

Also see examples: app_layout.py, splitters.py, box_vs_fix_layout.py, mondriaan.py.


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

Inherits from: Layout

A layout widget to distribute child widgets horizontally or vertically.

This is a versatile layout class which can operate in different orientations (horizontal, vertical, reversed), and in different modes:

In ‘fix’ mode, all available space is simply distributed corresponding to the children’s flex values. This can be convenient to e.g. split a layout in two halves.

In ‘box’ mode, each widget gets at least its natural size (if available), and any additional space is distributed corresponding to the children’s flex values. This is convenient for low-level layout of widgets, e.g. to align one or more buttons. It is common to use flex values of zero to give widgets just the size that they needs and use an empty widget with a flex of 1 to fill up any remaining space. This mode is based on CSS flexbox.

In ‘split’ mode, all available space is initially distributed corresponding to the children’s flex values. The splitters between the child widgets can be dragged by the user and positioned via an action. This is useful to give the user more control over the (high-level) layout.

In all modes, the layout is constrained by the minimum and maximum size of the child widgets (as set via style/CSS). Note that flexbox (and thus box mode) may not honour min/max sizes of widgets in child layouts.

Note that widgets with a flex value of zero may collapse if used inside a fix/split layout, or in a box layout but lacking a natural size. This can be resolved by assigning a minimum width/height to the widget. The exception is if all child widgets have a flex value of zero, in which case the available space is divided equally.

The node of this widget is a <div>. The outer nodes of the child widgets are layed-out using JavaScript of CSS, depending on the mode.

Also see the convenience classes: HFix, VFix, HBox, VBox, HSplit, VSplit.

properties: mode, orientation, padding, spacing, splitter_positions

emitters: user_splitter_positions

actions: set_from_flex_values, set_mode, set_orientation, set_padding, set_spacing, set_splitter_positions

mode

EnumProp – The mode in which this layout operates:

  • ‘BOX’: (default) each widget gets at least its natural size, and additional space is distributed corresponding to the flex values.
  • ‘FIX’: all available space is distributed corresponding to the flex values.
  • ‘SPLIT’: available space is initially distributed correspondong to the flex values, and can be modified by the user by dragging the splitters.
orientation

OrientationProp – The orientation of the child widgets. ‘h’ or ‘v’ for horizontal and vertical, or their reversed variants ‘hr’ and ‘vr’. Settable with values: 0, 1, ‘h’, ‘v’, ‘hr’, ‘vr’, ‘horizontal’, ‘vertical’, ‘left-to-right’, ‘right-to-left’, ‘top-to-bottom’, ‘bottom-to-top’ (insensitive to case and use of dashes).

padding

FloatProp – The empty space around the layout (in pixels).

set_from_flex_values()

action – Set the divider positions corresponding to the children’s flex values. Only has a visual effect in split-mode.

set_mode(*val)

action – Setter for the ‘mode’ property.

set_orientation(*val)

action – Setter for the ‘orientation’ property.

set_padding(*val)

action – Setter for the ‘padding’ property.

set_spacing(*val)

action – Setter for the ‘spacing’ property.

set_splitter_positions(*positions)

action – Set relative splitter posisions (None or values between 0 and 1). Only usable in split-mode.

spacing

FloatProp – The space between two child elements (in pixels).

splitter_positions

LocalProperty – The preferred relative positions of the splitters. The actual positions are subject to minsize and maxsize constraints (and natural sizes for box-mode).

user_splitter_positions(*positions)

emitter – Event emitted when the splitter is positioned by the user. The event has a positions attribute.

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

Inherits from: HVLayout

Horizontal layout that tries to give each widget its natural size and distributes any remaining space corresponding to the widget’s flex values. (I.e. an HVLayout with orientation ‘h’ and mode ‘box’.)

JS

alias of HBox

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

Inherits from: HVLayout

Horizontal layout that distributes the available space corresponding to the widget’s flex values. (I.e. an HVLayout with orientation ‘h’ and mode ‘fix’.)

JS

alias of HFix

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

Inherits from: HVLayout

Horizontal layout that initially distributes the available space corresponding to the widget’s flex values, and has draggable splitters. By default, this layout has a slightly larger spacing between the widgets. (I.e. an HVLayout with orientation ‘h’ and mode ‘split’.)

JS

alias of HSplit

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

Inherits from: HVLayout

Vertical layout that tries to give each widget its natural size and distributes any remaining space corresponding to the widget’s flex values. (I.e. an HVLayout with orientation ‘v’ and mode ‘box’.)

JS

alias of VBox

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

Inherits from: HVLayout

Vertical layout that distributes the available space corresponding to the widget’s flex values. (I.e. an HVLayout with orientation ‘v’ and mode ‘fix’.)

JS

alias of VFix

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

Inherits from: HVLayout

Vertical layout that initially distributes the available space corresponding to the widget’s flex values, and has draggable splitters. By default, this layout has a slightly larger spacing between the widgets. (I.e. an HVLayout with orientation ‘v’ and mode ‘split’.)

JS

alias of VSplit