RowLayout#

class alfred3.element.core.RowLayout(ncols: int, valign_cols: Optional[List[str]] = None, responsive: bool = True)[source]#

Bases: object

Provides layouting functionality for responsive horizontal positioning of elements.

Default behavior is to have equal-width columns with an automatic breakpoint on extra small screens (i.e. all columns get the bootstrap class ‘col-sm’ by default).

The layout’s width attributes can be accessed and changed to customize appearance. In this example, we change the width of the columns on screens of “small” and bigger width, so that we have narrow columns to the right and left (each taking up 2/12 of the available space), and one wide column (taking up 8/12 of the space) in the middle. On “extra small” screens, the columns will be stacked vertically and each take up the full width.

You can define widths for five breakpoints individually, allowing for fine-grained control (see attributes).

Parameters

  • ncols – Number of columns to arrange in a row.

  • valign_cols – List of vertical column alignments. Valid values are ‘auto’ (default), ‘top’, ‘center’, and ‘bottom’.

  • responsive – Boolean, indicating whether breakpoints should be responsive, or not.

Examples

layout = RowLayout(ncols=3) # 3 columns of equal width
layout.width_sm = [2, 8, 2]

Methods

col_breaks

Returns the column breakpoints for a specific column as strings for use as bootstrap classes.

format_breaks

Takes a list of column sizes (in integers from 1 to 12) and returns a corresponding list of formatted Bootstrap column classes.

Attributes

ncols

Number of columns

responsive

Indicates whether breakpoints should be responsive, or not.

valign_cols

Vertical column alignments.

width_lg

List of column widths on screens of size 'lg' or bigger (>=992px).

width_md

List of column widths on screens of size 'md' or bigger (>=768px).

width_sm

List of column widths on screens of size 'sm' or bigger (>=576px).

width_xl

List of column widths on screens of size 'xl' or bigger (>=1200px).

width_xs

List of column widths on screens of size 'xs' or bigger (<576px).