dazzler.components.core package¶

class dazzler.components.core.Box(children=undefined, clicks=0, column=undefined, reverse=undefined, justify=undefined, align_items=undefined, align_content=undefined, wrap=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A box is a flexible container with a default horizontal orientation of elements.

CSS

dazzler-core-box

from dazzler.components.core import Box, Text

box = Box([Text('bar'), Text('Foo')], column=True, reverse=True)

__init__(children=undefined, clicks=0, column=undefined, reverse=undefined, justify=undefined, align_items=undefined, align_content=undefined, wrap=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Parameters

children (Optional[Any]) – Elements to display.
clicks (Union[float, int, None]) – Number of times the box was clicked on. (default=0)
column (Optional[bool]) – Display the children element in a column. Equals to css: flex-direction: column;
reverse (Optional[bool]) – Reverse the element order.
justify (Optional[Any]) – Shorthand for justify-content. Alignment for main axis. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘space- between’, ‘space-around’, ‘space-evenly’)
align_items (Optional[Any]) – Flex property to align line items on the cross axis. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’)
align_content (Optional[Any]) – Alignment across the cross axis. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’, ‘stretch’)
wrap (Optional[Any]) – Flex wrap items onto the next line. (Possible values: ‘wrap’, ‘nowrap’, ‘wrap-reverse’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

align_content¶: Alignment across the cross axis. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’, ‘stretch’)

align_items¶: Flex property to align line items on the cross axis. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’)

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

children¶: Elements to display.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

clicks¶: Number of times the box was clicked on. (default=0)

color¶: Font color

column¶: Display the children element in a column.Equals to css: flex-direction: column;

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

justify¶: Shorthand for justify-content. Alignment for main axis. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’)

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

reverse¶: Reverse the element order.

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

wrap¶: Flex wrap items onto the next line. (Possible values: ‘wrap’, ‘nowrap’, ‘wrap-reverse’)

class dazzler.components.core.Button(label, clicks=0, id=undefined, preset=undefined, disabled=undefined, rounded=undefined, circle=undefined, bordered=True, size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A button to click on!

CSS

dazzler-core-button
bordered
rounded
circle
primary
danger
warning
success
tiny
small
medium
large
x-large
xx-large

Example

from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext

page = Page(
    __name__,
    core.Container([
        core.Button('Click me', identity='button', rounded=True),
        core.Container(identity='output')
    ])
)


@page.bind(Trigger('button', 'clicks'))
async def on_click(ctx: BindingContext):
    await ctx.set_aspect('output', children=f'clicked: {ctx.trigger.value}')

__init__(label, clicks=0, id=undefined, preset=undefined, disabled=undefined, rounded=undefined, circle=undefined, bordered=True, size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

label (Any) – Text or component to display.
clicks (Union[float, int, None]) – The number of times the button was clicked. (default=0)
id (Optional[str]) – DOM id, otherwise the identity is used.
preset (Optional[Any]) – Preset style colors to apply. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
disabled (Optional[bool]) – Disable the button.
rounded (Optional[bool]) – Round the edges.
circle (Optional[bool]) – Circle button
bordered (Optional[bool]) – Add a border around the button. (default=True)
size (Optional[Any]) – The size of the button. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

bordered¶: Add a border around the button. (default=True)

circle¶: Circle button

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

clicks¶: The number of times the button was clicked. (default=0)

disabled¶: Disable the button.

id¶: DOM id, otherwise the identity is used.

label¶: Text or component to display.

preset¶: Preset style colors to apply. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

rounded¶: Round the edges.

size¶: The size of the button. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

style¶: Style object for the top level wrapper of the component.

class dazzler.components.core.CheckList(options, values=undefined, labels_class_name=undefined, labels_style=undefined, options_class_name=undefined, inputs_class_name=undefined, options_style=undefined, id=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A list of labels with options, the values aspect get all selected options.

__init__(options, values=undefined, labels_class_name=undefined, labels_style=undefined, options_class_name=undefined, inputs_class_name=undefined, options_style=undefined, id=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

options (List[Any]) – Items in the checklist with labels, values and elements attributes.
values (Optional[List[Any]]) – Checked values (default=[])
labels_class_name (Optional[str]) – Global class name to give to labels.
labels_style (Optional[Dict]) – Global labels style objects.
options_class_name (Optional[str]) – Global options class name.
inputs_class_name (Optional[str]) –
options_style (Optional[Dict]) – Global style object of options.
id (Optional[str]) – Html id of the component, otherwise the identity is used.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

id¶: Html id of the component, otherwise the identity is used.

inputs_class_name¶

labels_class_name¶: Global class name to give to labels.

labels_style¶: Global labels style objects.

options¶: Items in the checklist with labels, values and elements attributes.

options_class_name¶: Global options class name.

options_style¶: Global style object of options.

style¶: Style object for the top level wrapper of the component.

values¶: Checked values (default=[])

class dazzler.components.core.Checkbox(checked=False, indeterminate=undefined, disabled=undefined, click_indeterminate=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

__init__(checked=False, indeterminate=undefined, disabled=undefined, click_indeterminate=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Parameters

checked (Optional[bool]) – Whether the checkbox is toggled or not. (default=False)
indeterminate (Optional[bool]) – Indeterminate display - meaning partial selection.
disabled (Optional[bool]) – Disable the checkbox
click_indeterminate (Optional[bool]) – Click on the checkbox will also set indeterminate status.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

checked¶: Whether the checkbox is toggled or not. (default=False)

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

click_indeterminate¶: Click on the checkbox will also set indeterminate status.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

disabled¶: Disable the checkbox

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

indeterminate¶: Indeterminate display - meaning partial selection.

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.Container(children=undefined, title=undefined, draggable=undefined, clicks=0, id=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Virtual div

CSS

dazzler-core-container.
scroll
flex
row
column
btn
center
hidden

__init__(children=undefined, title=undefined, draggable=undefined, clicks=0, id=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Parameters

children (Optional[Any]) –
title (Optional[str]) – Native html attribute to show a little yellow textual popover.
draggable (Optional[bool]) –
clicks (Union[float, int, None]) – Number of times the container was clicked. (default=0)
id (Optional[str]) –
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

children¶

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

clicks¶: Number of times the container was clicked. (default=0)

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

draggable¶

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

id¶

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

title¶: Native html attribute to show a little yellow textual popover.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.DataList(options, id=undefined, value=undefined, data_value=undefined, title=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A html datalist (select with autocomplete).

__init__(options, id=undefined, value=undefined, data_value=undefined, title=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

options (List[Dict[str, Union[str, Any]]]) – Options of the datalist.
id (Optional[str]) – Unique id for the component.
value (Optional[str]) – Value of the text input.
data_value (Optional[Any]) – The value of the selected option if found.
title (Optional[str]) – Tooltip.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

data_value¶: The value of the selected option if found.

id¶: Unique id for the component.

options¶: Options of the datalist.

style¶: Style object for the top level wrapper of the component.

title¶: Tooltip.

value¶: Value of the text input.

class dazzler.components.core.Dropdown(options, value=undefined, multi=undefined, searchable=undefined, search_value='', search_props=undefined, search_label=undefined, search_backend=undefined, filtered_options=None, opened=False, no_results_label=undefined, toggle_symbol=undefined, scrollable=undefined, scroll_max_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A dropdown to select options from a list.

CSS

dazzler-core-dropdown
drop-toggle
drop-symbol
drop-container
drop-item
drop-selected-item
selected
selected-items
selected-label
selected-remover
no-results
search-content
dropdown-search-input
drop-controls

Example

from dazzler.components.core import Dropdown

dropdown = Dropdown(
    {'label': 'Option 1', 'value': 1},
    {'label': 'Option 2', 'value': 2}
)

__init__(options, value=undefined, multi=undefined, searchable=undefined, search_value='', search_props=undefined, search_label=undefined, search_backend=undefined, filtered_options=None, opened=False, no_results_label=undefined, toggle_symbol=undefined, scrollable=undefined, scroll_max_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

options (List[str]) – List of options to choose/search from.
value (Union[str, float, int, Dict, List[Any], None]) – Currently selected value(s).
multi (Optional[bool]) – Allow multiple values to be chosen, the value become a list of values.
searchable (Optional[bool]) – If true, render an input
search_value (Optional[str]) – Value entered by user to search options. (default=’’)
search_props (Optional[List[str]]) – Keys to filter on searching the options. - Leave empty for all props. - Valid values types to search on are strings & arrays. - Nested prop access with dot notation.
search_label (Optional[bool]) – Search the label along with the value.
search_backend (Optional[bool]) – Do not perform any search on the options from the frontend and instead relies on binding the search_value to filter and set the filtered_options aspect.
filtered_options (Union[List[str], List[Union[float, int]], None]) – Array of options that are filtered, set from backend with search (default=None)
opened (Optional[bool]) – Is the dropdown currently open ? (default=False)
no_results_label (Optional[Any]) – Label to use when no search results are available. (default=’No results!’)
toggle_symbol (Optional[Any]) – Unicode character used as the toggle button. (default=’⏷’)
scrollable (Optional[bool]) – Make the menu scrollable.
scroll_max_size (Union[float, int, None]) –
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

filtered_options¶: Array of options that are filtered, set from backend with search (default=None)

multi¶: Allow multiple values to be chosen, the value become a list of values.

no_results_label¶: Label to use when no search results are available. (default=’No results!’)

opened¶: Is the dropdown currently open ? (default=False)

options¶: List of options to choose/search from.

scroll_max_size¶

scrollable¶: Make the menu scrollable.

search_backend¶: Do not perform any search on the options from the frontend and insteadrelies on binding the search_value to filter and set the``filtered_options`` aspect.

search_label¶: Search the label along with the value.

search_props¶: Keys to filter on searching the options.- Leave empty for all props.- Valid values types to search on are strings & arrays.- Nested prop access with dot notation.

search_value¶: Value entered by user to search options. (default=’’)

searchable¶: If true, render an input

style¶: Style object for the top level wrapper of the component.

toggle_symbol¶: Unicode character used as the toggle button. (default=’⏷’)

value¶: Currently selected value(s).

class dazzler.components.core.Form(fields=undefined, header=undefined, body=undefined, footer=undefined, action=undefined, method=undefined, target=undefined, name=undefined, auto_complete=undefined, enctype=undefined, accept_charset=undefined, no_validate=undefined, errors=undefined, include_submit=True, submit_label='Submit', stacked=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A form element with auto fields.

CSS

dazzler-core-form
form-header
form-body
form-field
field-error
form-label
form-input
form-footer
form-submit

__init__(fields=undefined, header=undefined, body=undefined, footer=undefined, action=undefined, method=undefined, target=undefined, name=undefined, auto_complete=undefined, enctype=undefined, accept_charset=undefined, no_validate=undefined, errors=undefined, include_submit=True, submit_label='Submit', stacked=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Parameters

fields (Optional[List[Dict[str, Union[str, Any]]]]) – Fields of the form, either provide a component or a type for the input.
header (Optional[Any]) – Render on top of the form (CSS: form-header)
body (Optional[Any]) – Render in the middle of the form, after the fields. (CSS: form-body)
footer (Optional[Any]) – Render at the bottom of the form (CSS: form-footer)
action (Optional[str]) – Url to submit the form.
method (Optional[Any]) – Http method to submit the form. (Possible values: ‘get’, ‘post’, ‘put’, ‘patch’)
target (Optional[Any]) – How will the response display. (Possible values: ‘_blank’, ‘_self’, ‘_parent’, ‘_top’)
name (Optional[str]) – Name of the form.
auto_complete (Optional[Any]) – Specifies auto complete for the form. (Possible values: ‘on’, ‘off’)
enctype (Optional[Any]) – How the data is encode before submit. (Possible values: ‘application/x-www-form-urlencoded’, ‘multipart/form-data’, ‘text/plain’)
accept_charset (Optional[str]) – Character encoding for submission.
no_validate (Optional[bool]) – Specify the form should be validated on submission.
errors (Optional[Dict]) – Errors to show with the fields. Keys are name. (default={})
include_submit (Optional[bool]) – Include a submit button on the form. (default=True)
submit_label (Optional[str]) – Label of the submit button. (default=’Submit’)
stacked (Optional[bool]) – Stack the form label and input.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

accept_charset¶: Character encoding for submission.

action¶: Url to submit the form.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

auto_complete¶: Specifies auto complete for the form. (Possible values: ‘on’, ‘off’)

background¶: Background color/image

body¶: Render in the middle of the form, after the fields. (CSS: form-body)

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

enctype¶: How the data is encode before submit. (Possible values: ‘application/x-www-form-urlencoded’, ‘multipart/form-data’, ‘text/plain’)

errors¶: Errors to show with the fields. Keys are name. (default={})

fields¶: Fields of the form, either provide a component or a type for the input.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

footer¶: Render at the bottom of the form (CSS: form-footer)

header¶: Render on top of the form (CSS: form-header)

height¶: Height of the component.

hidden¶: Hide the component;

include_submit¶: Include a submit button on the form. (default=True)

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

method¶: Http method to submit the form. (Possible values: ‘get’, ‘post’, ‘put’, ‘patch’)

min_height¶

min_width¶

name¶: Name of the form.

no_validate¶: Specify the form should be validated on submission.

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

stacked¶: Stack the form label and input.

style¶: Style object for the top level wrapper of the component.

submit_label¶: Label of the submit button. (default=’Submit’)

target¶: How will the response display. (Possible values: ‘_blank’, ‘_self’, ‘_parent’, ‘_top’)

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.Grid(children, columns, grow_cell=undefined, equal_cell_width=undefined, center_cells=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Render a list in a grid with a number of columns.

CSS

dazzler-core-grid
grid-row
grid-cell

Example

from dazzler.components import core

grid = core.Grid([1, 2, 3, 4], 2)

__init__(children, columns, grow_cell=undefined, equal_cell_width=undefined, center_cells=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

children (List[Any]) – Children to render in a grid.
columns (Union[float, int]) – Number of columns
grow_cell (Optional[bool]) – Set the cell to take up the space between them.
equal_cell_width (Optional[bool]) – Each cell are equals in width for a total of 100% per row.
center_cells (Optional[bool]) – Center the content of the cells.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

center_cells¶: Center the content of the cells.

centered¶: Center the content in the middle of the container.

children¶: Children to render in a grid.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

columns¶: Number of columns

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

equal_cell_width¶: Each cell are equals in width for a total of 100% per row.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

grow_cell¶: Set the cell to take up the space between them.

height¶: Height of the component.

hidden¶: Hide the component;

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.Html(tag, children=undefined, id=undefined, attributes=undefined, events=undefined, event=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Html tag wrapper, give any props as attributes. Listen to events with the readonly event aspect containing the latest event fired.

__init__(tag, children=undefined, id=undefined, attributes=undefined, events=undefined, event=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

tag (str) – Tag name of the component.
children (Optional[Any]) – Children of the html tag.
id (Optional[str]) – Id of the element in DOM.
attributes (Optional[Any]) – Any other html attributes relevant to the html tag
events (Optional[List[str]]) – Events to subscribe.
event (Optional[Dict]) – Last event fired.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

attributes¶: Any other html attributes relevant to the html tag

children¶: Children of the html tag.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

event¶: Last event fired.

events¶: Events to subscribe.

id¶: Id of the element in DOM.

style¶: Style object for the top level wrapper of the component.

tag¶: Tag name of the component.

class dazzler.components.core.Image(src, alt, height=undefined, width=undefined, link=undefined, caption=undefined, cross_origin=undefined, decoding=undefined, preload=undefined, clicks=0, bordered=undefined, rounded=undefined, centered=undefined, flexible=undefined, circle=undefined, padded=undefined, caption_style=undefined, caption_class_name=undefined, figure_class_name=undefined, figure_style=undefined, link_class_name=undefined, link_style=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

An image.

CSS

dazzler-core-image
bordered
padded
rounded
centered

__init__(src, alt, height=undefined, width=undefined, link=undefined, caption=undefined, cross_origin=undefined, decoding=undefined, preload=undefined, clicks=0, bordered=undefined, rounded=undefined, centered=undefined, flexible=undefined, circle=undefined, padded=undefined, caption_style=undefined, caption_class_name=undefined, figure_class_name=undefined, figure_style=undefined, link_class_name=undefined, link_style=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

src (str) – The source url of the image.
alt (str) – Alt img attribute to show when the browser cannot display the image.
height (Union[float, int, None]) – Height in pixel
width (Union[float, int, None]) – Width in pixel
link (Optional[str]) – Link to another page when the image is clicked.
caption (Optional[Any]) – Text to include beneath the image.
cross_origin (Optional[Any]) – Fetch the image with CORS. (Possible values: ‘anonymous’, ‘use-credentials’)
decoding (Optional[Any]) – Decoding hint for the browser (Possible values: ‘auto’, ‘sync’, ‘async’)
preload (Optional[bool]) – Preload the image before mount.
clicks (Union[float, int, None]) – Times the image was clicked on. (default=0)
bordered (Optional[bool]) – Add bordered style class
rounded (Optional[bool]) – Add rounded style class
centered (Optional[bool]) – Add centered style class for the image to appear in the horizontal middle
flexible (Optional[bool]) – Take up the whole size of the parent container.
circle (Optional[bool]) – Image is a circle
padded (Optional[bool]) – Add a little padding around the image.
caption_style (Optional[Dict]) – Style to give to the caption of the image.
caption_class_name (Optional[str]) – CSS class to give to the caption of the image.
figure_class_name (Optional[str]) – CSS class to give to figure if caption is provided.
figure_style (Optional[Dict]) – Style object to give to figure if caption is provided.
link_class_name (Optional[str]) – CSS class to give to the link element.
link_style (Optional[Dict]) – Style object to give to the link.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

alt¶: Alt img attribute to show when the browser cannot display the image.

bordered¶: Add bordered style class

caption¶: Text to include beneath the image.

caption_class_name¶: CSS class to give to the caption of the image.

caption_style¶: Style to give to the caption of the image.

centered¶: Add centered style class for the image toappear in the horizontal middle

circle¶: Image is a circle

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

clicks¶: Times the image was clicked on. (default=0)

cross_origin¶: Fetch the image with CORS. (Possible values: ‘anonymous’, ‘use-credentials’)

decoding¶: Decoding hint for the browser (Possible values: ‘auto’, ‘sync’, ‘async’)

figure_class_name¶: CSS class to give to figure if caption is provided.

figure_style¶: Style object to give to figure if caption is provided.

flexible¶: Take up the whole size of the parent container.

height¶: Height in pixel

link¶: Link to another page when the image is clicked.

link_class_name¶: CSS class to give to the link element.

link_style¶: Style object to give to the link.

padded¶: Add a little padding around the image.

preload¶: Preload the image before mount.

rounded¶: Add rounded style class

src¶: The source url of the image.

style¶: Style object for the top level wrapper of the component.

width¶: Width in pixel

class dazzler.components.core.Input(id=undefined, name=undefined, required=undefined, value='', type=undefined, placeholder=undefined, pattern=undefined, auto_complete=undefined, auto_focus=undefined, auto_save=undefined, auto_correct=undefined, disabled=undefined, n_blur=0, n_submit=0, min=undefined, min_length=undefined, max_length=undefined, max=undefined, step=undefined, multiple=undefined, checked=False, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Html input wrapper.

__init__(id=undefined, name=undefined, required=undefined, value='', type=undefined, placeholder=undefined, pattern=undefined, auto_complete=undefined, auto_focus=undefined, auto_save=undefined, auto_correct=undefined, disabled=undefined, n_blur=0, n_submit=0, min=undefined, min_length=undefined, max_length=undefined, max=undefined, step=undefined, multiple=undefined, checked=False, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

id (Optional[str]) –
name (Optional[str]) –
required (Optional[bool]) –
value (Union[str, float, int, None]) – (default=’’)
type (Optional[Any]) – (Possible values: ‘number’, ‘hidden’, ‘text’, ‘search’, ‘tel’, ‘password’, ‘range’, ‘email’, ‘url’, ‘submit’, ‘checkbox’, ‘reset’)
placeholder (Optional[str]) –
pattern (Optional[str]) –
auto_complete (Optional[str]) –
auto_focus (Optional[bool]) –
auto_save (Optional[str]) –
auto_correct (Optional[str]) –
disabled (Optional[bool]) –
n_blur (Union[float, int, None]) – (default=0)
n_submit (Union[float, int, None]) – (default=0)
min (Union[float, int, None]) –
min_length (Union[float, int, None]) –
max_length (Union[float, int, None]) –
max (Union[float, int, None]) –
step (Union[str, float, int, None]) –
multiple (Optional[bool]) –
checked (Optional[bool]) – (default=False)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

auto_complete¶

auto_correct¶

auto_focus¶

auto_save¶

checked¶: (default=False)

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

disabled¶

id¶

max¶

max_length¶

min¶

min_length¶

multiple¶

n_blur¶: (default=0)

n_submit¶: (default=0)

name¶

pattern¶

placeholder¶

required¶

step¶

style¶: Style object for the top level wrapper of the component.

type¶: (Possible values: ‘number’, ‘hidden’, ‘text’, ‘search’, ‘tel’, ‘password’, ‘range’, ‘email’, ‘url’, ‘submit’, ‘checkbox’, ‘reset’)

value¶: (default=’’)

class dazzler.components.core.Interval(timeout=1000, times=0, active=True, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Update times aspect every interval to trigger a binding.

__init__(timeout=1000, times=0, active=True, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

timeout (Union[float, int, None]) – The delay between each time. (default=1000)
times (Union[float, int, None]) – Number of times the interval was fired. (default=0)
active (Optional[bool]) – Enable/disable the interval loop. (default=True)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

active¶: Enable/disable the interval loop. (default=True)

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

style¶: Style object for the top level wrapper of the component.

timeout¶: The delay between each time. (default=1000)

times¶: Number of times the interval was fired. (default=0)

class dazzler.components.core.Link(href=undefined, children=undefined, id=undefined, title=undefined, page_name=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Link to external url or other dazzler page by name.

CSS: dazzler-core-link

__init__(href=undefined, children=undefined, id=undefined, title=undefined, page_name=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

href (Optional[str]) – The link destination.
children (Optional[Any]) – Text/Component to show as link.
id (Optional[str]) – Id of the html element, otherwise the identity is used.
title (Optional[str]) – Hovered description
page_name (Optional[str]) – Name of the page to redirect to if the href is not set.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

children¶: Text/Component to show as link.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

href¶: The link destination.

id¶: Id of the html element, otherwise the identity is used.

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

page_name¶: Name of the page to redirect to if the href is not set.

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

title¶: Hovered description

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.ListBox(items=undefined, max_length=undefined, append=undefined, prepend=undefined, concat=undefined, insert=undefined, delete_index=undefined, delete_identity=undefined, scrollable=undefined, direction="'vertical'", size=undefined, keep_scroll=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A component where you can add items to instead of rendering the whole list again. With an optional max size.

CSS

dazzler-core-list-box
vertical
horizontal
scrollable

Example

"""
Page list_box of dazzler
Created 2019-11-28
"""
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext

lb_component = core.ListBox(
    [
        core.Container(f'initial-{x}', class_name='item')
        for x in range(5)
    ],
    identity='list-box'
)

page = Page(
    __name__,
    core.Container([
        lb_component,
        core.Container([
            core.Button('append', identity='append-btn'),
            core.Button('prepend', identity='prepend-btn'),
            core.Button('concat', identity='concat-btn'),
            core.Button('insert', identity='insert-btn'),
            core.Input(identity='index-input', type='number'),
            core.Button('delete', identity='delete-btn')
        ])
    ])
)


# Add an element to the end.
@page.bind(Trigger('append-btn', 'clicks'))
async def on_append(ctx: BindingContext):
    await ctx.set_aspect(
        'list-box', append=core.Container(
            'appended', class_name='item append'
        )
    )


# Add an element to the start of the list.
@page.bind(Trigger('prepend-btn', 'clicks'))
async def on_prepend(ctx: BindingContext):
    await ctx.set_aspect(
        'list-box', prepend=core.Container(
            'prepended', class_name='item prepend'
        )
    )


# Add multiple elements to the end of the list.
@page.bind(Trigger('concat-btn', 'clicks'))
async def on_concat(ctx: BindingContext):
    await ctx.set_aspect(
        'list-box', concat=[
            core.Container(f'concat-{x}', class_name='item concat')
            for x in range(await ctx.get_aspect('index-input', 'value'))
        ]
    )


# Insert at a position.
@page.bind(Trigger('insert-btn', 'clicks'))
async def on_insert(ctx: BindingContext):
    index = await ctx.get_aspect('index-input', 'value')
    await ctx.set_aspect(
        'list-box', insert={
            'index': index,
            'item': core.Container('inserted', class_name='item insert')
        }
    )


# Delete the item at the index.
@page.bind(Trigger('delete-btn', 'clicks'))
async def on_delete(ctx: BindingContext):
    index = await ctx.get_aspect('index-input', 'value')
    await ctx.set_aspect(
        'list-box', delete_index=index
    )

__init__(items=undefined, max_length=undefined, append=undefined, prepend=undefined, concat=undefined, insert=undefined, delete_index=undefined, delete_identity=undefined, scrollable=undefined, direction="'vertical'", size=undefined, keep_scroll=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

items (Optional[List[Any]]) – List of items to render. (default=[])
max_length (Union[float, int, None]) – Maximum amount of items in the list, extra items will be popped off.
append (Optional[Any]) – Add an item to the end of the list.
prepend (Optional[Any]) – Add an item to the start of the list.
concat (Optional[List[Any]]) – Concatenate another list with the current items.
insert (Optional[Dict[str, Union[float, int, Any]]]) – Insert an item at an index position.
delete_index (Union[float, int, None]) – Delete the item at the index.
delete_identity (Optional[str]) – Delete row item by component identity.
scrollable (Optional[bool]) – Wether the list box container is scrollable. Set the overflow content to scroll.
direction (Optional[Any]) – In which direction the items will be inserted. (Possible values: ‘vertical’, ‘horizontal’) (default=“‘vertical’”)
size (Union[float, int, None]) – Must be set for the scrollable aspect to work. Height or width in pixels depending on the direction aspect.
keep_scroll (Optional[bool]) – Keep the last appended item in view if scrolling is enabled.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

append¶: Add an item to the end of the list.

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

concat¶: Concatenate another list with the current items.

cursor¶: Cursor when the mouse is over the component.

delete_identity¶: Delete row item by component identity.

delete_index¶: Delete the item at the index.

direction¶: In which direction the items will be inserted. (Possible values: ‘vertical’, ‘horizontal’) (default=vertical)

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

insert¶: Insert an item at an index position.

items¶: List of items to render. (default=[])

keep_scroll¶: Keep the last appended item in view if scrolling is enabled.

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_length¶: Maximum amount of items in the list, extra items will be popped off.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

prepend¶: Add an item to the start of the list.

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Wether the list box container is scrollable.Set the overflow content to scroll.

size¶: Must be set for the scrollable aspect to work.Height or width in pixels depending on the direction aspect.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.Modal(body, header=undefined, footer=undefined, active=undefined, close_button=True, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A modal overlay the page with a darkened background.

CSS

dazzler-core-modal
modal-overlay
modal-active
modal-content
modal-header
modal-closer
modal-body
modal-footer

Example

from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext

page = Page(
    __name__,
    core.Container([
        core.Modal(
            core.Container('modal body', identity='modal-body'),
            header='modal header',
            footer='modal footer',
            identity='modal',
            close_button=False,
        ),
        core.Button('Show modal', identity='show')
    ])
)


@page.bind(Trigger('show', 'clicks'))
async def on_show(ctx: BindingContext):
    await ctx.set_aspect('modal', active=True)

__init__(body, header=undefined, footer=undefined, active=undefined, close_button=True, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

body (Any) – Main content of the modal. (css: modal-body)
header (Optional[Any]) – Appear before the body. (css: modal-header)
footer (Optional[Any]) – Appear after the body. (css: modal-footer)
active (Optional[bool]) – Activate the modal.
close_button (Optional[bool]) – Include a close button in the top right corner of the header. (default=True)
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

active¶: Activate the modal.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

body¶: Main content of the modal. (css: modal-body)

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

close_button¶: Include a close button in the top right corner of the header. (default=True)

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

footer¶: Appear after the body. (css: modal-footer)

header¶: Appear before the body. (css: modal-header)

height¶: Height of the component.

hidden¶: Hide the component;

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.Panel(title=undefined, content=undefined, expandable=undefined, expanded=undefined, expanded_symbol=undefined, expandable_symbol=undefined, title_style=undefined, title_class_name=undefined, title_color=undefined, title_background=undefined, content_style=undefined, content_class_name=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Panel with optional expansion of content.

Example

from dazzler.system import Page
from dazzler.components import core, html
from dazzler.presets import PresetColor


page = Page(
    __name__,
    html.Div([
        core.Panel(
            title='Panel one',
            content=core.Container(
                [
                    core.Container('Panel Content', height=300),
                    core.Text('Hidden')
                ],
                scrollable=True,
                max_height=200,
            )
        ),
        core.Panel(
            title='Panel two: expandable',
            content=core.Container('Expandable', height=200),
            expandable=True,
            expanded=False,
        ),
        core.Panel(
            title=html.H2('Color panels'),
            content=html.Div([
                core.Panel(
                    title=f'Panel color: {color} / {background}',
                    content=html.Div('content'),
                    preset_color=color,
                    preset_background=background,
                    title_color=background,
                    title_background=color,
                )
                for (color, background)
                in zip(PresetColor, reversed(PresetColor))
            ]),
            content_style={'padding': '8px'}
        ),
    ])
)

__init__(title=undefined, content=undefined, expandable=undefined, expanded=undefined, expanded_symbol=undefined, expandable_symbol=undefined, title_style=undefined, title_class_name=undefined, title_color=undefined, title_background=undefined, content_style=undefined, content_class_name=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

title (Optional[Any]) – Title of the panel.
content (Optional[Any]) – Content of the panel under the title
expandable (Optional[bool]) – Allow to expand/hide content with a button on the right side of the title that controls the expanded aspect.
expanded (Optional[bool]) – Is the panel currently expanded?
expanded_symbol (Optional[Any]) – Symbol to use as expand toggle when it is expanded. (default=’-‘)
expandable_symbol (Optional[Any]) – Symbol to use for the toggle symbol when panel content is hidden. (default=’+’)
title_style (Optional[Dict]) – Style of the title.
title_class_name (Optional[str]) – Class name to give to the title along with panel-title.
title_color (Optional[Any]) – Preset color to use as font color for the title. (Possible values: ‘primary’, ‘primary-light’, ‘primary- dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger- light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
title_background (Optional[Any]) – Color preset for the background of the title. (Possible values: ‘primary’, ‘primary-light’, ‘primary- dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger- light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
content_style (Optional[Dict]) – Style of the content container.
content_class_name (Optional[str]) – Class name for the content container.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

content¶: Content of the panel under the title

content_class_name¶: Class name for the content container.

content_style¶: Style of the content container.

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

expandable¶: Allow to expand/hide content with a button on the right side of thetitle that controls the expanded aspect.

expandable_symbol¶: Symbol to use for the toggle symbol when panel content is hidden. (default=’+’)

expanded¶: Is the panel currently expanded?

expanded_symbol¶: Symbol to use as expand toggle when it is expanded. (default=’-‘)

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

title¶: Title of the panel.

title_background¶: Color preset for the background of the title. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

title_class_name¶: Class name to give to the title along with panel-title.

title_color¶: Preset color to use as font color for the title. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

title_style¶: Style of the title.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.ProgressBar(value=0, minimum=0, maximum=100, low=undefined, high=undefined, optimum=undefined, progress_class_name=undefined, progress_text=undefined, click=undefined, striped=undefined, rounded=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Simple progress bar support by all browsers.

CSS

dazzler-core-progress-bar
progress
high
low
optimum
striped
rounded

__init__(value=0, minimum=0, maximum=100, low=undefined, high=undefined, optimum=undefined, progress_class_name=undefined, progress_text=undefined, click=undefined, striped=undefined, rounded=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

value (Union[float, int, None]) – The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range. (default=0)
minimum (Union[float, int, None]) – The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0 (default=0)
maximum (Union[float, int, None]) – The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1. (default=100)
low (Union[float, int, None]) – The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low value is equal to the minimum value.
high (Union[float, int, None]) – The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high value is equal to the maximum value.
optimum (Union[float, int, None]) – This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred.
progress_class_name (Optional[str]) – CSS class of the inner progress container.
progress_text (Optional[Any]) – Set to show the value on the progress bar. (Possible values: ‘value’, ‘percent’)
click (Optional[Dict[str, Union[float, int]]]) – Readonly click event with the value.
striped (Optional[bool]) – Use striped style.
rounded (Optional[bool]) – Use the rounded style
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

click¶: Readonly click event with the value.

high¶: The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high value is equal to the maximum value.

low¶: The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low value is equal to the minimum value.

maximum¶: The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1. (default=100)

minimum¶: The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0 (default=0)

optimum¶: This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred.

progress_class_name¶: CSS class of the inner progress container.

progress_text¶: Set to show the value on the progress bar. (Possible values: ‘value’, ‘percent’)

rounded¶: Use the rounded style

striped¶: Use striped style.

style¶: Style object for the top level wrapper of the component.

value¶: The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range. (default=0)

class dazzler.components.core.RadioList(options, value=undefined, labels_class_name=undefined, labels_style=undefined, options_class_name=undefined, options_style=undefined, id=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A radio button list where only a single value can be selected.

__init__(options, value=undefined, labels_class_name=undefined, labels_style=undefined, options_class_name=undefined, options_style=undefined, id=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

options (List[Any]) – Items in the radio list with labels, values and elements attributes.
value (Union[str, float, int, None]) – Selected radio button.
labels_class_name (Optional[str]) – Global class name to give to labels.
labels_style (Optional[Dict]) – Global labels style objects.
options_class_name (Optional[str]) – Global options class name.
options_style (Optional[Dict]) – Global style object of options.
id (Optional[str]) – Html id of the component, otherwise the identity is used.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

id¶: Html id of the component, otherwise the identity is used.

labels_class_name¶: Global class name to give to labels.

labels_style¶: Global labels style objects.

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

options¶: Items in the radio list with labels, values and elements attributes.

options_class_name¶: Global options class name.

options_style¶: Global style object of options.

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

value¶: Selected radio button.

width¶: Width of the component.

class dazzler.components.core.Script(uri, loaded=undefined, timeout=30000, error=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Load a script when mounted, with loaded status update and error handling.

__init__(uri, loaded=undefined, timeout=30000, error=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

uri (str) – The script to load.
loaded (Optional[bool]) –
timeout (Union[float, int, None]) – (default=30000)
error (Optional[str]) –
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

error¶

loaded¶

style¶: Style object for the top level wrapper of the component.

timeout¶: (default=30000)

uri¶: The script to load.

class dazzler.components.core.Select(options, multi=undefined, value=undefined, size=undefined, class_name=undefined, placeholder=undefined, name=undefined, disabled=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A select

__init__(options, multi=undefined, value=undefined, size=undefined, class_name=undefined, placeholder=undefined, name=undefined, disabled=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, style=undefined, identity=None)[source]¶

Parameters

options (List[Dict[str, Any]]) – Option of the select.
multi (Optional[bool]) – Controls wether multiple options can be selected.
value (Union[str, float, int, List[str], None]) – Value of the selected option(s)
size (Union[float, int, None]) – Size of the options to use instead of
class_name (Optional[str]) – CSS class of the Select Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core- container. When added on the component, the class names will be concatenated.
placeholder (Optional[str]) – Placeholder text when the input has no value.
name (Optional[str]) – name of the html input that will be created with the current value
disabled (Optional[bool]) – Disable the component.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: CSS class of the SelectClass name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

disabled¶: Disable the component.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

multi¶: Controls wether multiple options can be selected.

name¶: name of the html input that will be created with the current value

options¶: Option of the select.

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

placeholder¶: Placeholder text when the input has no value.

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

size¶: Size of the options to use instead of

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

value¶: Value of the selected option(s)

width¶: Width of the component.

class dazzler.components.core.Slider(minimum, maximum, value=0, round=undefined, debounce=50, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A slider with a caret contained within a min and max value.

CSS

dazzler-core-slider
slider-area: The outer div of the slider.
slider-handle: The drag handle
slider-spacer: The space that is before the handle.

Example

from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext

page = Page(
    __name__,
    core.Container([
        core.Container(style={'marginTop': '20px'}),
        core.Container(
            [
                core.Container(
                    'start',
                    identity='start',
                    style={'padding': '0.5rem'}
                ),
                core.Slider(
                    -100, 100,
                    identity='slider',
                    value=-20,
                    style={'width': '80%'}
                ),
                core.Container(
                    'stop',
                    identity='stop',
                    style={'padding': '0.5rem'},
                )
            ],
            class_name='row center'
        ),

        core.Container(identity='output')
    ], style={'width': '100%'},)
)


@page.bind(Trigger('slider', 'value'))
async def on_value(ctx: BindingContext):
    await ctx.set_aspect(
        'output', children=f'{ctx.trigger.identity}: {ctx.trigger.value}'
    )

__init__(minimum, maximum, value=0, round=undefined, debounce=50, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

minimum (Union[float, int]) – Minimum (leftmost) value of the slider.
maximum (Union[float, int]) – Maximum (rightmost) value of the slider.
value (Union[float, int, None]) – Current value (default=0)
round (Optional[Any]) – Round the value (Possible values: ‘ceil’, ‘floor’)
debounce (Union[float, int, None]) – Time in milliseconds to wait before updating the value. (default=50)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

debounce¶: Time in milliseconds to wait before updating the value. (default=50)

maximum¶: Maximum (rightmost) value of the slider.

minimum¶: Minimum (leftmost) value of the slider.

round¶: Round the value (Possible values: ‘ceil’, ‘floor’)

style¶: Style object for the top level wrapper of the component.

value¶: Current value (default=0)

class dazzler.components.core.Store(data=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Store data in the browser memory. Data last until the page is refreshed.

__init__(data=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

data (Optional[Any]) – Stored data.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

data¶: Stored data.

style¶: Style object for the top level wrapper of the component.

class dazzler.components.core.Stylesheet(uri, loaded=undefined, timeout=undefined, error=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Load a stylesheet.

__init__(uri, loaded=undefined, timeout=undefined, error=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

uri (str) – Stylesheet url to load.
loaded (Optional[bool]) – Is the stylesheet loaded.
timeout (Union[float, int, None]) – Time until it cancel the loading.
error (Optional[str]) – Error loading the stylesheet.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

error¶: Error loading the stylesheet.

loaded¶: Is the stylesheet loaded.

style¶: Style object for the top level wrapper of the component.

timeout¶: Time until it cancel the loading.

uri¶: Stylesheet url to load.

class dazzler.components.core.Switch(value=undefined, disabled=undefined, rounded=True, preset_color=undefined, preset_size=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

On/Off switch.

CSS

dazzler-core-switch
switch-on
switch-off
switch-caret

Example

from dazzler.components import core
from dazzler.system import Page, transforms as t
from dazzler.presets import PresetSize, PresetColor

page = Page(
    __name__,
    core.Container([
        core.Container([
            core.Switch(
                rounded=True,
                value=True,
                preset_color=PresetColor.PRIMARY,
                identity='switch'
            ),
            core.Switch(
                preset_color=PresetColor.SECONDARY
            ),
            core.Switch(
                preset_color=PresetColor.SECONDARY
            ),
            core.Switch(
                preset_color=PresetColor.TERTIARY
            ),
            core.Switch(
                preset_color=PresetColor.DANGER
            ),
            core.Switch(
                preset_color=PresetColor.WARNING
            ),
            core.Switch(
                preset_color=PresetColor.SUCCESS
            ),
            core.Switch(
                rounded=False,
            ),
            core.Switch(),
            core.Switch(
                disabled=True,
            ),
            core.Switch(
                disabled=True,
                value=True,
            ),
            core.Container(identity='output')
        ], padding='1rem', class_name='row'),

        core.Container([
            core.Switch(preset_size=p)
            for p in PresetSize
        ], class_name='row')
    ]),
)

page.tie('value@switch', 'children@output').t(t.Format('Value: ${value}'))

__init__(value=undefined, disabled=undefined, rounded=True, preset_color=undefined, preset_size=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

value (Optional[bool]) – Switched on or off
disabled (Optional[bool]) – Disabled the switch from being toggled.
rounded (Optional[bool]) – Round the edge of the switch. (default=True)
preset_color (Optional[Any]) – Color of the switch (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

disabled¶: Disabled the switch from being toggled.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_color¶: Color of the switch (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the switch. (default=True)

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

value¶: Switched on or off

width¶: Width of the component.

class dazzler.components.core.Table(rows=undefined, caption=undefined, headers=undefined, footer=undefined, include_row_number=undefined, row_number_start=undefined, default_table=True, collapsed=True, centered=undefined, bordered=undefined, size=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Display data in a tabular manner (Non interactive).

CSS

dazzler-core-table
table-head
table-heading
table-body
table-row
table-cell
table-footer

Example

from dazzler.components import core
from dazzler.system import Page

page = Page(
    __name__,
    core.Container([
        core.Table(
            [[1, 2, 3], [4, 5, 6], [3, 4, 5]],
            headers=['one', 'two', 'three'],
            caption='Table',
            include_row_number=True,
            row_number_start=7,
            centered=True,
            bordered=True,
            size='large'
        ),
    ], class_name='row center')
)

__init__(rows=undefined, caption=undefined, headers=undefined, footer=undefined, include_row_number=undefined, row_number_start=undefined, default_table=True, collapsed=True, centered=undefined, bordered=undefined, size=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

rows (Optional[List[List[Any]]]) – Rows of data or components to display.
caption (Optional[Any]) – Title of the table
headers (Optional[List[Any]]) – Table headings
footer (Optional[Any]) – Content of tfoot element (.table-footer)
include_row_number (Optional[bool]) – Each row start with the row number.
row_number_start (Union[float, int, None]) – The start of the row number, useful if paged.
default_table (Optional[bool]) – Apply default style. (default=True)
collapsed (Optional[bool]) – Collapse the borders of the table. (default=True)
centered (Optional[bool]) – Center the cell
bordered (Optional[bool]) – Put a border around elements
size (Optional[Any]) – The size of the table. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Put a border around elements

caption¶: Title of the table

centered¶: Center the cell

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

collapsed¶: Collapse the borders of the table. (default=True)

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

default_table¶: Apply default style. (default=True)

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

footer¶: Content of tfoot element (.table-footer)

headers¶: Table headings

height¶: Height of the component.

include_row_number¶: Each row start with the row number.

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

row_number_start¶: The start of the row number, useful if paged.

rows¶: Rows of data or components to display.

size¶: The size of the table. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

width¶: Width of the component.

class dazzler.components.core.Text(text=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Text component render as a span with common styling options.

CSS

dazzler-text

Example

from dazzle.components.core import Text

text = Text('My text', font_size=20, font_weight='bold')

__init__(text=undefined, class_name=undefined, style=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, identity=None)[source]¶

Parameters

text (Optional[str]) – Text to render
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cursor¶: Cursor when the mouse is over the component.

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

rounded¶: Round the edge of the container with borderRadius: 3px;

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text¶: Text to render

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

width¶: Width of the component.

class dazzler.components.core.TextArea(value=undefined, name=undefined, cols=undefined, rows=undefined, required=undefined, disabled=undefined, placeholder=undefined, max_length=undefined, autosize=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Html Textarea wrapper.

CSS

dazzler-core-text-area
autosize

__init__(value=undefined, name=undefined, cols=undefined, rows=undefined, required=undefined, disabled=undefined, placeholder=undefined, max_length=undefined, autosize=undefined, color=undefined, background=undefined, padding=undefined, padding_top=undefined, padding_bottom=undefined, padding_left=undefined, padding_right=undefined, margin=undefined, margin_top=undefined, margin_bottom=undefined, margin_left=undefined, margin_right=undefined, overflow=undefined, height=undefined, min_height=undefined, max_height=undefined, width=undefined, min_width=undefined, max_width=undefined, font_family=undefined, font_size=undefined, font_weight=undefined, font_style=undefined, text_align=undefined, border=undefined, border_radius=undefined, cursor=undefined, flex_grow=undefined, flex_shrink=undefined, align_self=undefined, display=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=undefined, preset_size=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

value (Optional[str]) – Current value of the textarea
name (Optional[str]) – Name of the element for forms.
cols (Union[float, int, None]) – Number of columns.
rows (Union[float, int, None]) – Number of rows.
required (Optional[bool]) – Is it required in a form.
disabled (Optional[bool]) – Is it disabled ?
placeholder (Optional[str]) – Hint when no value is entered.
max_length (Union[float, int, None]) – Max length of the value.
autosize (Optional[bool]) – Auto size the text area to the content value.
color (Optional[str]) – Font color
background (Optional[str]) – Background color/image
padding (Union[str, float, int, None]) – Space around the content before the border
padding_top (Union[str, float, int, None]) –
padding_bottom (Union[str, float, int, None]) –
padding_left (Union[str, float, int, None]) –
padding_right (Union[str, float, int, None]) –
margin (Union[str, float, int, None]) – Space after the element border
margin_top (Union[str, float, int, None]) –
margin_bottom (Union[str, float, int, None]) –
margin_left (Union[str, float, int, None]) –
margin_right (Union[str, float, int, None]) –
overflow (Optional[str]) – Overflow the content and show a scrollbar.
height (Union[str, float, int, None]) – Height of the component.
min_height (Union[str, float, int, None]) –
max_height (Union[str, float, int, None]) – Maximum height before overflow.
width (Union[str, float, int, None]) – Width of the component.
min_width (Union[str, float, int, None]) –
max_width (Union[str, float, int, None]) – Maximum width before overflowing.
font_family (Optional[str]) – Font to use.
font_size (Union[str, float, int, None]) – Size of the font.
font_weight (Union[str, float, int, None]) – Boldness
font_style (Optional[str]) – Italic
text_align (Optional[str]) – Left center right.
border (Optional[str]) – Border around the component.
border_radius (Union[str, float, int, None]) – Round the corner of the component, needs a background or border.
cursor (Optional[str]) – Cursor when the mouse is over the component.
flex_grow (Union[float, int, None]) – Grow factor for flex item.
flex_shrink (Union[float, int, None]) – Shrink factor for flex item.
align_self (Optional[Any]) – Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)
display (Optional[str]) – CSS, How to display the component.
rounded (Optional[bool]) – Round the edge of the container with borderRadius: 3px;
bordered (Optional[bool]) – Apply default bordering with neutral dark grey,
centered (Optional[bool]) – Center the content in the middle of the container.
scrollable (Optional[bool]) – Set the overflow content to scroll.
hidden (Optional[bool]) – Hide the component;
unselectable (Optional[bool]) – Do not allow for the text to be selected.
preset_color (Optional[Any]) – Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success- light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_background (Optional[Any]) – Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral- light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)
preset_size (Optional[Any]) – Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

align_self¶: Flex alignment for the component. (Possible values: ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’, ‘auto’)

autosize¶: Auto size the text area to the content value.

background¶: Background color/image

border¶: Border around the component.

border_radius¶: Round the corner of the component, needs a background or border.

bordered¶: Apply default bordering with neutral dark grey,

centered¶: Center the content in the middle of the container.

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

color¶: Font color

cols¶: Number of columns.

cursor¶: Cursor when the mouse is over the component.

disabled¶: Is it disabled ?

display¶: CSS, How to display the component.

flex_grow¶: Grow factor for flex item.

flex_shrink¶: Shrink factor for flex item.

font_family¶: Font to use.

font_size¶: Size of the font.

font_style¶: Italic

font_weight¶: Boldness

height¶: Height of the component.

hidden¶: Hide the component;

margin¶: Space after the element border

margin_bottom¶

margin_left¶

margin_right¶

margin_top¶

max_height¶: Maximum height before overflow.

max_length¶: Max length of the value.

max_width¶: Maximum width before overflowing.

min_height¶

min_width¶

name¶: Name of the element for forms.

overflow¶: Overflow the content and show a scrollbar.

padding¶: Space around the content before the border

padding_bottom¶

padding_left¶

padding_right¶

padding_top¶

placeholder¶: Hint when no value is entered.

preset_background¶: Preset color to apply to the background. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_color¶: Preset color to apply to the font. (Possible values: ‘primary’, ‘primary-light’, ‘primary-dark’, ‘secondary’, ‘secondary-light’, ‘secondary-dark’, ‘tertiary’, ‘tertiary-light’, ‘tertiary-dark’, ‘danger’, ‘danger-light’, ‘danger-dark’, ‘warning’, ‘warning-light’, ‘warning-dark’, ‘success’, ‘success-light’, ‘success-dark’, ‘neutral’, ‘neutral-light’, ‘neutral-dark’, ‘dark’, ‘dark-light’, ‘dark-dark’, ‘darker’, ‘darker-light’, ‘darker-dark’)

preset_size¶: Scale the size of the container using a preset. (Possible values: ‘tiny’, ‘small’, ‘medium’, ‘large’, ‘larger’, ‘x-large’, ‘xx-large’)

required¶: Is it required in a form.

rounded¶: Round the edge of the container with borderRadius: 3px;

rows¶: Number of rows.

scrollable¶: Set the overflow content to scroll.

style¶: Style object for the top level wrapper of the component.

text_align¶: Left center right.

unselectable¶: Do not allow for the text to be selected.

value¶: Current value of the textarea

width¶: Width of the component.

class dazzler.components.core.ViewPort(active, views, tabbed=undefined, tab_labels=undefined, vertical_tabs=undefined, rounded_tabs=undefined, bordered=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Activate a view with key.

Standalone or tabbed.

CSS

dazzler-core-view-port
view-content
dazzler-tab
dazzler-tabs
tab-active

__init__(active, views, tabbed=undefined, tab_labels=undefined, vertical_tabs=undefined, rounded_tabs=undefined, bordered=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

active (str) – The view that is active.
views (Any) – A dictionary of components to render with the active key.
tabbed (Optional[bool]) – Incorporate tabs before the views.
tab_labels (Optional[Any]) – Labels for the tabs otherwise the tab keys will be used.
vertical_tabs (Optional[bool]) – Make the tabs vertical aligned.
rounded_tabs (Optional[bool]) – Round tab style
bordered (Optional[bool]) – Add a border around the viewport content (CSS bordered).
class_name (Optional[str]) – Class name automatically added by dazzler api with a prefix for the component library. ie: core component Container become dazzler-core-container. When added on the component, the class names will be concatenated.
style (Optional[Dict]) – Style object for the top level wrapper of the component.

active¶: The view that is active.

bordered¶: Add a border around the viewport content (CSS bordered).

class_name¶: Class name automatically added by dazzler api with a prefix for the component library.ie: core component Container become dazzler-core-container.When added on the component, the class names will be concatenated.

rounded_tabs¶: Round tab style

style¶: Style object for the top level wrapper of the component.

tab_labels¶: Labels for the tabs otherwise the tab keys will be used.

tabbed¶: Incorporate tabs before the views.

vertical_tabs¶: Make the tabs vertical aligned.

views¶: A dictionary of components to render with the active key.