dazzler.components.extra package¶

class dazzler.components.extra.ColorPicker(value=undefined, type="'hex'", toggleable=True, toggle_button=undefined, toggle_on_choose=True, toggle_on_choose_delay=2500, toggle_direction="'top-left'", active=undefined, toggle_button_color=True, as_string=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

A color picker powered by react-colorful

A toggle button is included or can be disabled with toggleable=False and then it be activated by binding, tie or initial value.

Common style aspects goes on the container of the picker, hidden by default.

CSS

dazzler-extra-color-picker - Top level container
dazzler-color-picker-toggle - Toggle button
dazzler-color-picker - Picker container.

from dazzler.system import Page, transforms as t
from dazzler.components.core import Box, Container, Text
from dazzler.components.extra import ColorPicker

color_types = [
   'hex', 'rgb', 'rgba', 'hsl', 'hsla', 'hsv', 'hsva'
]

page = Page(
    __name__,
    Container([
        Box([
            ColorPicker(type=x, identity=f'{x}-picker') for x in color_types
        ]),
        Box([
            Text(identity=f'{x}-output') for x in color_types
        ], column=True),
        Box([
            ColorPicker(
                type='rgba',
                identity='colored-toggle',
                toggle_button_color=True,
                toggle_on_choose_delay=2000,
                value='rgba(255, 0, 0, 1)',
                as_string=True,
                bordered=True,
                rounded=True,
                padding=12,
            ),
            Text('Colored Output', identity='colored-output')
        ])
    ])
)

page.tie(f'value@colored-toggle', 'background@colored-output')

for color_type in color_types:
    page.tie(f'color@{color_type}-picker', f'text@{color_type}-output').t(
        t.ToJson()
    )

__init__(value=undefined, type="'hex'", toggleable=True, toggle_button=undefined, toggle_on_choose=True, toggle_on_choose_delay=2500, toggle_direction="'top-left'", active=undefined, toggle_button_color=True, as_string=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[Any]) – Current color value
type (Optional[Any]) – Type of color (Possible values: ‘hex’, ‘rgb’, ‘rgba’, ‘hsl’, ‘hsla’, ‘hsv’, ‘hsva’) (default=“‘hex’”)
toggleable (Optional[bool]) – Add a toggle button to activate the color picker. (default=True)
toggle_button (Optional[Any]) – Content of the toggle button.
toggle_on_choose (Optional[bool]) – Close the color picker when a value is selected. (default=True)
toggle_on_choose_delay (Union[float, int, None]) – Delay before closing the modal when the (default=2500)
toggle_direction (Optional[Any]) – Direction to open the color picker on toggle. (Possible values: ‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘right’, ‘bottom’, ‘bottom-left’, ‘bottom-right’) (default=“‘top- left’”)
active (Optional[bool]) – Show the color picker.
toggle_button_color (Optional[bool]) – Use a square with background color from the value as the toggle button. (default=True)
as_string (Optional[bool]) – The value will always be a string, usable directly in styles. toggle_button_color requires a string value or hex type.
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: ‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘baseline’, ‘stretch’)
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¶: Show the color picker.

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

as_string¶: The value will always be a string, usable directly in styles.``toggle_button_color`` requires a string value or hex type.

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_align¶: Left center right.

toggle_button¶: Content of the toggle button.

toggle_button_color¶: Use a square with background color from the value as the toggle button. (default=True)

toggle_direction¶: Direction to open the color picker on toggle. (Possible values: ‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘right’, ‘bottom’, ‘bottom-left’, ‘bottom-right’) (default=top-left)

toggle_on_choose¶: Close the color picker when a value is selected. (default=True)

toggle_on_choose_delay¶: Delay before closing the modal when the (default=2500)

toggleable¶: Add a toggle button to activate the color picker. (default=True)

type¶: Type of color (Possible values: ‘hex’, ‘rgb’, ‘rgba’, ‘hsl’, ‘hsla’, ‘hsv’, ‘hsva’) (default=hex)

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

value¶: Current color value

width¶: Width of the component.

class dazzler.components.extra.Drawer(children=undefined, side="'top'", opened=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Draw content from the sides of the screen.

CSS

dazzler-extra-drawer
drawer-content
drawer-control
vertical
horizontal
right
bottom

__init__(children=undefined, side="'top'", opened=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

children (Optional[Any]) –
side (Optional[Any]) – DrawerSide to open the drawer from. (Possible values: ‘top’, ‘left’, ‘right’, ‘bottom’) (default=“‘top’”)
opened (Optional[bool]) –
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.

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.

opened¶

side¶: DrawerSide to open the drawer from. (Possible values: ‘top’, ‘left’, ‘right’, ‘bottom’) (default=top)

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

class dazzler.components.extra.Notice(title, body=undefined, permission=undefined, lang=undefined, badge=undefined, tag=undefined, icon=undefined, image=undefined, vibrate=undefined, require_interaction=undefined, displayed=undefined, clicks=undefined, clicks_timestamp=undefined, closes=undefined, closes_timestamp=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Browser notifications with permissions handling.

__init__(title, body=undefined, permission=undefined, lang=undefined, badge=undefined, tag=undefined, icon=undefined, image=undefined, vibrate=undefined, require_interaction=undefined, displayed=undefined, clicks=undefined, clicks_timestamp=undefined, closes=undefined, closes_timestamp=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

title (str) –
body (Optional[str]) – A DOMString representing the body text of the notification, which will be displayed below the title.
permission (Optional[Any]) – Permission granted by the user (READONLY) (Possible values: ‘denied’, ‘granted’, ‘default’, ‘unsupported’)
lang (Optional[str]) – The notification’s language, as specified using a DOMString representing a BCP 47 language tag.
badge (Optional[str]) – A USVString containing the URL of the image used to represent the notification when there is not enough space to display the notification itself.
tag (Optional[str]) – A DOMString representing an identifying tag for the notification.
icon (Optional[str]) – A USVString containing the URL of an icon to be displayed in the notification.
image (Optional[str]) – a USVString containing the URL of an image to be displayed in the notification.
vibrate (Union[float, int, List[Union[float, int]], None]) – A vibration pattern for the device’s vibration hardware to emit when the notification fires.
require_interaction (Optional[bool]) – Indicates that a notification should remain active until the user clicks or dismisses it, rather than closing automatically. The default value is false.
displayed (Optional[bool]) – Set to true to display the notification.
clicks (Union[float, int, None]) –
clicks_timestamp (Union[float, int, None]) –
closes (Union[float, int, None]) – Number of times the notification was closed.
closes_timestamp (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.

badge¶: A USVString containing the URL of the image used to represent the notification when there is not enough space to display the notification itself.

body¶: A DOMString representing the body text of the notification, which will be displayed below the title.

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¶

clicks_timestamp¶

closes¶: Number of times the notification was closed.

closes_timestamp¶

displayed¶: Set to true to display the notification.

icon¶: A USVString containing the URL of an icon to be displayed in the notification.

image¶: a USVString containing the URL of an image to be displayed in the notification.

lang¶: The notification’s language, as specified using a DOMString representing a BCP 47 language tag.

permission¶: Permission granted by the user (READONLY) (Possible values: ‘denied’, ‘granted’, ‘default’, ‘unsupported’)

require_interaction¶: Indicates that a notification should remain active until the user clicks or dismisses it, rather than closing automatically. The default value is false.

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

tag¶: A DOMString representing an identifying tag for the notification.

title¶

vibrate¶: A vibration pattern for the device’s vibration hardware to emit when the notification fires.

class dazzler.components.extra.PageMap(class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

List of links to other page in the app.

CSS

dazzler-extra-page-map

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

Parameters

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.

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

class dazzler.components.extra.Pager(total_items, items_per_page=10, style=undefined, class_name=undefined, page_style=undefined, page_class_name=undefined, pages_displayed=10, pages=undefined, current_page=1, total_pages=undefined, start_offset=undefined, end_offset=undefined, next_label=undefined, previous_label=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Paging for dazzler apps.

CSS

dazzler-extra-pager
page

__init__(total_items, items_per_page=10, style=undefined, class_name=undefined, page_style=undefined, page_class_name=undefined, pages_displayed=10, pages=undefined, current_page=1, total_pages=undefined, start_offset=undefined, end_offset=undefined, next_label=undefined, previous_label=undefined, identity=None)[source]¶

Parameters

total_items (Union[float, int]) – The total items in the set.
items_per_page (Union[float, int, None]) – The number of items a page contains. (default=10)
style (Optional[Dict]) – Style object for the top level wrapper of 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.
page_style (Optional[Dict]) – Style for the page numbers.
page_class_name (Optional[str]) – CSS class for the page numbers.
pages_displayed (Union[float, int, None]) – The number of pages displayed by the pager. (default=10)
pages (Optional[List[Union[float, int]]]) – Read only, the currently displayed pages numbers.
current_page (Union[float, int, None]) – The current selected page. (default=1)
total_pages (Union[float, int, None]) – Set by total_items / items_per_page
start_offset (Union[float, int, None]) – The starting index of the current page Can be used to slice data eg: data[start_offset: end_offset]
end_offset (Union[float, int, None]) – The end index of the current page.
next_label (Optional[Any]) – Label for the next button. (default=’next’)
previous_label (Optional[Any]) – Text or component to use for the previous button. (default=’previous’)

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.

current_page¶: The current selected page. (default=1)

end_offset¶: The end index of the current page.

items_per_page¶: The number of items a page contains. (default=10)

next_label¶: Label for the next button. (default=’next’)

page_class_name¶: CSS class for the page numbers.

page_style¶: Style for the page numbers.

pages¶: Read only, the currently displayed pages numbers.

pages_displayed¶: The number of pages displayed by the pager. (default=10)

previous_label¶: Text or component to use for the previous button. (default=’previous’)

start_offset¶: The starting index of the current pageCan be used to slice data eg: data[start_offset: end_offset]

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

total_items¶: The total items in the set.

total_pages¶: Set by total_items / items_per_page

class dazzler.components.extra.PopUp(children, content, active=False, mode="'hover'", content_style=undefined, children_style=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Wraps a component/text to render a popup when hovering over the children or clicking on it.

CSS

dazzler-extra-pop-up
popup-content
visible

__init__(children, content, active=False, mode="'hover'", content_style=undefined, children_style=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

children (Any) – Component/text to wrap with a popup on hover/click.
content (Any) – Content of the popup info.
active (Optional[bool]) – Is the popup currently active. (default=False)
mode (Optional[Any]) – Show popup on hover or click. (Possible values: ‘hover’, ‘click’) (default=“‘hover’”)
content_style (Optional[Dict]) – Style for the popup.
children_style (Optional[Dict]) – Style for the wrapped children.
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¶: Is the popup currently active. (default=False)

children¶: Component/text to wrap with a popup on hover/click.

children_style¶: Style for the wrapped 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.

content¶: Content of the popup info.

content_style¶: Style for the popup.

mode¶: Show popup on hover or click. (Possible values: ‘hover’, ‘click’) (default=hover)

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

class dazzler.components.extra.Spinner(class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Simple html/css spinner.

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

Parameters

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.

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

class dazzler.components.extra.Sticky(children, top=undefined, left=undefined, right=undefined, bottom=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A shorthand component for a sticky div.

__init__(children, top=undefined, left=undefined, right=undefined, bottom=undefined, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

children (Any) –
top (Optional[str]) –
left (Optional[str]) –
right (Optional[str]) –
bottom (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.

bottom¶

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.

left¶

right¶

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

top¶

class dazzler.components.extra.Toast(message, delay=3000, position="'top'", opened=True, class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

Display a message over the ui that will disappears after a delay.

CSS

dazzler-extra-toast
opened
toast-inner
top
top-left
top-right
bottom
bottom-left
bottom-right
right

__init__(message, delay=3000, position="'top'", opened=True, class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

message (Any) – What to show in the toast.
delay (Union[float, int, None]) – Delay in milliseconds before the toast is automatically closed. (default=3000)
position (Optional[Any]) – Where the toast will be display. (Possible values: ‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘right’, ‘bottom’, ‘bottom- left’, ‘bottom-right’, ‘center’) (default=“‘top’”)
opened (Optional[bool]) – To display the toast for the delay. (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.

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.

delay¶: Delay in milliseconds before the toast is automatically closed. (default=3000)

message¶: What to show in the toast.

opened¶: To display the toast for the delay. (default=True)

position¶: Where the toast will be display. (Possible values: ‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘right’, ‘bottom’, ‘bottom-left’, ‘bottom-right’, ‘center’) (default=top)

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

class dazzler.components.extra.TreeView(items, selected=undefined, expanded_items=undefined, nest_icon_collapsed='⏵', nest_icon_expanded='⏷', class_name=undefined, style=undefined, identity=None)[source]¶

Bases: dazzler.system._component.Component

A tree of nested items.

CSS

dazzler-extra-tree-view
tree-item
tree-item-label
tree-sub-items
tree-caret
selected
level-{n}

Example

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

page = Page(
    __name__,
    core.Container([
        extra.TreeView([
            'item12',
            {
                'identifier': 'nest',
                'label': 'nest',
                'items': [
                    'nested1',
                    'nested2',
                    {
                        'label': 'subnest',
                        'identifier': 'subnest',
                        'items': ['sub1', 'sub2']
                    }
                ],
            }
        ], identity='treeview'),
        core.Container(identity='output')
    ])
)


@page.bind('selected@treeview')
async def on_selected(ctx: BindingContext):
    await ctx.set_aspect('output', children=ctx.trigger.value)

__init__(items, selected=undefined, expanded_items=undefined, nest_icon_collapsed='⏵', nest_icon_expanded='⏷', class_name=undefined, style=undefined, identity=None)[source]¶

Parameters

items (Union[List[str], List[Dict]]) – An array of items to render recursively.
selected (Optional[str]) – Last clicked path identifier joined by dot.
expanded_items (Optional[List[str]]) – Identifiers that have sub items and are open. READONLY. (default=[])
nest_icon_collapsed (Optional[str]) – Icon to show when sub items are hidden. (default=’⏵’)
nest_icon_expanded (Optional[str]) – Icon to show when sub items are shown. (default=’⏷’)
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.

expanded_items¶: Identifiers that have sub items and are open.READONLY. (default=[])

items¶: An array of items to render recursively.

nest_icon_collapsed¶: Icon to show when sub items are hidden. (default=’⏵’)

nest_icon_expanded¶: Icon to show when sub items are shown. (default=’⏷’)

selected¶: Last clicked path identifier joined by dot.

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