Stack#

class alfred3.element.core.Stack(*elements: alfred3.element.core.Element, **kwargs)[source]#

Bases: alfred3.element.core.Row

Stacks multiple elements on top of each other.

Stacks are intended for use in Rows. They allow you to flexibly arrange elements in a grid.

Parameters
  • *elements – The elements to stack.

  • **kwargs

    Inherited keyword arguments

    align

    Horizontal alignment of text in the element. Does not usually apply to labels. Think of it as an alignment that applies to the innermost layer of an element (while labels are generally located at outer layers). See LabelledElement for more on labelled elements. Can be left (default), center, right, or justify.

    elements

    The elements that you want to arrange in a row.

    elements_full_width

    A switch, telling the row whether you wish it to resize all elements in it to full-width (default: True). This switch exists, because some elements might default to a smaller width, but when using them in a Row, you usually want them to span the full width of their column.

    font_size

    Font size for text in the element. You can use a keyword or an exact specification. The available keywords are tiny, small, normal, big, and huge. The exact specification shoul ideally include a unit, such as 1rem, or 12pt. If you supply an integer without a unit, a unit of pt will be assumed. Defaults to normal.

    height

    Vertical height of the elements display area. Supply a string with a unit, e.g. 80px. Usually, the default is fine. For adding vertical space to a page, you should prefer the VerticalSpace element, as it is sematically more clear.

    instance_log

    If True, the element will use an instance-specific logger, thereby allowing detailed fine- tuning of its logging behavior.

    layout

    Can be one of the following: 1) An instance of RowLayout, or 2) a tuple of integers, specifying the allocation of horizontal space between the columns on small screens upwards (using bootstraps 12-column grid). Option 1) offers fine-tuned flexibility, 2) uses a default RowLayout and changes the RowLayout.width_sm attribute. By default, the layout is set automatically.

    name

    Name of the element. This should be a unique identifier. It will be used to identify the corresponding data in the final data set.

    position

    Horizontal position of the full element on the page. Values can be left, center (default), end, or any valid value for the justify-content flexbox utility. Takes effect only, when the element is not full-width.

    showif

    A dictionary, defining conditions that must be met for the element to be shown. The conditions take the form of key-value pairs, where each key is an element name and the value is the required input. See showif for details.

    valign_cols

    List of vertical column alignments. Valid values are auto (default), top, center, and bottom. The elements of the list correspond to the rows columns. See RowLayout.valign_cols. This argument is overridden if you use a custom RowLayout instance for the layout argument.

    width

    Defines the horizontal width of the element from small screens upwards. It is always full-width on extra small screens. Possible values are narrow, medium, wide, and full. For more detailed control, you can define the element_width attribute.

Examples

A minimal experiment with a stack in a row:

import alfred3 as al
exp = al.Experiment()

@exp.member
class HelloWorld(al.Page):
    name = "hello_world"

    def on_exp_access(self):
        el1 = al.Text("text")
        el2 = al.TextEntry(toplab="lab", name="example")
        el3 = al.Text("long text")

        stack = al.Stack(el1, el2)
        self += al.Row(stack, el3)

The arrangement will look like this:

|=========|========|
|   el1   |        |
|=========|  el3   |
|   el2   |        |
|=========|========|

Methods

add_css

Adds CSS to the element.

add_js

Adds Javascript to the element.

added_to_experiment

Tells the element that it was added to an experiment.

added_to_page

Tells the element that it was added to a page.

prepare_web_widget

Hook for computations for preparing an element's web widget.

render_inner_html

Renders the element template element_template.

Attributes

base_template

Base template for the element, which will be used to hold the rendered element template.

converted_width

List of bootstrap column widths at different screen sizes.

css_class_container

Returns the name the element container's CSS class.

css_class_element

Returns the name of the element's CSS class.

css_code

A list of tuples, which contain a priority and CSS code.

css_urls

A list of tuples, which contain a priority and an url pointing to CSS code.

display_standalone

If True (default), the element will be displayed as usual on its own.

element_template

The element's specific, inner template.

element_width

Returns a string of column width definitions.

elements

List of the elements in this row.

elements_full_width

If True, all elements will take up the full horizontal space of their column, regardless of the element's Element.element_width and Element.width attributes.

exp

The experiment session to which this element belongs.

experiment

Alias for exp

font_size

Font size

js_code

A list of tuples, which contain a priority and Javascript.

js_urls

A list of tuples, which contain a priority and an url pointing to JavaScript.

layout

The layout of this row, can be used to finetune column widths via its attributes.

name

Unique identifier for the element.

page

The page to which this element belongs.

position

Position of the whole element on the page.

section

The direct parent section of this element's page.

short_tree

String, giving the exact position in the experiment.

should_be_shown

Boolean, indicating whether the element is meant to be shown.

showif

Conditions that have to be met for the element to be shown.

template_data

Dictionary of data to be passed on to jinja templates.

tree

String, giving the exact position in the experiment.

web_widget

The element's rendered html code for display on a page.

width

Element width