dazzler.components.icons package

class dazzler.components.icons.FlagIconPack(class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

Free icon pack from https://github.com/lipis/flag-icons

Pack

flag-icon

Example

icons.FlagIconPack()
icons.Icon('flag-icon flag-icon-ca')

__init__(class_name=undefined, style=undefined, identity=None)

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.icons.FoundIconPack(class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

Free icon pack from https://zurb.com/playground/foundation-icon-fonts-3

Pack

fi

Example

__init__(class_name=undefined, style=undefined, identity=None)

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.icons.Icon(name, icon_pack=undefined, class_name=undefined, style=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=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, identity=None)

Bases: dazzler.system._component.Component

Icon from a pack, prefix the name with the pack name.

icon = Icon('fi-home')

__init__(name, icon_pack=undefined, class_name=undefined, style=undefined, rounded=undefined, bordered=undefined, centered=undefined, scrollable=undefined, hidden=undefined, unselectable=undefined, preset_color=undefined, preset_background=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, identity=None)

Parameters

• name (str) – Name of the icon to render, it will try to set the icon_pack prop from the name if it’s not provided. Split with - or empty space, the first found will be the icon_pack. IE: For FoundIcon fi-[icon-name].

• icon_pack (Optional[str]) – Correspond to the name proper of the icon_pack, most font icons packages requires their pack name to be included in the class_name, as such, this component will add it automatically from found or provided icon pack name.

• 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.

• 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’)

• 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.

align_self

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

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;

icon_pack

Correspond to the name proper of the icon_pack, most font iconspackages requires their pack name to be included in the class_name, assuch, this component will add it automatically from found or providedicon pack name.

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

name

Name of the icon to render, it will try to set the icon_pack prop fromthe name if it’s not provided. Split with - or empty space, thefirst found will be the icon_pack. IE: For FoundIcon fi-[icon-name].

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.icons.IconLoader(packs=undefined, children=undefined, class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

Manager for loading icon packs

Insert once in the layout, can load the packs from the props. Manage the loaded packs so icons knows when to render. IconPack’s in the layout need this component.

__init__(packs=undefined, children=undefined, class_name=undefined, style=undefined, identity=None)

Parameters

• packs (Optional[List[Dict[str, str]]]) – Packs to automatically load when this component mounts. (default=[])

• children (Optional[Any]) –

• 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.

packs

Packs to automatically load when this component mounts. (default=[])

style

Style object for the top level wrapper of the component.

class dazzler.components.icons.IconPack(name, url, class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

A pack of font icons to load.

__init__(name, url, class_name=undefined, style=undefined, identity=None)

Parameters

• name (str) –

• url (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.

name

style

Style object for the top level wrapper of the component.

url

class dazzler.components.icons.LinearIconPack(class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

Free Icon pack from “https://linearicons.com/free”

Pack

lnr

Example

icons.LinearIconPack()
icons.Icon('lnr-home')

__init__(class_name=undefined, style=undefined, identity=None)

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.icons.OpenIconicPack(class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

Icon pack from https://useiconic.com/

Pack

oi

Example

icons.OpenIconicPack()
icons.Icon('oi-bug')

__init__(class_name=undefined, style=undefined, identity=None)

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.icons.TypiconsPack(class_name=undefined, style=undefined, identity=None)

Bases: dazzler.system._component.Component

Free Icon pack from: https://www.s-ings.com/typicons/

Pack

typcn

Example

icons.TypiconsPack()
icons.Icon('typcn-globe')

__init__(class_name=undefined, style=undefined, identity=None)

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.