Box

Classes

Box	Class that provides a container to display child elements
HBox	Container that displays child elements in a horizontal layout
VBox	Container that displays child elements in a vertical layout

class orion_notebook.layout.box.Box(elements: List[Any], **kwargs)

Class that provides a container to display child elements

_flex_wrap :str

_flex_direction :str

build_container(self, elements) → ipywidgets.Box

Creates and ipywidet Box which children are the elements passed as parameters

Parameters

elements – the elements to be placed inside the container

static wrap_in_widget(element) → ipywidgets.Output

Wraps the argument in an Output widget, so it can be used within the ipywidgets Layout functionality

Parameters

element – the element to wrap within the Output widget

static translate_css_property(value: str, expected_values: Union[type, dict]) → str

Translates the value passed as argument to the appropriate CSS property

Parameters

• value – value of the CSS property

• expected_values – CSS property type

property align_content(self) → str

Aligns the contents of a multiline flex container when there is extra space in the cross (vertical) axis

Options:

• normal (default): items are packed in their default position as if no value was set.

• top: items packed to the start of the container.

• bottom: items packed to the end of the container.

• center: items centered in the container

• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end

• space-around: items evenly distributed with equal space around each line

• space-evenly: items are evenly distributed with equal space around them

• stretch: lines stretch to take up the remaining space

• initial: resets all of the selected element’s properties to their initial values

• inherit: the selected element inherits all of its parent element’s styling, including styles that are not normally inheritable

• unset: the selected element inherits any inheritable values passed down from the parent element

property align_items(self) → str

Defines the default behavior for how flex items are laid out along the cross (vertical) axis

Options:

• stretch (default): stretch to fill the container (still respect min-width/max-width)

• top: items are placed at the start of the cross axis

• bottom: items are placed at the end of the cross axis

• center: items are centered in the cross-axis

• baseline: items are aligned such as their baselines align

• initial: resets all of the selected element’s properties to their initial values

• inherit: the selected element inherits all of its parent element’s styling, including styles that are not normally inheritable

• unset: the selected element inherits any inheritable values passed down from the parent element

property align_self(self) → str

Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items

Options:

• stretch (default): stretch to fill the container (still respect min-width/max-width)

• top: items are placed at the start of the cross axis

• bottom: items are placed at the end of the cross axis

• center: items are centered in the cross-axis

• baseline: items are aligned such as their baselines align

• initial: resets all of the selected element’s properties to their initial values

• inherit: the selected element inherits all of its parent element’s styling, including styles that are not normally inheritable

• unset: the selected element inherits any inheritable values passed down from the parent element

property border(self) → str

Defines the width, line style, and color of the top border of a box

Example:

border=’[border-width] border-style [border-color]’

property bottom(self) → str

Defines the bottom position of an element in combination with the position property

Example:

bottom=[‘_px/em’|’_%’|’auto’|’inherit’]

property display(self) → str

Defines the type of rendering box to use for an element

Example:

display=[‘flex’|’inline’|’block’]

property flex_direction(self) → str

Defines the direction flex items are placed in the flex container

Options:

• row (default): left to right in ltr; right to left in rtl

• row-reverse: right to left in ltr; left to right in rtl

• column: same as row but top to bottom

• column-reverse: same as row-reverse but bottom to top

property flex_wrap(self) → str

Allows the items to wrap in multiple lines as needed with this property

Options:

• nowrap (default): all flex items will be on one line

• wrap: flex items will wrap onto multiple lines, from top to bottom.

• wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

property justify_content(self) → str

Defines the alignment along the main (horizontal) axis. It helps distribute extra free space around the elements

Options:

• left: items are packed toward left edge of the container

• right: items are packed toward right edge of the container

• center: items are centered along the line

• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

• space-around: items are evenly distributed in the line with equal space around them

• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal

• initial: resets all of the selected element’s properties to their initial values

• inherit: the selected element inherits all of its parent element’s styling, including styles that are not normally inheritable

• unset: the selected element inherits any inheritable values passed down from the parent element

property justify_items(self) → str

Gets the ‘justify_items’ CSS property of the container

Options:

• left: items are packed toward left edge of the container

• right: items are packed toward right edge of the container

• center: items are centered along the line

• initial: resets all of the selected element’s properties to their initial values

• inherit: the selected element inherits all of its parent element’s styling, including styles that are not normally inheritable

• unset: the selected element inherits any inheritable values passed down from the parent element

property height(self) → str

Defines the height of the content area of an element

Example:

height=[‘_px/em’|’_%’|’auto’|’inherit’]

property left(self) → str

Defines the left position of an element in combination with the position property

Example:

left=[‘_px/em’|’_%’|’auto’|’inherit’]

property margin(self) → str

Defines the margin on all sides of an element

Examples:

margin=’all’ margin=’top_bottom left_right’ margin=’top right_left bottom’ margin=’top right bottom left’

property max_height(self) → str

Defines the maximum height of the content area of an element

Example:

max_height=[‘_px/em’|’_%’|’auto’|’inherit’]

property max_width(self) → str

Defines the maximum width of the content area of an element

Example:

max_width=[‘_px/em’|’_%’|’auto’|’inherit’]

property min_height(self) → str

Defines the minimum height of the content area of an element

Example:

min_height=[‘_px/em’|’_%’|’inherit’]

property min_width(self) → str

Defines the minimum width of the content area of an element

Example:

min_width=[‘_px/em’|’_%’|’inherit’]

property object_fit(self) → str

Defines how an element responds to the height and width of its content box.

Options:

‘contain’: fit the image in its content box while preserving the aspect ratio. If any of the container is not covered by the image, the background of the container is displayed. The content box is the size of the container if the container is smaller than the image, or the size of the image if the container is larger. ‘cover’: fill the content box completely while preserving the aspect ratio of the image, cropping the image if necessary. ‘fill’: completely fill the content box, stretching/compressing the image as necessary. ‘none’: do no resizing; image will be clipped by the container. ‘scale-down’: co the same thing as either contain or none, using whichever results in the smaller dispayed image. ‘none’: remove object_fit from the layout; effect is same as ‘fill’.

property order(self) → str

Controls the order in which elements appear in the flex container

property padding(self) → str

Defines the padding space on all sides of an element

Examples:

padding=’all’ padding=’top_bottom left_right’ padding=’top right_left bottom’ padding=’top right bottom left’

property right(self) → str

Defines the right position of an element in combination with the position property

Example:

right=[‘_px/em’|’_%’|’auto’|’inherit’]

property top(self) → str

Defines the top position of an element in combination with the position property

Example:

top=[‘_px/em’|’_%’|’auto’|’inherit’]

property width(self) → str

Defines the width of the content area of an element

Example:

width=[‘_px/em’|’_%’|’auto’|’inherit’]

class orion_notebook.layout.box.HBox(elements: List[Any], **kwargs)

Bases: orion_notebook.layout.box.Box

Container that displays child elements in a horizontal layout

class orion_notebook.layout.box.VBox(elements: List[Any], **kwargs)

Bases: orion_notebook.layout.box.Box

Container that displays child elements in a vertical layout