Skip to main content

Module h2o_wave.types

Classes​

ArticleCard​

class ArticleCard(box: str, title: str, content: str | None = None, items: List[Component] | None = None, commands: List[Command] | None = None)

Create an article card for longer texts.

Static methods​

load​

def load(_ArticleCard__d: Dict) ‑> ArticleCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var content

Markdown text.

var items

Collection of small buttons rendered under the title.

var title

The card’s title, displayed at the top.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

AudioAnnotator​

class AudioAnnotator(name: str, title: str, path: str, tags: List[AudioAnnotatorTag], items: List[AudioAnnotatorItem] | None = None, trigger: bool | None = None)

Create an audio annotator component.

This component allows annotating and labeling parts of audio file.

Static methods​

load​

def load(_AudioAnnotator__d: Dict) ‑> AudioAnnotator

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

Annotations to display on the image, if any.

var name

An identifying name for this component.

var path

The path to the audio file. Use mp3 or wav formats to achieve the best cross-browser support. See https://caniuse.com/?search=audio%20format for other formats.

var tags

The master list of tags that can be used for annotations.

var title

The audio annotator's title.

var trigger

True if the form should be submitted as soon as an annotation is made.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

AudioAnnotatorItem​

class AudioAnnotatorItem(start: float, end: float, tag: str)

Create an annotator item with initial selected tags or no tags.

Static methods​

load​

def load(_AudioAnnotatorItem__d: Dict) ‑> AudioAnnotatorItem

Creates an instance of this class using the contents of a dict.

Instance variables​

var end

The end of the audio annotation in seconds.

var start

The start of the audio annotation in seconds.

var tag

The name of the audio annotator tag to refer to for the label and color of this item.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

AudioAnnotatorTag​

class AudioAnnotatorTag(name: str, label: str, color: str)

Create a unique tag type for use in an audio annotator.

Static methods​

load​

def load(_AudioAnnotatorTag__d: Dict) ‑> AudioAnnotatorTag

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

Hex or RGB color string to be used as the background color.

var label

Text to be displayed for the annotation.

var name

An identifying name for this tag.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Breadcrumb​

class Breadcrumb(name: str, label: str)

Create a breadcrumb for a BreadcrumbsCard.

Static methods​

load​

def load(_Breadcrumb__d: Dict) ‑> Breadcrumb

Creates an instance of this class using the contents of a dict.

Instance variables​

var label

The label to display.

var name

The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

BreadcrumbsCard​

class BreadcrumbsCard(box: str, items: List[Breadcrumb], commands: List[Command] | None = None)

Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

Static methods​

load​

def load(_BreadcrumbsCard__d: Dict) ‑> BreadcrumbsCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

A list of Breadcrumb instances to display. See breadcrumb()

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Button​

class Button(name: str, label: str | None = None, caption: str | None = None, value: str | None = None, primary: bool | None = None, disabled: bool | None = None, link: bool | None = None, icon: str | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, path: str | None = None, commands: List[Command] | None = None)

Create a button.

Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

Static methods​

load​

def load(_Button__d: Dict) ‑> Button

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

The caption displayed below the label.

var commands

When specified, a split button is rendered with extra actions tied to it within a context menu. Mutually exclusive with link attribute.

var disabled

True if the button should be disabled.

var icon

An optional icon to display next to the button label (not applicable for links).

var label

The text displayed on the button.

True if the button should be rendered as link text and not a standard button.

var name

An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.

var path

The path or URL to link to. If specified, the name is ignored. The URL is opened in a new browser window or tab.

var primary

True if the button should be rendered as the primary button in the set.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var value

A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the button, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Buttons​

class Buttons(items: List[ForwardRef('Component')], justify: str | None = None, name: str | None = None, width: str | None = None, visible: bool | None = None)

Create a set of buttons laid out horizontally.

Static methods​

load​

def load(_Buttons__d: Dict) ‑> Buttons

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

The buttons in this set.

var justify

Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.ButtonsJustify.

var name

An identifying name for this component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the buttons, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ButtonsJustify​

class ButtonsJustify

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START

CanvasCard​

class CanvasCard(box: str, title: str, width: int, height: int, data: dict | str | Data, commands: List[Command] | None = None)

WARNING: Experimental and subject to change. Do not use in production sites!

Create a card that displays a drawing canvas (whiteboard).

Static methods​

load​

def load(_CanvasCard__d: Dict) ‑> CanvasCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

The data for this card.

var height

Canvas height, in pixels.

var title

The title for this card.

var width

Canvas width, in pixels.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ChatCard​

class ChatCard(box: str, title: str, data: dict | str | Data, capacity: int | None = None, commands: List[Command] | None = None)

WARNING: Experimental and subject to change. Do not use in production sites!

Create a card that displays a chat room.

Static methods​

load​

def load(_ChatCard__d: Dict) ‑> ChatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var capacity

The maximum number of messages contained in this card. Defaults to 50.

var commands

Contextual menu commands for this component.

var data

The data for this card.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ChatSuggestion​

class ChatSuggestion(name: str, label: str, caption: str | None = None, icon: str | None = None)

Create a chat prompt suggestion displayed as button below the last response in the chatbot component.

Static methods​

load​

def load(_ChatSuggestion__d: Dict) ‑> ChatSuggestion

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

The caption displayed below the label.

var icon

The icon to be displayed for this suggestion.

var label

The text displayed for this suggestion.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ChatbotCard​

class ChatbotCard(box: str, name: str, data: dict | str | Data, placeholder: str | None = None, events: List[str] | None = None, generating: bool | None = None, suggestions: List[ChatSuggestion] | None = None, disabled: bool | None = None, value: str | None = None, commands: List[Command] | None = None)

Create a chatbot card to allow getting prompts from users and providing them with LLM generated answers.

Static methods​

load​

def load(_ChatbotCard__d: Dict) ‑> ChatbotCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Chat messages data. Requires cyclic buffer.

var disabled

True if the user input should be disabled.

var events

The events to capture on this chatbot. One of 'stop' | 'scroll_up' | 'feedback' | 'suggestion'.

var generating

True to show a button to stop the text generation. Defaults to False.

var name

An identifying name for this component.

var placeholder

Chat input box placeholder. Use for prompt examples.

var suggestions

Clickable prompt suggestions shown below the last response.

var value

Value of the user input.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Checkbox​

class Checkbox(name: str, label: str | None = None, value: bool | None = None, indeterminate: bool | None = None, disabled: bool | None = None, trigger: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a checkbox.

A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

Static methods​

load​

def load(_Checkbox__d: Dict) ‑> Checkbox

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if the checkbox is disabled.

var indeterminate

True if the selection is indeterminate (neither selected nor unselected).

var label

Text to be displayed alongside the checkbox.

var name

An identifying name for this component.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the checkbox value changes.

var value

True if selected, False if unselected.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the checkbox, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Checklist​

class Checklist(name: str, label: str | None = None, values: List[str] | None = None, choices: List[Choice] | None = None, trigger: bool | None = None, inline: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

Static methods​

load​

def load(_Checklist__d: Dict) ‑> Checklist

Creates an instance of this class using the contents of a dict.

Instance variables​

var choices

The choices to be presented.

var inline

True if checklist should be rendered horizontally. Defaults to False.

var label

Text to be displayed above the component.

var name

An identifying name for this component.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the checklist value changes.

var values

The names of the selected choices.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the checklist, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Choice​

class Choice(name: str, label: str | None = None, disabled: bool | None = None)

Create a choice for a checklist, choice group or dropdown.

Static methods​

load​

def load(_Choice__d: Dict) ‑> Choice

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if the checkbox is disabled.

var label

Text to be displayed alongside the component.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ChoiceGroup​

class ChoiceGroup(name: str, label: str | None = None, value: str | None = None, choices: List[Choice] | None = None, required: bool | None = None, trigger: bool | None = None, inline: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

Static methods​

load​

def load(_ChoiceGroup__d: Dict) ‑> ChoiceGroup

Creates an instance of this class using the contents of a dict.

Instance variables​

var choices

The choices to be presented.

var inline

True if choices should be rendered horizontally. Defaults to False.

var label

Text to be displayed alongside the component.

var name

An identifying name for this component.

var required

True if this field is required.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the selection changes.

var value

The name of the selected choice.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the choice group, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ColorPicker​

class ColorPicker(name: str, label: str | None = None, value: str | None = None, choices: List[str] | None = None, width: str | None = None, alpha: bool | None = None, inline: bool | None = None, visible: bool | None = None, trigger: bool | None = None, tooltip: str | None = None)

Create a color picker.

A color picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

Static methods​

load​

def load(_ColorPicker__d: Dict) ‑> ColorPicker

Creates an instance of this class using the contents of a dict.

Instance variables​

var alpha

True if user should be allowed to pick color transparency. Defaults to True.

var choices

A list of colors (CSS-compatible strings) to limit color choices to.

var inline

True if color picker should be displayed inline (takes less space). Doesn't work with choices specified. Defaults to False.

var label

Text to be displayed alongside the component.

var name

An identifying name for this component.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the color picker value changes.

var value

The selected color (CSS-compatible string).

var visible

True if the component should be visible. Defaults to True.

var width

The width of the color picker, e.g. '100px'. Defaults to '300px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Combobox​

class Combobox(name: str, label: str | None = None, placeholder: str | None = None, value: str | None = None, values: List[str] | None = None, choices: List[str] | None = None, error: str | None = None, disabled: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, trigger: bool | None = None, required: bool | None = None)

Create a combobox.

A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

Static methods​

load​

def load(_Combobox__d: Dict) ‑> Combobox

Creates an instance of this class using the contents of a dict.

Instance variables​

var choices

The choices to be presented.

var disabled

True if this field is disabled.

var error

Text to be displayed as an error below the text box.

var label

Text to be displayed alongside the component.

var name

An identifying name for this component.

var placeholder

A string that provides a brief hint to the user as to what kind of information is expected in the field.

var required

True if this is a required field. Defaults to False.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the choice should be submitted when an item from the dropdown is selected or the textbox value changes.

var value

The name of the selected choice.

var values

The names of the selected choices. If set, multiple selections will be allowed.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the combobox, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Command​

class Command(name: str, label: str | None = None, caption: str | None = None, icon: str | None = None, items: List[ForwardRef('Command')] | None = None, value: str | None = None, path: str | None = None, download: bool | None = None)

Create a command.

Commands are typically displayed as context menu items or toolbar button.

Static methods​

load​

def load(_Command__d: Dict) ‑> Command

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

The caption for this command (typically a tooltip).

var download

True if the link should prompt the user to save the linked URL instead of navigating to it.

var icon

The icon to be displayed for this command.

var items

Sub-commands, if any

var label

The text displayed for this command.

var name

An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.

var path

The path or URL to link to. The 'items' and 'value' props are ignored when specified.

var value

Data associated with this command, if any.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Component​

class Component(text: Text | None = None, text_xl: TextXl | None = None, text_l: TextL | None = None, text_m: TextM | None = None, text_s: TextS | None = None, text_xs: TextXs | None = None, label: Label | None = None, separator: Separator | None = None, progress: Progress | None = None, message_bar: MessageBar | None = None, textbox: Textbox | None = None, checkbox: Checkbox | None = None, toggle: Toggle | None = None, choice_group: ChoiceGroup | None = None, checklist: Checklist | None = None, dropdown: Dropdown | None = None, combobox: Combobox | None = None, slider: Slider | None = None, spinbox: Spinbox | None = None, date_picker: DatePicker | None = None, color_picker: ColorPicker | None = None, button: Button | None = None, buttons: Buttons | None = None, mini_button: MiniButton | None = None, mini_buttons: MiniButtons | None = None, file_upload: FileUpload | None = None, table: Table | None = None, link: Link | None = None, links: Links | None = None, tabs: Tabs | None = None, expander: Expander | None = None, frame: Frame | None = None, markup: Markup | None = None, template: Template | None = None, picker: Picker | None = None, range_slider: RangeSlider | None = None, stepper: Stepper | None = None, visualization: Visualization | None = None, vega_visualization: VegaVisualization | None = None, stats: Stats | None = None, inline: Inline | None = None, image: Image | None = None, persona: Persona | None = None, text_annotator: TextAnnotator | None = None, image_annotator: ImageAnnotator | None = None, audio_annotator: AudioAnnotator | None = None, facepile: Facepile | None = None, copyable_text: CopyableText | None = None, menu: Menu | None = None, tags: Tags | None = None, time_picker: TimePicker | None = None)

Create a component.

Static methods​

load​

def load(_Component__d: Dict) ‑> Component

Creates an instance of this class using the contents of a dict.

Instance variables​

var audio_annotator

Audio annotator.

var button

Button.

var buttons

Button set.

var checkbox

Checkbox.

var checklist

Checklist.

var choice_group

Choice group.

var color_picker

Color picker.

var combobox

Combobox.

var copyable_text

Copyable text.

var date_picker

Date picker.

var dropdown

Dropdown.

var expander

Expander.

var facepile

Facepile.

var file_upload

File upload.

var frame

Frame.

var image

Image

var image_annotator

Image annotator.

var inline

Inline components.

var label

Label.

Link.

Link set.

var markup

Markup

var menu

Menu.

var message_bar

Message bar.

var mini_button

Mini button.

var mini_buttons

Mini button set.

var persona

Persona.

var picker

Picker.

var progress

Progress bar.

var range_slider

Range Slider.

var separator

Separator.

var slider

Slider.

var spinbox

Spinbox.

var stats

Stats.

var stepper

Stepper.

var table

Table.

var tabs

Tabs.

var tags

Tags.

var template

Template.

var text

Text block.

var text_annotator

Text annotator.

var text_l

Large sized text block.

var text_m

Medium sized text block.

var text_s

Small sized text block.

var text_xl

Extra-large sized text block.

var text_xs

Extra-small sized text block.

var textbox

Textbox.

var time_picker

Time picker.

var toggle

Toggle.

var vega_visualization

Vega-lite Visualization.

var visualization

Visualization.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

CopyableText​

class CopyableText(value: str, label: str, name: str | None = None, multiline: bool | None = None, height: str | None = None, width: str | None = None)

Create a copyable text component. Use this component when you want to enable your users to quickly copy paste sections of text.

Static methods​

load​

def load(_CopyableText__d: Dict) ‑> CopyableText

Creates an instance of this class using the contents of a dict.

Instance variables​

var height

Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires multiline to be set.

var label

The text displayed above the textbox.

var multiline

True if the component should allow multi-line text entry.

var name

An identifying name for this component.

var value

Text to be displayed inside the component.

var width

The width of the copyable text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

DatePicker​

class DatePicker(name: str, label: str | None = None, placeholder: str | None = None, value: str | None = None, disabled: bool | None = None, trigger: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, min: str | None = None, max: str | None = None)

Create a date picker.

A date picker allows a user to pick a date value.

Static methods​

load​

def load(_DatePicker__d: Dict) ‑> DatePicker

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if this field is disabled.

var label

Text to be displayed alongside the component.

var max

The maximum allowed date value in YYYY-MM-DD format.

var min

The minimum allowed date value in YYYY-MM-DD format.

var name

An identifying name for this component.

var placeholder

A string that provides a brief hint to the user as to what kind of information is expected in the field.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the datepicker value changes.

var value

The date value in YYYY-MM-DD format.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the date picker, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Dialog​

class Dialog(title: str, items: List[Component], width: str | None = None, closable: bool | None = None, blocking: bool | None = None, primary: bool | None = None, name: str | None = None, events: List[str] | None = None)

A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file, or asking people to make a choice.

Static methods​

load​

def load(_Dialog__d: Dict) ‑> Dialog

Creates an instance of this class using the contents of a dict.

Instance variables​

var blocking

True to prevent closing when clicking or tapping outside the dialog. Prevents interacting with the page behind the dialog. Defaults to False.

var closable

True if the dialog should have a closing 'X' button at the top right corner.

var events

The events to capture on this dialog. One of 'dismissed'.

var items

The components displayed in this dialog.

var name

An identifying name for this component.

var primary

Dialog with large header banner, mutually exclusive with closable prop. Defaults to False.

var title

The dialog's title.

var width

The width of the dialog, e.g. '400px'. Defaults to '600px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Dropdown​

class Dropdown(name: str, label: str | None = None, placeholder: str | None = None, value: str | None = None, values: List[str] | None = None, choices: List[Choice] | None = None, required: bool | None = None, disabled: bool | None = None, trigger: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, popup: str | None = None)

Create a dropdown.

A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

Static methods​

load​

def load(_Dropdown__d: Dict) ‑> Dropdown

Creates an instance of this class using the contents of a dict.

Instance variables​

var choices

The choices to be presented.

var disabled

True if this field is disabled.

var label

Text to be displayed alongside the component.

var name

An identifying name for this component.

var placeholder

A string that provides a brief hint to the user as to what kind of information is expected in the field.

var popup

Whether to present the choices using a pop-up dialog. By default pops up a dialog only for more than 100 choices. Defaults to 'auto'. One of 'auto', 'always', 'never'. See enum h2o_wave.ui.DropdownPopup.

var required

True if this is a required field.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the dropdown value changes.

var value

The name of the selected choice.

var values

The names of the selected choices. If this parameter is set, multiple selections will be allowed.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the dropdown, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

DropdownPopup​

class DropdownPopup

Class variables​

var ALWAYS
var AUTO
var NEVER

EditorCard​

class EditorCard(box: str, mode: str, commands: List[Command] | None = None)

WARNING: Experimental and subject to change. Do not use in production sites!

Create a card that enables WYSIWYG editing on a page. Adding this card to a page makes the page editable by end-users.

Static methods​

load​

def load(_EditorCard__d: Dict) ‑> EditorCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var mode

The editing mode. Defaults to public. One of 'public', 'private'. See enum h2o_wave.ui.EditorCardMode.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

EditorCardMode​

class EditorCardMode

Class variables​

var PRIVATE
var PUBLIC

Expander​

class Expander(name: str, label: str | None = None, expanded: bool | None = None, items: List[ForwardRef('Component')] | None = None, width: str | None = None, visible: bool | None = None)

Creates a new expander.

Expanders can be used to show or hide a group of related components.

Static methods​

load​

def load(_Expander__d: Dict) ‑> Expander

Creates an instance of this class using the contents of a dict.

Instance variables​

var expanded

True if expanded, False if collapsed.

var items

List of components to be hideable by the expander.

var label

The text displayed on the expander.

var name

An identifying name for this component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the expander, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Facepile​

class Facepile(items: List[ForwardRef('Component')], name: str | None = None, max: int | None = None, value: str | None = None)

A face pile displays a list of personas. Each circle represents a person and contains their image or initials. Often this control is used when sharing who has access to a specific view or file.

Static methods​

load​

def load(_Facepile__d: Dict) ‑> Facepile

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

List of personas to be displayed.

var max

Maximum number of personas to be displayed.

var name

An identifying name for this component. If specified Add button will be rendered.

var value

A value for the facepile. If a value is set, it is used for the button's submitted instead of a boolean True.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

FileUpload​

class FileUpload(name: str, label: str | None = None, multiple: bool | None = None, file_extensions: List[str] | None = None, max_file_size: float | None = None, max_size: float | None = None, height: str | None = None, width: str | None = None, compact: bool | None = None, visible: bool | None = None, tooltip: str | None = None, required: bool | None = None)

Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

Static methods​

load​

def load(_FileUpload__d: Dict) ‑> FileUpload

Creates an instance of this class using the contents of a dict.

Instance variables​

var compact

True if the component should be displayed compactly (without drag-and-drop capabilities). Defaults to False.

var file_extensions

List of allowed file extensions, e.g. pdf, docx, etc.

var height

The height of the file upload, e.g. '400px', '50%', etc. Defaults to '300px'.

var label

Text to be displayed in the bottom button or as a component title when the component is displayed compactly. Defaults to "Upload".

var max_file_size

Maximum allowed size (Mb) per file. No limit by default.

var max_size

Maximum allowed size (Mb) for all files combined. No limit by default.

var multiple

True if the component should allow multiple files to be uploaded.

var name

An identifying name for this component.

var required

True if this is a required field. Defaults to False.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the file upload, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

FlexCard​

class FlexCard(box: str, item_view: str, item_props: dict | str | Data, data: Data | str, direction: str | None = None, justify: str | None = None, align: str | None = None, wrap: str | None = None, commands: List[Command] | None = None)

EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

Static methods​

load​

def load(_FlexCard__d: Dict) ‑> FlexCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'. See enum h2o_wave.ui.FlexCardAlign.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var direction

Layout direction. One of 'horizontal', 'vertical'. See enum h2o_wave.ui.FlexCardDirection.

var item_props

The child card properties.

var item_view

The child card type.

var justify

Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.FlexCardJustify.

var wrap

Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'. See enum h2o_wave.ui.FlexCardWrap.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

FlexCardAlign​

class FlexCardAlign

Class variables​

var BASELINE
var CENTER
var END
var START
var STRETCH

FlexCardDirection​

class FlexCardDirection

Class variables​

var HORIZONTAL
var VERTICAL

FlexCardJustify​

class FlexCardJustify

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START

FlexCardWrap​

class FlexCardWrap

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START
var STRETCH

FooterCard​

class FooterCard(box: str, caption: str, items: List[Component] | None = None, commands: List[Command] | None = None)

Render a page footer displaying a caption. Footer cards are typically displayed at the bottom of a page.

Static methods​

load​

def load(_FooterCard__d: Dict) ‑> FooterCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var caption

The caption. Supports markdown. *

var commands

Contextual menu commands for this component.

var items

The components displayed to the right of the caption.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

FormCard​

class FormCard(box: str, items: List[Component] | str, title: str | None = None, commands: List[Command] | None = None)

Create a form.

Static methods​

load​

def load(_FormCard__d: Dict) ‑> FormCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

The components in this form.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Frame​

class Frame(path: str | None = None, content: str | None = None, width: str | None = None, height: str | None = None, name: str | None = None, visible: bool | None = None)

Create a new inline frame (an iframe).

Static methods​

load​

def load(_Frame__d: Dict) ‑> Frame

Creates an instance of this class using the contents of a dict.

Instance variables​

var content

The HTML content of the page. A string containing <html>...</html>.

var height

The height of the frame, e.g. 200px, 50%, etc. Defaults to '150px'.

var name

An identifying name for this component.

var path

The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

var visible

True if the component should be visible. Defaults to True.

var width

The width of the frame, e.g. 200px, 50%, etc. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

FrameCard​

class FrameCard(box: str, title: str, path: str | None = None, content: str | None = None, compact: bool | None = None, commands: List[Command] | None = None)

Render a card containing a HTML page inside an inline frame (an iframe).

Either a path or content can be provided as arguments.

Static methods​

load​

def load(_FrameCard__d: Dict) ‑> FrameCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var compact

True if title and padding should be removed. Defaults to False.

var content

The HTML content of the page. A string containing <html>...</html>.

var path

The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

GraphicsCard​

class GraphicsCard(box: str, view_box: str, stage: List[dict] | str | None = None, scene: Data | str | None = None, width: str | None = None, height: str | None = None, image: str | None = None, image_path: str | None = None, image_type: str | None = None, commands: List[Command] | None = None)

Create a card for displaying vector graphics.

Static methods​

load​

def load(_GraphicsCard__d: Dict) ‑> GraphicsCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var height

The displayed height of the rectangular viewport. (Not the height of its coordinate system.)

var image

Background image data, base64-encoded.

var image_path

The path or URL or data URL of the background image, e.g. /foo.png or http://example.com/foo.png or data:image/png;base64,???.

var image_type

The background image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp. Required only if image is set.

var scene

Foreground layer for rendering dynamic SVG elements.

var stage

Background layer for rendering static SVG elements. Must be packed to conserve memory.

var view_box

The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

var width

The displayed width of the rectangular viewport. (Not the width of its coordinate system.)

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

GridCard​

class GridCard(box: str, title: str, cells: Data | str, data: Data | str, commands: List[Command] | None = None)

EXPERIMENTAL. DO NOT USE.

Static methods​

load​

def load(_GridCard__d: Dict) ‑> GridCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var cells

EXPERIMENTAL. DO NOT USE.

var commands

Contextual menu commands for this component.

var data

EXPERIMENTAL. DO NOT USE.

var title

EXPERIMENTAL. DO NOT USE.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

HeaderCard​

class HeaderCard(box: str, title: str, subtitle: str, icon: str | None = None, icon_color: str | None = None, image: str | None = None, nav: List[NavGroup] | None = None, items: List[Component] | None = None, secondary_items: List[Component] | None = None, color: str | None = None, commands: List[Command] | None = None)

Render a page header displaying a title, subtitle and an optional navigation menu. Header cards are typically used for top-level navigation.

Static methods​

load​

def load(_HeaderCard__d: Dict) ‑> HeaderCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var color

Header background color. Defaults to 'primary'. One of 'card', 'transparent', 'primary'. See enum h2o_wave.ui.HeaderCardColor.

var commands

Contextual menu commands for this component.

var icon

The icon, displayed to the left. *

var icon_color

The icon's color. *

var image

The URL of an image (usually logo) displayed to the left. Mutually exclusive with icon. *

var items

Items that should be displayed on the right side of the header.

var nav

The navigation menu to display when the header's icon is clicked. Recommended for mobile screens only. *

var secondary_items

Items that should be displayed in the center of the header.

var subtitle

The subtitle, displayed below the title. *

var title

The title. *

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

HeaderCardColor​

class HeaderCardColor

Class variables​

var CARD
var PRIMARY
var TRANSPARENT

IconTableCellType​

class IconTableCellType(color: str | None = None, name: str | None = None)

Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

Static methods​

load​

def load(_IconTableCellType__d: Dict) ‑> IconTableCellType

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

Icon color.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Image​

class Image(title: str, type: str | None = None, image: str | None = None, path: str | None = None, width: str | None = None, visible: bool | None = None, path_popup: str | None = None)

Create an image.

Static methods​

load​

def load(_Image__d: Dict) ‑> Image

Creates an instance of this class using the contents of a dict.

Instance variables​

var image

Image data, base64-encoded.

var path

The path or URL or data URL of the image, e.g. /foo.png or http://example.com/foo.png or data:image/png;base64,???.

var path_popup

The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the path property.

var title

The image title, typically displayed as a tooltip.

var type

The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp. Required only if image is set.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the image, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotator​

class ImageAnnotator(name: str, image: str, title: str, tags: List[ImageAnnotatorTag], items: List[ImageAnnotatorItem] | None = None, trigger: bool | None = None, image_height: str | None = None, allowed_shapes: List[str] | None = None, events: List[str] | None = None)

Create an image annotator component.

This component allows annotating and labeling parts of an image by drawing shapes with a pointing device.

Static methods​

load​

def load(_ImageAnnotator__d: Dict) ‑> ImageAnnotator

Creates an instance of this class using the contents of a dict.

Instance variables​

var allowed_shapes

List of allowed shapes. Available values are 'rect' and 'polygon'. If not set, all shapes are available by default.

var events

The events to capture on this image annotator. One of click | tool_change.

var image

The path or URL of the image to be presented for annotation.

var image_height

The card’s image height. The actual image size is used by default.

var items

Annotations to display on the image, if any.

var name

An identifying name for this component.

var tags

The master list of tags that can be used for annotations.

var title

The image annotator's title.

var trigger

True if the form should be submitted as soon as an annotation is drawn.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotatorItem​

class ImageAnnotatorItem(shape: ImageAnnotatorShape, tag: str)

Create an annotator item with initial selected tags or no tag for plaintext.

Static methods​

load​

def load(_ImageAnnotatorItem__d: Dict) ‑> ImageAnnotatorItem

Creates an instance of this class using the contents of a dict.

Instance variables​

var shape

The annotation shape.

var tag

The name of the image annotator tag to refer to for the label and color of this item.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotatorPoint​

class ImageAnnotatorPoint(x: float, y: float)

Create a polygon annotation point with x and y coordinates..

Static methods​

load​

def load(_ImageAnnotatorPoint__d: Dict) ‑> ImageAnnotatorPoint

Creates an instance of this class using the contents of a dict.

Instance variables​

var x

x coordinate of the point.

var y

y coordinate of the point.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotatorPolygon​

class ImageAnnotatorPolygon(vertices: List[ImageAnnotatorPoint])

Create a polygon annotation shape.

Static methods​

load​

def load(_ImageAnnotatorPolygon__d: Dict) ‑> ImageAnnotatorPolygon

Creates an instance of this class using the contents of a dict.

Instance variables​

var vertices

List of polygon points.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotatorRect​

class ImageAnnotatorRect(x1: float, y1: float, x2: float, y2: float)

Create a rectangular annotation shape.

Static methods​

load​

def load(_ImageAnnotatorRect__d: Dict) ‑> ImageAnnotatorRect

Creates an instance of this class using the contents of a dict.

Instance variables​

var x1

x coordinate of the rectangle's corner.

var x2

x coordinate of the diagonally opposite corner.

var y1

y coordinate of the rectangle's corner.

var y2

y coordinate of the diagonally opposite corner.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotatorShape​

class ImageAnnotatorShape(rect: ImageAnnotatorRect | None = None, polygon: ImageAnnotatorPolygon | None = None)

Create a shape to be rendered as an annotation on an image annotator.

Static methods​

load​

def load(_ImageAnnotatorShape__d: Dict) ‑> ImageAnnotatorShape

Creates an instance of this class using the contents of a dict.

Instance variables​

var polygon

No documentation available.

var rect

No documentation available.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageAnnotatorTag​

class ImageAnnotatorTag(name: str, label: str, color: str)

Create a unique tag type for use in an image annotator.

Static methods​

load​

def load(_ImageAnnotatorTag__d: Dict) ‑> ImageAnnotatorTag

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

Hex or RGB color string to be used as the background color.

var label

Text to be displayed for the annotation.

var name

An identifying name for this tag.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ImageCard​

class ImageCard(box: str, title: str, type: str | None = None, image: str | None = None, data: dict | str | Data | None = None, path: str | None = None, path_popup: str | None = None, commands: List[Command] | None = None)

Create a card that displays a base64-encoded image.

Static methods​

load​

def load(_ImageCard__d: Dict) ‑> ImageCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var image

Image data, base64-encoded.

var path

The path or URL or data URL of the image, e.g. /foo.png or http://example.com/foo.png or data:image/png;base64,???.

var path_popup

The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the path property.

var title

The card's title.

var type

The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Inline​

class Inline(items: List[ForwardRef('Component')], justify: str | None = None, align: str | None = None, inset: bool | None = None, height: str | None = None, direction: str | None = None)

Create an inline (horizontal) list of components.

Static methods​

load​

def load(_Inline__d: Dict) ‑> Inline

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

Specifies how the individual components are aligned on the vertical axis. Defaults to 'center'. One of 'start', 'end', 'center', 'baseline'. See enum h2o_wave.ui.InlineAlign.

var direction

Container direction. Defaults to 'row'. One of 'row', 'column'. See enum h2o_wave.ui.InlineDirection.

var height

Height of the inline container. Accepts any valid CSS unit e.g. '100vh', '300px'. Use '1' to fill the remaining card space.

var inset

Whether to display the components inset from the parent form, with a contrasting background.

var items

The components laid out inline.

var justify

Specifies how to lay out the individual components. Defaults to 'start'. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.InlineJustify.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

InlineAlign​

class InlineAlign

Class variables​

var BASELINE
var CENTER
var END
var START

InlineDirection​

class InlineDirection

Class variables​

var COLUMN
var ROW

InlineJustify​

class InlineJustify

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START

InlineScript​

class InlineScript(content: str, requires: List[str] | None = None, targets: List[str] | None = None)

Create a block of inline Javascript to be executed immediately on a page.

Static methods​

load​

def load(_InlineScript__d: Dict) ‑> InlineScript

Creates an instance of this class using the contents of a dict.

Instance variables​

var content

The Javascript source code to be executed.

var requires

The names of modules required on the page's window global before running this script.

var targets

The HTML elements required to be present on the page before running this script. Each 'target' can either be the ID of the element (foo) or a CSS selector (#foo, .foo, table > td.foo, etc.).

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

InlineStylesheet​

class InlineStylesheet(content: str, media: str | None = None)

Create an inline CSS to be injected into a page.

Static methods​

load​

def load(_InlineStylesheet__d: Dict) ‑> InlineStylesheet

Creates an instance of this class using the contents of a dict.

Instance variables​

var content

The CSS to be applied to this page.

var media

A valid media query to set conditions for when the style should be applied. More info at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attr-media.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Label​

class Label(label: str, required: bool | None = None, disabled: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, name: str | None = None)

Create a label.

Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

Static methods​

load​

def load(_Label__d: Dict) ‑> Label

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if the label should be disabled.

var label

The text displayed on the label.

var name

An identifying name for this component.

var required

True if the field is required.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the label , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

LargeBarStatCard​

class LargeBarStatCard(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

Static methods​

load​

def load(_LargeBarStatCard__d: Dict) ‑> LargeBarStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value, typically a target value.

var aux_value_caption

The caption displayed below the auxiliary value.

var box

A string indicating how to place this component on the page.

var caption

The card's caption.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_color

The color of the progress bar.

var progress

The value of the progress bar, between 0 and 1.

var title

The card's title.

var value

The primary value displayed.

var value_caption

The caption displayed below the primary value.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

LargeStatCard​

class LargeStatCard(box: str, title: str, value: str, aux_value: str, caption: str, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a stat card displaying a primary value, an auxiliary value and a caption.

Static methods​

load​

def load(_LargeStatCard__d: Dict) ‑> LargeStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value displayed next to the primary value.

var box

A string indicating how to place this component on the page.

var caption

The caption displayed below the primary value.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Layout​

class Layout(breakpoint: str, zones: List[Zone], width: str | None = None, min_width: str | None = None, max_width: str | None = None, height: str | None = None, min_height: str | None = None, max_height: str | None = None, name: str | None = None)

Represents the layout structure for a page.

Static methods​

load​

def load(_Layout__d: Dict) ‑> Layout

Creates an instance of this class using the contents of a dict.

Instance variables​

var breakpoint

The minimum viewport width at which to use this layout. Values must be pixel widths (e.g. '0px', '576px', '768px') or a named preset. The named presets are: 'xs': '0px' for extra small devices (portrait phones), 's': '576px' for small devices (landscape phones), 'm': '768px' for medium devices (tablets), 'l': '992px' for large devices (desktops), 'xl': '1200px' for extra large devices (large desktops). A breakpoint value of 'xs' (or '0') matches all viewport widths, unless other breakpoints are set.

var height

The height of the layout. Defaults to auto.

var max_height

The maximum height of the layout.

var max_width

The maximum width of the layout.

var min_height

The minimum height of the layout.

var min_width

The minimum width of the layout.

var name

An identifying name for this zone.

var width

The width of the layout. Defaults to 100%.

var zones

The zones in this layout. Each zones can in turn contain sub-zones.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

class Link(label: str | None = None, path: str | None = None, disabled: bool | None = None, download: bool | None = None, button: bool | None = None, width: str | None = None, visible: bool | None = None, target: str | None = None, tooltip: str | None = None, name: str | None = None)

Create a hyperlink.

Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Wave UI. All other kinds of paths are treated as external hyperlinks.

Static methods​

load​

def load(_Link__d: Dict) ‑> Link

Creates an instance of this class using the contents of a dict.

Instance variables​

var button

True if the link should be rendered as a button.

var disabled

True if the link should be disabled.

var download

True if the link should prompt the user to save the linked URL instead of navigating to it.

var label

The text to be displayed. If blank, the path is used as the label.

var name

An identifying name for this component.

var path

The path or URL to link to.

var target

Where to display the link. An empty string or '_blank' opens the link in a new tab. _self opens in the current tab.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the link, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

class Links(items: List[ForwardRef('Component')], label: str | None = None, inline: bool | None = None, width: str | None = None)

Create a collection of links.

Static methods​

load​

def load(_Links__d: Dict) ‑> Links

Creates an instance of this class using the contents of a dict.

Instance variables​

var inline

Render links horizontally. Defaults to False.

var items

The links contained in this group.

var label

The name of the link group.

var width

The width of the links, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ListCard​

class ListCard(box: str, title: str, item_view: str, item_props: dict | str | Data, data: Data | str, commands: List[Command] | None = None)

EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

Static methods​

load​

def load(_ListCard__d: Dict) ‑> ListCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var item_props

The child card properties.

var item_view

The child card type.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ListItem1Card​

class ListItem1Card(box: str, title: str, caption: str, value: str, aux_value: str, data: dict | str | Data, commands: List[Command] | None = None)

EXPERIMENTAL. DO NOT USE.

Static methods​

load​

def load(_ListItem1Card__d: Dict) ‑> ListItem1Card

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

EXPERIMENTAL. DO NOT USE.

var box

A string indicating how to place this component on the page.

var caption

EXPERIMENTAL. DO NOT USE.

var commands

Contextual menu commands for this component.

var data

EXPERIMENTAL. DO NOT USE.

var title

EXPERIMENTAL. DO NOT USE.

var value

EXPERIMENTAL. DO NOT USE.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Mark​

class Mark(coord: str | None = None, type: str | None = None, x: str | float | int | None = None, x0: str | float | int | None = None, x1: str | float | int | None = None, x2: str | float | int | None = None, x_q1: str | float | int | None = None, x_q2: str | float | int | None = None, x_q3: str | float | int | None = None, x_min: float | None = None, x_max: float | None = None, x_nice: bool | None = None, x_scale: str | None = None, x_title: str | None = None, y: str | float | int | None = None, y0: str | float | int | None = None, y1: str | float | int | None = None, y2: str | float | int | None = None, y_q1: str | float | int | None = None, y_q2: str | float | int | None = None, y_q3: str | float | int | None = None, y_min: float | None = None, y_max: float | None = None, y_nice: bool | None = None, y_scale: str | None = None, y_title: str | None = None, color: str | None = None, color_range: str | None = None, color_domain: List[str] | None = None, shape: str | None = None, shape_range: str | None = None, size: str | float | int | None = None, size_range: str | None = None, stack: str | None = None, dodge: str | None = None, curve: str | None = None, fill_color: str | None = None, fill_opacity: float | None = None, stroke_color: str | None = None, stroke_opacity: float | None = None, stroke_size: float | None = None, stroke_dash: str | None = None, label: str | None = None, label_offset: float | None = None, label_offset_x: float | None = None, label_offset_y: float | None = None, label_rotation: str | None = None, label_position: str | None = None, label_overlap: str | None = None, label_fill_color: str | None = None, label_fill_opacity: float | None = None, label_stroke_color: str | None = None, label_stroke_opacity: float | None = None, label_stroke_size: float | None = None, label_font_size: float | None = None, label_font_weight: str | None = None, label_line_height: float | None = None, label_align: str | None = None, ref_stroke_color: str | None = None, ref_stroke_opacity: float | None = None, ref_stroke_size: float | None = None, ref_stroke_dash: str | None = None, interactive: bool | None = None)

Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

Static methods​

load​

def load(_Mark__d: Dict) ‑> Mark

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

Mark color field or value.

var color_domain

The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.

var color_range

Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'

var coord

Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'. See enum h2o_wave.ui.MarkCoord.

var curve

Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'. See enum h2o_wave.ui.MarkCurve.

var dodge

Field to dodge marks by, or 'auto' to infer.

var fill_color

Mark fill color.

var fill_opacity

Mark fill opacity.

var interactive

Defines whether to raise events on interactions with the mark. Defaults to True.

var label

Label field or value.

var label_align

Label text alignment. One of 'left', 'right', 'center', 'start', 'end'. See enum h2o_wave.ui.MarkLabelAlign.

var label_fill_color

Label fill color.

var label_fill_opacity

Label fill opacity.

var label_font_size

Label font size.

var label_font_weight

Label font weight.

var label_line_height

Label line height.

var label_offset

Distance between label and mark.

var label_offset_x

Horizontal distance between label and mark.

var label_offset_y

Vertical distance between label and mark.

var label_overlap

Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'. See enum h2o_wave.ui.MarkLabelOverlap.

var label_position

Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'. See enum h2o_wave.ui.MarkLabelPosition.

var label_rotation

Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.

var label_stroke_color

Label stroke color.

var label_stroke_opacity

Label stroke opacity.

var label_stroke_size

Label stroke size (line width or pen thickness).

var ref_stroke_color

Reference line stroke color.

var ref_stroke_dash

Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

var ref_stroke_opacity

Reference line stroke opacity.

var ref_stroke_size

Reference line stroke size (line width or pen thickness).

var shape

Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.

var shape_range

Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'

var size

Mark size field or value.

var size_range

Mark size range. A string containing space-separated integers, e.g. '4 30'

var stack

Field to stack marks by, or 'auto' to infer.

var stroke_color

Mark stroke color.

var stroke_dash

Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

var stroke_opacity

Mark stroke opacity.

var stroke_size

Mark stroke size.

var type

Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'. See enum h2o_wave.ui.MarkType.

var x

X field or value.

var x0

X base field or value.

var x1

X bin lower bound field or value. For histograms and box plots.

var x2

X bin upper bound field or value. For histograms and box plots.

var x_max

X axis scale maximum.

var x_min

X axis scale minimum.

var x_nice

Whether to nice X axis scale ticks.

var x_q1

X lower quartile. For box plots.

var x_q2

X median. For box plots.

var x_q3

X upper quartile. For box plots.

var x_scale

X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'power', 'time', 'time-category', 'quantize', 'quantile'. See enum h2o_wave.ui.MarkXScale.

var x_title

X axis title.

var y

Y field or value.

var y0

Y base field or value.

var y1

Y bin lower bound field or value. For histograms and box plots.

var y2

Y bin upper bound field or value. For histograms and box plots.

var y_max

Y axis scale maximum.

var y_min

Y axis scale minimum.

var y_nice

Whether to nice Y axis scale ticks.

var y_q1

Y lower quartile. For box plots.

var y_q2

Y median. For box plots.

var y_q3

Y upper quartile. For box plots.

var y_scale

Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'power', 'time', 'time-category', 'quantize', 'quantile'. See enum h2o_wave.ui.MarkYScale.

var y_title

Y axis title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MarkCoord​

class MarkCoord

Class variables​

var CARTESIAN
var HELIX
var POLAR
var RECT
var THETA

MarkCurve​

class MarkCurve

Class variables​

var NONE
var SMOOTH
var STEP
var STEP_AFTER
var STEP_BEFORE

MarkLabelAlign​

class MarkLabelAlign

Class variables​

var CENTER
var END
var LEFT
var RIGHT
var START

MarkLabelOverlap​

class MarkLabelOverlap

Class variables​

var CONSTRAIN
var HIDE
var OVERLAP

MarkLabelPosition​

class MarkLabelPosition

Class variables​

var BOTTOM
var LEFT
var MIDDLE
var RIGHT
var TOP

MarkType​

class MarkType

Class variables​

var AREA
var EDGE
var HEATMAP
var INTERVAL
var LINE
var PATH
var POINT
var POLYGON
var SCHEMA

MarkXScale​

class MarkXScale

Class variables​

var CAT
var CATEGORY
var IDENTITY
var LINEAR
var LOG
var POW
var POWER
var QUANTILE
var QUANTIZE
var TIME
var TIME_CATEGORY

MarkYScale​

class MarkYScale

Class variables​

var CAT
var CATEGORY
var IDENTITY
var LINEAR
var LOG
var POW
var POWER
var QUANTILE
var QUANTIZE
var TIME
var TIME_CATEGORY

MarkdownCard​

class MarkdownCard(box: str, title: str, content: str, data: dict | str | Data | None = None, compact: bool | None = None, commands: List[Command] | None = None)

Create a card that renders Markdown content.

Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

Static methods​

load​

def load(_MarkdownCard__d: Dict) ‑> MarkdownCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var compact

Make spacing tighter. Defaults to True.

var content

The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/

var data

Additional data for the card.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MarkdownTableCellType​

class MarkdownTableCellType(name: str | None = None, target: str | None = None)

Create a cell type that renders Markdown content.

Static methods​

load​

def load(_MarkdownTableCellType__d: Dict) ‑> MarkdownTableCellType

Creates an instance of this class using the contents of a dict.

Instance variables​

var name

An identifying name for this component.

var target

Where to display the link. An empty string or '_blank' opens the link in a new tab. _self opens in the current tab.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Markup​

class Markup(content: str, name: str | None = None, width: str | None = None, visible: bool | None = None)

Render HTML content.

Static methods​

load​

def load(_Markup__d: Dict) ‑> Markup

Creates an instance of this class using the contents of a dict.

Instance variables​

var content

The HTML content.

var name

An identifying name for this component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the markup, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MarkupCard​

class MarkupCard(box: str, title: str, content: str, compact: bool | None = None, commands: List[Command] | None = None)

Render HTML content.

Static methods​

load​

def load(_MarkupCard__d: Dict) ‑> MarkupCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var compact

True if outer spacing should be removed. Defaults to False.

var content

The HTML content.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Menu​

class Menu(items: List[Command], icon: str | None = None, image: str | None = None, name: str | None = None, label: str | None = None)

Create a contextual menu component. Useful when you have a lot of links and want to conserve the space.

Static methods​

load​

def load(_Menu__d: Dict) ‑> Menu

Creates an instance of this class using the contents of a dict.

Instance variables​

var icon

The card's icon.

var image

The card’s image, preferably user avatar.

var items

Commands to render.

var label

The text displayed next to the chevron.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MenuTableCellType​

class MenuTableCellType(commands: List[Command], name: str | None = None)

Create a cell type that renders command menu.

Commands are typically displayed as context menu items. Useful when you need to provide multiple actions within a single row.

Static methods​

load​

def load(_MenuTableCellType__d: Dict) ‑> MenuTableCellType

Creates an instance of this class using the contents of a dict.

Instance variables​

var commands

Items to render.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MessageBar​

class MessageBar(type: str | None = None, text: str | None = None, name: str | None = None, width: str | None = None, visible: bool | None = None, buttons: List[ForwardRef('Component')] | None = None)

Create a message bar.

A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

Static methods​

load​

def load(_MessageBar__d: Dict) ‑> MessageBar

Creates an instance of this class using the contents of a dict.

Instance variables​

var buttons

Specify one or more action buttons.

var name

An identifying name for this component.

var text

The text displayed on the message bar.

var type

The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'. See enum h2o_wave.ui.MessageBarType.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the message bar, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MessageBarType​

class MessageBarType

Class variables​

var BLOCKED
var DANGER
var ERROR
var INFO
var SUCCESS
var WARNING

MetaCard​

class MetaCard(box: str, title: str | None = None, refresh: int | None = None, notification: str | None = None, notification_bar: NotificationBar | None = None, redirect: str | None = None, icon: str | None = None, layouts: List[Layout] | None = None, dialog: Dialog | None = None, side_panel: SidePanel | None = None, theme: str | None = None, themes: List[Theme] | None = None, tracker: Tracker | None = None, scripts: List[Script] | None = None, script: InlineScript | None = None, stylesheet: InlineStylesheet | None = None, stylesheets: List[Stylesheet] | None = None, animate: bool | None = None, commands: List[Command] | None = None)

Represents page-global state.

This card is invisible. It is used to control attributes of the active page.

Static methods​

load​

def load(_MetaCard__d: Dict) ‑> MetaCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var animate

EXPERIMENTAL: True to turn on the card animations. Defaults to False.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var dialog

Display a dialog on the page.

var icon

Shortcut icon path. Preferably a .png file (.ico files may not work in mobile browsers). Not supported in Safari.

var layouts

The layouts supported by this page.

var notification

Display a desktop notification.

var notification_bar

Display an in-app notification bar.

var redirect

Redirect the page to a new URL.

var refresh

Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).

var script

Javascript code to execute on this page.

var scripts

External Javascript files to load into the page.

var side_panel

Display a side panel on the page.

var stylesheet

CSS stylesheet to be applied to this page.

var stylesheets

External CSS files to load into the page.

var theme

Specify the name of the theme (color scheme) to use on this page. One of 'light', 'neon' or 'h2o-dark'.

var themes
  • Themes (color schemes) that define color used in the app.
var title

The title of the page.

var tracker

Configure a tracker for the page (for web analytics).

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MiniButton​

class MiniButton(name: str, label: str, icon: str | None = None)

Create a mini button - same as regular button, but smaller in size.

Static methods​

load​

def load(_MiniButton__d: Dict) ‑> MiniButton

Creates an instance of this class using the contents of a dict.

Instance variables​

var icon

An optional icon to display next to the button label.

var label

The text displayed on the button.

var name

An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

MiniButtons​

class MiniButtons(items: List[ForwardRef('Component')], visible: bool | None = None)

Create a set of mini buttons laid out horizontally.

Static methods​

load​

def load(_MiniButtons__d: Dict) ‑> MiniButtons

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

The buttons in this set.

var visible

True if the component should be visible. Defaults to True.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

NavCard​

class NavCard(box: str, items: List[NavGroup], value: str | None = None, title: str | None = None, subtitle: str | None = None, icon: str | None = None, icon_color: str | None = None, image: str | None = None, persona: Component | None = None, secondary_items: List[Component] | None = None, color: str | None = None, commands: List[Command] | None = None)

Create a card containing a navigation pane.

Static methods​

load​

def load(_NavCard__d: Dict) ‑> NavCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var color

Card background color. Defaults to 'card'. One of 'card', 'primary'. See enum h2o_wave.ui.NavCardColor.

var commands

Contextual menu commands for this component.

var icon

The icon, displayed to the left. *

var icon_color

The icon's color. *

var image

The URL of an image (usually logo) displayed at the top. *

var items

The navigation groups contained in this pane.

var persona

The user avatar displayed at the top. Mutually exclusive with image, title and subtitle. *

var secondary_items

Items that should be displayed at the bottom of the card if items are not empty, otherwise displayed under subtitle.

var subtitle

The card's subtitle.

var title

The card's title.

var value

The name of the active (highlighted) navigation item.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

NavCardColor​

class NavCardColor

Class variables​

var CARD
var PRIMARY

NavGroup​

class NavGroup(label: str, items: List[NavItem], collapsed: bool | None = None)

Create a group of navigation items.

Static methods​

load​

def load(_NavGroup__d: Dict) ‑> NavGroup

Creates an instance of this class using the contents of a dict.

Instance variables​

var collapsed

Indicates whether nav groups should be rendered as collapsed initially

var items

The navigation items contained in this group.

var label

The label to display for this group.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

NavItem​

class NavItem(name: str, label: str, icon: str | None = None, disabled: bool | None = None, tooltip: str | None = None, path: str | None = None)

Create a navigation item.

Static methods​

load​

def load(_NavItem__d: Dict) ‑> NavItem

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if this item should be disabled.

var icon

An optional icon to display next to the label.

var label

The label to display.

var name

The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

var path

The path or URL to link to. If specified, the name is ignored. The URL is opened in a new browser window or tab. E.g. /foo.html or http://example.com/foo.html

var tooltip

An optional tooltip message displayed when a user hovers over this item.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

NotificationBar​

class NotificationBar(text: str, type: str | None = None, timeout: int | None = None, buttons: List[Component] | None = None, position: str | None = None, events: List[str] | None = None, name: str | None = None)

Create a notification bar.

A notification bar is an area at the edge of a primary view that displays relevant status information. You can use a notification bar to tell the user about a result of an action, e.g. "Data has been successfully saved".

Static methods​

load​

def load(_NotificationBar__d: Dict) ‑> NotificationBar

Creates an instance of this class using the contents of a dict.

Instance variables​

var buttons

Specify one or more action buttons.

var events

The events to capture on this notification bar. One of 'dismissed'.

var name

An identifying name for this component.

var position

Specify the location of notification. Defaults to 'top-right'. One of 'top-right', 'bottom-right', 'bottom-center', 'bottom-left', 'top-left', 'top-center'. See enum h2o_wave.ui.NotificationBarPosition.

var text

The text displayed on the notification bar.

var timeout

How long the notification stays visible, in seconds. If set to -1, the notification has to be closed manually. Defaults to 5.

var type

The icon and color of the notification bar. Defaults to 'info'. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'. See enum h2o_wave.ui.NotificationBarType.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

NotificationBarPosition​

class NotificationBarPosition

Class variables​

var BOTTOM_CENTER
var BOTTOM_LEFT
var BOTTOM_RIGHT
var TOP_CENTER
var TOP_LEFT
var TOP_RIGHT

NotificationBarType​

class NotificationBarType

Class variables​

var BLOCKED
var DANGER
var ERROR
var INFO
var SUCCESS
var WARNING

Persona​

class Persona(title: str, subtitle: str | None = None, caption: str | None = None, size: str | None = None, image: str | None = None, initials: str | None = None, initials_color: str | None = None, name: str | None = None)

Create an individual's persona or avatar, a visual representation of a person across products. Can be used to display an individual's avatar (or a composition of the person’s initials on a background color), their name or identification, and online status.

Static methods​

load​

def load(_Persona__d: Dict) ‑> Persona

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

Tertiary text, displayed under the subtitle. Only visible for sizes >= 'm'.

var image

Image, URL or base64-encoded (data:image/png;base64,???).

var initials

Initials, if image is not specified.

var initials_color

Initials background color (CSS-compatible string).

var name

An identifying name for this component.

var size

The size of the persona coin. Defaults to 'm'. One of 'xl', 'l', 'm', 's', 'xs'. See enum h2o_wave.ui.PersonaSize.

var subtitle

Secondary text, displayed under the title.

var title

Primary text, displayed next to the persona coin.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

PersonaSize​

class PersonaSize

Class variables​

var L
var M
var S
var XL
var XS

Picker​

class Picker(name: str, choices: List[Choice], label: str | None = None, values: List[str] | None = None, max_choices: int | None = None, required: bool | None = None, disabled: bool | None = None, width: str | None = None, visible: bool | None = None, trigger: bool | None = None, tooltip: str | None = None)

Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

Static methods​

load​

def load(_Picker__d: Dict) ‑> Picker

Creates an instance of this class using the contents of a dict.

Instance variables​

var choices

The choices to be presented.

var disabled

Controls whether the picker should be disabled or not.

var label

Text to be displayed above the component.

var max_choices

Maximum number of selectable choices.

var name

An identifying name for this component.

var required

True if the picker is a required field.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the picker value changes.

var values

The names of the selected choices.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the picker, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Pie​

class Pie(label: str, value: str, fraction: float, color: str, aux_value: str | None = None)

Card's pie chart data to be displayed.

Static methods​

load​

def load(_Pie__d: Dict) ‑> Pie

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value, displayed below the label.

var color

The color of the pie.

var fraction

A value between 0 and 1 indicating the size of the pie.

var label

The description for the pie, displayed in the legend.

var value

The formatted value displayed on the pie.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

PixelArtCard​

class PixelArtCard(box: str, title: str, data: dict | str | Data, commands: List[Command] | None = None)

WARNING: Experimental and subject to change. Do not use in production sites!

Create a card displaying a collaborative Pixel art tool.

Static methods​

load​

def load(_PixelArtCard__d: Dict) ‑> PixelArtCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

The data for this card.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Plot​

class Plot(marks: List[Mark])

Create a plot. A plot is composed of one or more graphical mark layers.

Static methods​

load​

def load(_Plot__d: Dict) ‑> Plot

Creates an instance of this class using the contents of a dict.

Instance variables​

var marks

The graphical mark layers contained in this plot.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

PlotCard​

class PlotCard(box: str, title: str, data: dict | str | Data, plot: Plot, events: List[str] | None = None, interactions: List[str] | None = None, animate: bool | None = None, commands: List[Command] | None = None)

Create a card displaying a plot.

Static methods​

load​

def load(_PlotCard__d: Dict) ‑> PlotCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var animate

EXPERIMENTAL: True to turn on the chart animations. Defaults to False.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var events

The events to capture on this card. One of 'select_marks'.

var interactions

The interactions to be allowed for this card. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: brush does not raise select_marks event.

var plot

The plot to be displayed in this card.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

PostCard​

class PostCard(box: str, persona: Component, image: str, aux_value: str | None = None, caption: str | None = None, items: List[Component] | None = None, commands: List[Command] | None = None)

Create a postcard displaying a persona, image, caption and optional buttons.

Static methods​

load​

def load(_PostCard__d: Dict) ‑> PostCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The card's aux_value, displayed on the right hand side of the image.

var box

A string indicating how to place this component on the page.

var caption

The card's caption, displayed below the image.

var commands

Contextual menu commands for this component.

var image

The card’s image.

var items

The card's buttons, displayed at the bottom.

var persona

The card's user avatar, 'size' prop is restricted to 'xs'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

PreviewCard​

class PreviewCard(box: str, name: str, image: str, title: str | None = None, items: List[Component] | None = None, caption: str | None = None, label: str | None = None, commands: List[Command] | None = None)

Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button.

Static methods​

load​

def load(_PreviewCard__d: Dict) ‑> PreviewCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var caption

The card's caption, displayed below the title.

var commands

Contextual menu commands for this component.

var image

The card’s image.

var items

Mini buttons displayed at the top-right corner

var label

Label of a button rendered at the bottom of the card. If specified, the whole card is not clickable anymore.

var name

An identifying name for this card. Makes the card clickable if label is not provided, similar to a button.

var title

The card's title

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ProfileCard​

class ProfileCard(box: str, persona: Component, image: str, items: List[Component] | None = None, height: str | None = None, commands: List[Command] | None = None)

Create a profile card to display information about a user.

Static methods​

load​

def load(_ProfileCard__d: Dict) ‑> ProfileCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var height

The height of the bottom content (items), e.g. '400px'. Use sparingly, e.g. in grid views.

var image

The card’s image, either a base64-encoded image, a path to an image hosted externally (starting with https:// or http://) or a path to an image hosted on the Wave daemon (starting with /). .

var items

Components in this card displayed below the image.

var persona

The persona represented by this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Progress​

class Progress(label: str, caption: str | None = None, value: float | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, name: str | None = None, type: str | None = None)

Create a progress bar.

Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

Static methods​

load​

def load(_Progress__d: Dict) ‑> Progress

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

The text displayed below the bar or spinner.

var label

The text displayed above the bar or right to the spinner.

var name

An identifying name for this component.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var type

The type of progress bar to be displayed. One of 'bar', 'spinner'. Defaults to 'bar'. One of 'bar', 'spinner'. See enum h2o_wave.ui.ProgressType.

var value

The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the separator, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ProgressTableCellType​

class ProgressTableCellType(color: str | None = None, name: str | None = None)

Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

Static methods​

load​

def load(_ProgressTableCellType__d: Dict) ‑> ProgressTableCellType

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

Color of the progress arc.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ProgressType​

class ProgressType

Class variables​

var BAR
var SPINNER

RangeSlider​

class RangeSlider(name: str, label: str | None = None, min: float | None = None, max: float | None = None, step: float | None = None, min_value: float | None = None, max_value: float | None = None, disabled: bool | None = None, width: str | None = None, trigger: bool | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a range slider.

A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

Static methods​

load​

def load(_RangeSlider__d: Dict) ‑> RangeSlider

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if this field is disabled.

var label

Text to be displayed alongside the component.

var max

The maximum value of the slider. Defaults to 100.

var max_value

The upper bound of the selected range. Default value is max.

var min

The minimum value of the slider. Defaults to 0.

var min_value

The lower bound of the selected range.

var name

An identifying name for this component.

var step

The difference between two adjacent values of the slider.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the slider value changes.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the range slider, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

RepeatCard​

class RepeatCard(box: str, item_view: str, item_props: dict | str | Data, data: Data | str, commands: List[Command] | None = None)

EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

Static methods​

load​

def load(_RepeatCard__d: Dict) ‑> RepeatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var item_props

The child card properties.

var item_view

EXPERIMENTAL. DO NOT USE.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Script​

class Script(path: str, asynchronous: bool | None = None, cross_origin: str | None = None, referrer_policy: str | None = None, integrity: str | None = None, type: str | None = None)

Create a reference to an external Javascript file to be included on a page.

Static methods​

load​

def load(_Script__d: Dict) ‑> Script

Creates an instance of this class using the contents of a dict.

Instance variables​

var asynchronous

Whether to fetch and load this script in parallel to parsing and evaluated as soon as it is available.

var cross_origin
var integrity

The cryptographic hash to verify the script's integrity. See https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

var path

The URI of an external script.

var referrer_policy

Indicates which referrer to send when fetching the script. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

var type

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

SectionCard​

class SectionCard(box: str, title: str, subtitle: str, items: List[Component] | str | None = None, commands: List[Command] | None = None)

Render a card displaying a title, a subtitle, and optional components. Section cards are typically used to demarcate different sections on a page.

Static methods​

load​

def load(_SectionCard__d: Dict) ‑> SectionCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

The components to display in this card

var subtitle

The subtitle, displayed below the title. Supports Markdown.

var title

The title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Separator​

class Separator(label: str | None = None, name: str | None = None, width: str | None = None, visible: bool | None = None)

Create a separator.

A separator visually separates content into groups.

Static methods​

load​

def load(_Separator__d: Dict) ‑> Separator

Creates an instance of this class using the contents of a dict.

Instance variables​

var label

The text displayed on the separator.

var name

An identifying name for this component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the separator , e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

SidePanel​

class SidePanel(title: str, items: List[Component], width: str | None = None, name: str | None = None, events: List[str] | None = None, blocking: bool | None = None, closable: bool | None = None)

A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file, or asking people to make a choice.

Static methods​

load​

def load(_SidePanel__d: Dict) ‑> SidePanel

Creates an instance of this class using the contents of a dict.

Instance variables​

var blocking

True to prevent closing when clicking or tapping outside the side panel. Prevents interacting with the page behind the side panel. Defaults to False.

var closable

True if the side panel should have a closing 'X' button at the top right corner.

var events

The events to capture on this side panel. One of 'dismissed'.

var items

The components displayed in this side panel.

var name

An identifying name for this component.

var title

The side panel's title.

var width

The width of the dialog, e.g. '400px'. Defaults to '600px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Slider​

class Slider(name: str, label: str | None = None, min: float | None = None, max: float | None = None, step: float | None = None, value: float | None = None, disabled: bool | None = None, trigger: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a slider.

A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

Static methods​

load​

def load(_Slider__d: Dict) ‑> Slider

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if this field is disabled.

var label

Text to be displayed alongside the component.

var max

The maximum value of the slider.

var min

The minimum value of the slider.

var name

An identifying name for this component.

var step

The difference between two adjacent values of the slider.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the slider value changes.

var value

The current value of the slider.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the slider, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

SmallSeriesStatCard​

class SmallSeriesStatCard(box: str, title: str, value: str, plot_data: Data | str, plot_value: str, plot_zero_value: float | None = None, plot_category: str | None = None, plot_type: str | None = None, plot_curve: str | None = None, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a small stat card displaying a primary value and a series plot.

Static methods​

load​

def load(_SmallSeriesStatCard__d: Dict) ‑> SmallSeriesStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_category

The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

var plot_color

The plot's color.

var plot_curve

The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'. See enum h2o_wave.ui.SmallSeriesStatCardPlotCurve.

var plot_data

The plot's data.

var plot_type

The type of plot. Defaults to area. One of 'area', 'interval'. See enum h2o_wave.ui.SmallSeriesStatCardPlotType.

var plot_value

The data field to use for y-axis values.

var plot_zero_value

The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

SmallSeriesStatCardPlotCurve​

class SmallSeriesStatCardPlotCurve

Class variables​

var LINEAR
var SMOOTH
var STEP
var STEP_AFTER
var STEP_BEFORE

SmallSeriesStatCardPlotType​

class SmallSeriesStatCardPlotType

Class variables​

var AREA
var INTERVAL

SmallStatCard​

class SmallStatCard(box: str, title: str, value: str, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a stat card displaying a single value.

Static methods​

load​

def load(_SmallStatCard__d: Dict) ‑> SmallStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Spinbox​

class Spinbox(name: str, label: str | None = None, min: float | None = None, max: float | None = None, step: float | None = None, value: float | None = None, disabled: bool | None = None, width: str | None = None, visible: bool | None = None, trigger: bool | None = None, tooltip: str | None = None)

Create a spinbox.

A spinbox allows the user to incrementally adjust a value in small steps.

Static methods​

load​

def load(_Spinbox__d: Dict) ‑> Spinbox

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if this field is disabled.

var label

Text to be displayed alongside the component.

var max

The maximum value of the spinbox. Defaults to 100.

var min

The minimum value of the spinbox. Defaults to 0.

var name

An identifying name for this component.

var step

The difference between two adjacent values of the spinbox. Defaults to 1.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the spinbox value changes.

var value

The current value of the spinbox. Defaults to 0.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the spinbox, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Stat​

class Stat(label: str, value: str | None = None, caption: str | None = None, icon: str | None = None, icon_color: str | None = None, name: str | None = None)

Create a stat (a label-value pair) for displaying a metric.

Static methods​

load​

def load(_Stat__d: Dict) ‑> Stat

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

The caption displayed below the primary value.

var icon

An optional icon, displayed next to the label.

var icon_color

The color of the icon.

var label

The label for the metric.

var name

An identifying name for this item.

var value

The value of the metric.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

StatListCard​

class StatListCard(box: str, title: str, items: List[StatListItem], name: str | None = None, subtitle: str | None = None, commands: List[Command] | None = None)

Render a card displaying a list of stats.

Static methods​

load​

def load(_StatListCard__d: Dict) ‑> StatListCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

The individual stats to be displayed.

var name

An optional name for this item.

var subtitle

The subtitle, displayed below the title.

var title

The title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

StatListItem​

class StatListItem(label: str, name: str | None = None, caption: str | None = None, value: str | None = None, value_color: str | None = None, aux_value: str | None = None, icon: str | None = None, icon_color: str | None = None)

Create a stat item (a label-value pair) for stat_list_card.

Static methods​

load​

def load(_StatListItem__d: Dict) ‑> StatListItem

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value, displayed below the primary value.

var caption

The caption for the metric, displayed below the label.

var icon

An optional icon, displayed next to the label.

var icon_color

The color of the icon.

var label

The label for the metric.

var name

An optional name for this item (required only if this item is clickable).

var value

The primary value of the metric.

var value_color

The font color of the primary value.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

StatTableCard​

class StatTableCard(box: str, title: str, columns: List[str], items: List[StatTableItem], name: str | None = None, subtitle: str | None = None, commands: List[Command] | None = None)

Render a card displaying a table of stats.

Static methods​

load​

def load(_StatTableCard__d: Dict) ‑> StatTableCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var columns

The names of this table's columns.

var commands

Contextual menu commands for this component.

var items

The rows displayed in this table.

var name

An optional name for this item.

var subtitle

The subtitle, displayed below the title.

var title

The title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

StatTableItem​

class StatTableItem(label: str, values: List[str], name: str | None = None, caption: str | None = None, icon: str | None = None, icon_color: str | None = None, colors: List[str] | None = None)

Create a stat item (a label and a set of values) for stat_table_card.

Static methods​

load​

def load(_StatTableItem__d: Dict) ‑> StatTableItem

Creates an instance of this class using the contents of a dict.

Instance variables​

var caption

The caption for the metric, displayed below the label.

var colors

List of colors used for each value in values ordered respectively.

var icon

An optional icon, displayed next to the label.

var icon_color

The color of the icon.

var label

The label for the row.

var name

An optional name for this row (required only if this row is clickable).

var values

The values displayed in the row.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Stats​

class Stats(items: List[Stat], justify: str | None = None, inset: bool | None = None, width: str | None = None, visible: bool | None = None, name: str | None = None)

Create a set of stats laid out horizontally.

Static methods​

load​

def load(_Stats__d: Dict) ‑> Stats

Creates an instance of this class using the contents of a dict.

Instance variables​

var inset

Whether to display the stats with a contrasting background.

var items

The individual stats to be displayed.

var justify

Specifies how to lay out the individual stats. Defaults to 'start'. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.StatsJustify.

var name

An identifying name for this component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the stats, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

StatsJustify​

class StatsJustify

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START

Step​

class Step(label: str, icon: str | None = None, done: bool | None = None)

Create a step for a stepper.

Static methods​

load​

def load(_Step__d: Dict) ‑> Step

Creates an instance of this class using the contents of a dict.

Instance variables​

var done

Indicates whether this step has already been completed.

var icon

Icon to be displayed.

var label

Text displayed below icon.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Stepper​

class Stepper(name: str, items: List[Step], width: str | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

Static methods​

load​

def load(_Stepper__d: Dict) ‑> Stepper

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

The sequence of steps to be displayed.

var name

An identifying name for this component.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the stepper, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Stylesheet​

class Stylesheet(path: str, media: str | None = None, cross_origin: str | None = None)

Create a reference to an external CSS file to be included on a page.

Static methods​

load​

def load(_Stylesheet__d: Dict) ‑> Stylesheet

Creates an instance of this class using the contents of a dict.

Instance variables​

var cross_origin
var media

A valid media query to set conditions for when the stylesheet should be loaded. More info at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media.

var path

The URI of an external stylesheet.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Tab​

class Tab(name: str, label: str | None = None, icon: str | None = None, path: str | None = None)

Create a tab.

Static methods​

load​

def load(_Tab__d: Dict) ‑> Tab

Creates an instance of this class using the contents of a dict.

Instance variables​

var icon

The icon displayed on the tab.

var label

The text displayed on the tab.

var name

An identifying name for this component.

var path

The path or URL to open in a new browser tab.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TabCard​

class TabCard(box: str, items: List[Tab], value: str | None = None, link: bool | None = None, name: str | None = None, commands: List[Command] | None = None)

Create a card containing tabs for navigation.

Static methods​

load​

def load(_TabCard__d: Dict) ‑> TabCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

The tabs to display in this card

True if tabs should be rendered as links instead of buttons.

var name

An optional name for the card. If provided, the selected tab can be accessed using the name of the card.

var value

The name of the tab to select.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Table​

class Table(name: str, columns: List[TableColumn], rows: List[TableRow] | None = None, multiple: bool | None = None, groupable: bool | None = None, downloadable: bool | None = None, resettable: bool | None = None, height: str | None = None, width: str | None = None, values: List[str] | None = None, checkbox_visibility: str | None = None, visible: bool | None = None, tooltip: str | None = None, groups: List[TableGroup] | None = None, pagination: TablePagination | None = None, events: List[str] | None = None, single: bool | None = None, value: str | None = None)

Create an interactive table.

This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

If multiple is set to False (default), each row in the table is clickable. When a cell in the column with link=True(defaults to first column) is clicked or the row is doubleclicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

If pagination is set, you have to handle search/filter/sort/download/page_change/reset events yourself since none of these features will work automatically like in non-paginated table.

Static methods​

load​

def load(_Table__d: Dict) ‑> Table

Creates an instance of this class using the contents of a dict.

Instance variables​

var checkbox_visibility

Controls visibility of table rows when multiple is set to True. Defaults to 'on-hover'. One of 'always', 'on-hover', 'hidden'. See enum h2o_wave.ui.TableCheckboxVisibility.

var columns

The columns in this table.

var downloadable

Indicates whether the table rows can be downloaded as a CSV file. Defaults to False.

var events

The events to capture on this table. When pagination is set, one of 'search' | 'sort' | 'filter' | 'download' | 'page_change' | 'reset'. These events are available regardless of pagination: 'select' | 'group_change'.

var groupable

True to allow group by feature.

var groups

Creates collapsible / expandable groups of data rows. Mutually exclusive with rows attr.

var height

The height of the table in px (e.g. '200px') or '1' to fill the remaining card space.

var multiple

True to allow multiple rows to be selected. Mutually exclusive with single attr.

var name

An identifying name for this component.

var pagination

Display a pagination control at the bottom of the table. Set this value using ui.table_pagination().

var resettable

Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.

var rows

The rows in this table. Mutually exclusive with groups attr.

var single

True to allow only one row to be selected at time. Mutually exclusive with multiple attr.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var value

The name of the selected row. If this parameter is set, single selection will be allowed (single is assumed to be True).

var values

The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).

var visible

True if the component should be visible. Defaults to True.

var width

The width of the table, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TableCellType​

class TableCellType(progress: ProgressTableCellType | None = None, icon: IconTableCellType | None = None, tag: TagTableCellType | None = None, menu: MenuTableCellType | None = None, markdown: MarkdownTableCellType | None = None)

Defines cell content to be rendered instead of a simple text.

Static methods​

load​

def load(_TableCellType__d: Dict) ‑> TableCellType

Creates an instance of this class using the contents of a dict.

Instance variables​

var icon

Renders an icon.

var markdown

Renders text using markdown.

var menu

Renders a command menu.

var progress

Renders a progress arc with a percentage value in the middle.

var tag

Renders one or more tags.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TableCheckboxVisibility​

class TableCheckboxVisibility

Class variables​

var ALWAYS
var HIDDEN
var ON_HOVER

TableColumn​

class TableColumn(name: str, label: str, min_width: str | None = None, max_width: str | None = None, sortable: bool | None = None, searchable: bool | None = None, filterable: bool | None = None, link: bool | None = None, data_type: str | None = None, cell_type: TableCellType | None = None, cell_overflow: str | None = None, filters: List[str] | None = None, align: str | None = None)

Create a table column.

Static methods​

load​

def load(_TableColumn__d: Dict) ‑> TableColumn

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

Defines how to align values in a column. One of 'left', 'center', 'right'. See enum h2o_wave.ui.TableColumnAlign.

var cell_overflow

Defines what to do with a cell's contents in case it does not fit inside the cell. One of 'tooltip', 'wrap'. See enum h2o_wave.ui.TableColumnCellOverflow.

var cell_type

Defines how to render each cell in this column. Renders as plain text by default.

var data_type

Defines the data type of this column. Time column takes either ISO 8601 date string or unix epoch miliseconds. Defaults to string. One of 'string', 'number', 'time'. See enum h2o_wave.ui.TableColumnDataType.

var filterable

Indicates whether the contents of this column are displayed as filters in a dropdown.

var filters

Explicit list of values to allow filtering by, needed when pagination is set or custom order is needed. Only applicable to filterable columns.

var label

The text displayed on the column header.

Indicates whether each cell in this column should be displayed as a clickable link. Applies to exactly one text column in the table.

var max_width

The maximum width of this column, e.g. '100px'. Only px units are supported at this time.

var min_width

The minimum width of this column, e.g. '50px'. Only px units are supported at this time.

var name

An identifying name for this column.

var searchable

Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.

var sortable

Indicates whether the column is sortable.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TableColumnAlign​

class TableColumnAlign

Class variables​

var CENTER
var LEFT
var RIGHT

TableColumnCellOverflow​

class TableColumnCellOverflow

Class variables​

var TOOLTIP
var WRAP

TableColumnDataType​

class TableColumnDataType

Class variables​

var NUMBER
var STRING
var TIME

TableGroup​

class TableGroup(label: str, rows: List[TableRow], collapsed: bool | None = None)

Make rows within the table collapsible/expandable.

This type of table is best used for cases when your data makes sense to be presented in chunks rather than a single flat list.

Static methods​

load​

def load(_TableGroup__d: Dict) ‑> TableGroup

Creates an instance of this class using the contents of a dict.

Instance variables​

var collapsed

Indicates whether the table group should be collapsed by default. Defaults to True.

var label

The title of the group.

var rows

The rows in this group.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TablePagination​

class TablePagination(total_rows: int, rows_per_page: int)

Configure table pagination. Use as pagination parameter to ui.table()

Static methods​

load​

def load(_TablePagination__d: Dict) ‑> TablePagination

Creates an instance of this class using the contents of a dict.

Instance variables​

var rows_per_page

The maximum amount of rows to be displayed in a single page.

var total_rows

Total count of all the rows in your dataset.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TableRow​

class TableRow(name: str, cells: List[str])

Create a table row.

Static methods​

load​

def load(_TableRow__d: Dict) ‑> TableRow

Creates an instance of this class using the contents of a dict.

Instance variables​

var cells

The cells in this row (displayed left to right).

var name

An identifying name for this row.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Tabs​

class Tabs(name: str, value: str | None = None, items: List[Tab] | None = None, width: str | None = None, visible: bool | None = None, link: bool | None = None)

Create a tab bar.

Static methods​

load​

def load(_Tabs__d: Dict) ‑> Tabs

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

The tabs in this tab bar.

True if tabs should be rendered as links instead of buttons.

var name

An identifying name for this component.

var value

The name of the tab to select initially.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the tabs, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Tag​

class Tag(label: str, color: str, label_color: str | None = None)

Create a tag.

Static methods​

load​

def load(_Tag__d: Dict) ‑> Tag

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

Tag's background color.

var label

The text displayed within the tag.

var label_color

Tag's label color. If not specified, black or white will be picked based on correct contrast with background.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TagTableCellType​

class TagTableCellType(name: str, tags: List[Tag] | None = None)

Creates a collection of tags, usually used for rendering state values. In case of multiple tags per row, make sure the row values are separated by "," within a single cell string. E.g. ui.table_row(name="…", cells=["cell1", "TAG1,TAG2"]). Each value should correspond to a ui.tag.label attr. For the example above: [ ui.tag(label="TAG1", color="red"), ui.tag(label="TAG2", color="green"), ]

Static methods​

load​

def load(_TagTableCellType__d: Dict) ‑> TagTableCellType

Creates an instance of this class using the contents of a dict.

Instance variables​

var name

An identifying name for this component.

var tags

Tags to be rendered.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Tags​

class Tags(items: List[Tag])

Create a set of tags laid out horizontally.

Static methods​

load​

def load(_Tags__d: Dict) ‑> Tags

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

Tags in this set.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TallArticlePreviewCard​

class TallArticlePreviewCard(box: str, title: str, image: str, subtitle: str | None = None, value: str | None = None, content: str | None = None, name: str | None = None, items: List[Component] | None = None, commands: List[Command] | None = None)

Create a tall article preview card.

Static methods​

load​

def load(_TallArticlePreviewCard__d: Dict) ‑> TallArticlePreviewCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var content

Markdown text.

var image

The card’s background image URL, either a base64-encoded image, a path to an image hosted externally (starting with https:// or http://) or a path to an image hosted on the Wave daemon (starting with /)

var items

Components displayed in the body of the card.

var name

An identifying name for this card. Makes the card clickable, similar to a button.

var subtitle

The card's subtitle, displayed below the title.

var title

The card's title.

var value

The value displayed to the right of the title/subtitle.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TallGaugeStatCard​

class TallGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

Static methods​

load​

def load(_TallGaugeStatCard__d: Dict) ‑> TallGaugeStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value displayed next to the primary value.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_color

The color of the progress gauge.

var progress

The value of the progress gauge, between 0 and 1.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TallInfoCard​

class TallInfoCard(box: str, name: str, title: str, caption: str, label: str | None = None, icon: str | None = None, image: str | None = None, image_height: str | None = None, category: str | None = None, commands: List[Command] | None = None)

Create a tall information card displaying a title, caption and either an icon or image.

Static methods​

load​

def load(_TallInfoCard__d: Dict) ‑> TallInfoCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var caption

The card's caption, displayed below the title. Supports markdown.

var category

The card's category, displayed below the title.

var commands

Contextual menu commands for this component.

var icon

The card's icon.

var image

The card’s image.

var image_height

The card’s image height in px. Defaults to '150px'.

var label

Label of a button rendered at the bottom of the card. If specified, whole card is not clickable anymore.

var name

An identifying name for this card. Makes the card clickable only if name is not empty and label is empty

var title

The card's title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TallSeriesStatCard​

class TallSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Data | str, plot_value: str, plot_zero_value: float | None = None, plot_category: str | None = None, plot_type: str | None = None, plot_curve: str | None = None, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

Static methods​

load​

def load(_TallSeriesStatCard__d: Dict) ‑> TallSeriesStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value displayed below the primary value.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_category

The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

var plot_color

The plot's color.

var plot_curve

The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'. See enum h2o_wave.ui.TallSeriesStatCardPlotCurve.

var plot_data

The plot's data.

var plot_type

The type of plot. Defaults to area. One of 'area', 'interval'. See enum h2o_wave.ui.TallSeriesStatCardPlotType.

var plot_value

The data field to use for y-axis values.

var plot_zero_value

The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TallSeriesStatCardPlotCurve​

class TallSeriesStatCardPlotCurve

Class variables​

var LINEAR
var SMOOTH
var STEP
var STEP_AFTER
var STEP_BEFORE

TallSeriesStatCardPlotType​

class TallSeriesStatCardPlotType

Class variables​

var AREA
var INTERVAL

TallStatsCard​

class TallStatsCard(box: str, items: List[Stat], name: str | None = None, commands: List[Command] | None = None)

Create a vertical label-value pairs collection. Icon in ui.stat is not yet supported in this card.

Static methods​

load​

def load(_TallStatsCard__d: Dict) ‑> TallStatsCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

The individual stats to be displayed.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Template​

class Template(content: str, data: dict | str | Data | None = None, name: str | None = None, width: str | None = None, visible: bool | None = None)

Render dynamic content using an HTML template.

Static methods​

load​

def load(_Template__d: Dict) ‑> Template

Creates an instance of this class using the contents of a dict.

Instance variables​

var content

The Handlebars template. https://handlebarsjs.com/guide/

var data

Data for the Handlebars template

var name

An identifying name for this component.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the template, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TemplateCard​

class TemplateCard(box: str, title: str, content: str, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Render dynamic content using an HTML template.

Static methods​

load​

def load(_TemplateCard__d: Dict) ‑> TemplateCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var content

The Handlebars template. https://handlebarsjs.com/guide/

var data

Data for the Handlebars template.

var title

The title for this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Text​

class Text(content: str, size: str | None = None, width: str | None = None, visible: bool | None = None, align: str | None = None, tooltip: str | None = None, name: str | None = None)

Create text content.

Static methods​

load​

def load(_Text__d: Dict) ‑> Text

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextAlign.

var content

The text content.

var name

An identifying name for this component.

var size

The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'. See enum h2o_wave.ui.TextSize.

var tooltip

Tooltip message.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextAlign​

class TextAlign

Class variables​

var CENTER
var END
var JUSTIFY
var START

TextAnnotator​

class TextAnnotator(name: str, title: str, tags: List[TextAnnotatorTag], items: List[TextAnnotatorItem], trigger: bool | None = None, readonly: bool | None = None)

Create a text annotator component.

The text annotator component enables user to manually annotate parts of text. Useful for NLP data prep.

Static methods​

load​

def load(_TextAnnotator__d: Dict) ‑> TextAnnotator

Creates an instance of this class using the contents of a dict.

Instance variables​

var items

Pretagged parts of text content.

var name

An identifying name for this component.

var readonly

True to prevent user interaction with the annotator component. Defaults to False.

var tags

List of tags the user can annotate with.

var title

The text annotator's title.

var trigger

True if the form should be submitted when the annotator value changes.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextAnnotatorItem​

class TextAnnotatorItem(text: str, tag: str | None = None)

Create an annotator item with initial selected tags or no tag for plaintext.

Static methods​

load​

def load(_TextAnnotatorItem__d: Dict) ‑> TextAnnotatorItem

Creates an instance of this class using the contents of a dict.

Instance variables​

var tag

The name of the text annotator tag to refer to for the label and color of this item.

var text

Text to be highlighted.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextAnnotatorTag​

class TextAnnotatorTag(name: str, label: str, color: str)

Create a tag.

Static methods​

load​

def load(_TextAnnotatorTag__d: Dict) ‑> TextAnnotatorTag

Creates an instance of this class using the contents of a dict.

Instance variables​

var color

HEX or RGB color string used as background for highlighted phrases.

var label

Text to be displayed for this tag.

var name

An identifying name for this component.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextL​

class TextL(content: str, width: str | None = None, visible: bool | None = None, align: str | None = None, tooltip: str | None = None, commands: List[Command] | None = None, name: str | None = None)

Create large sized text content.

Static methods​

load​

def load(_TextL__d: Dict) ‑> TextL

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextLAlign.

var commands

Contextual menu commands for this component.

var content

The text content.

var name

An identifying name for this component.

var tooltip

Tooltip message.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextLAlign​

class TextLAlign

Class variables​

var CENTER
var END
var JUSTIFY
var START

TextM​

class TextM(content: str, width: str | None = None, visible: bool | None = None, align: str | None = None, tooltip: str | None = None, name: str | None = None)

Create medium sized text content.

Static methods​

load​

def load(_TextM__d: Dict) ‑> TextM

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextMAlign.

var content

The text content.

var name

An identifying name for this component.

var tooltip

Tooltip message.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextMAlign​

class TextMAlign

Class variables​

var CENTER
var END
var JUSTIFY
var START

TextS​

class TextS(content: str, width: str | None = None, visible: bool | None = None, align: str | None = None, tooltip: str | None = None, name: str | None = None)

Create small sized text content.

Static methods​

load​

def load(_TextS__d: Dict) ‑> TextS

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextSAlign.

var content

The text content.

var name

An identifying name for this component.

var tooltip

Tooltip message.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextSAlign​

class TextSAlign

Class variables​

var CENTER
var END
var JUSTIFY
var START

TextSize​

class TextSize

Class variables​

var L
var M
var S
var XL
var XS

TextXl​

class TextXl(content: str, width: str | None = None, visible: bool | None = None, align: str | None = None, tooltip: str | None = None, commands: List[Command] | None = None, name: str | None = None)

Create extra-large sized text content.

Static methods​

load​

def load(_TextXl__d: Dict) ‑> TextXl

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextXlAlign.

var commands

Contextual menu commands for this component.

var content

The text content.

var name

An identifying name for this component.

var tooltip

Tooltip message.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextXlAlign​

class TextXlAlign

Class variables​

var CENTER
var END
var JUSTIFY
var START

TextXs​

class TextXs(content: str, width: str | None = None, visible: bool | None = None, align: str | None = None, tooltip: str | None = None, name: str | None = None)

Create extra-small sized text content.

Static methods​

load​

def load(_TextXs__d: Dict) ‑> TextXs

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextXsAlign.

var content

The text content.

var name

An identifying name for this component.

var tooltip

Tooltip message.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text , e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextXsAlign​

class TextXsAlign

Class variables​

var CENTER
var END
var JUSTIFY
var START

Textbox​

class Textbox(name: str, label: str | None = None, placeholder: str | None = None, value: str | None = None, mask: str | None = None, icon: str | None = None, prefix: str | None = None, suffix: str | None = None, error: str | None = None, required: bool | None = None, disabled: bool | None = None, readonly: bool | None = None, multiline: bool | None = None, password: bool | None = None, trigger: bool | None = None, height: str | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None, spellcheck: bool | None = None, type: str | None = None)

Create a text box.

The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

Static methods​

load​

def load(_Textbox__d: Dict) ‑> Textbox

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if the text box is disabled.

var error

Text to be displayed as an error below the text box.

var height

The height of the text box, e.g. '100px'. Percentage values not supported. Applicable only if multiline is true.

var icon

Icon displayed in the far right end of the text field.

var label

The text displayed above the field.

var mask

The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].

var multiline

True if the text box should allow multi-line text entry.

var name

An identifying name for this component.

var password

True if the text box should hide text content.

var placeholder

A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.

var prefix

Text to be displayed before the text box contents.

var readonly

True if the text box is a read-only field.

var required

True if the text box is a required field.

var spellcheck

True if the text may be checked for spelling errors. Defaults to True.

var suffix

Text to be displayed after the text box contents.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the text value changes.

var type

Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.

var value

Text to be displayed inside the text box.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the text box, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TextboxType​

class TextboxType

Class variables​

var NUMBER
var TEL
var TEXT

Theme​

class Theme(name: str, text: str, card: str, page: str, primary: str)

Theme (color scheme) to apply colors to the app.

Static methods​

load​

def load(_Theme__d: Dict) ‑> Theme

Creates an instance of this class using the contents of a dict.

Instance variables​

var card

Card background color.

var name

An identifying name for this theme.

var page

Page background color.

var primary

Primary color used to accent components.

var text

Base color of the textual components.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TimePicker​

class TimePicker(name: str, label: str | None = None, placeholder: str | None = None, value: str | None = None, disabled: bool | None = None, width: str | None = None, visible: bool | None = None, trigger: bool | None = None, required: bool | None = None, hour_format: str | None = None, min: str | None = None, max: str | None = None, minutes_step: int | None = None)

Create a time picker.

A time picker allows a user to pick a time value.

Static methods​

load​

def load(_TimePicker__d: Dict) ‑> TimePicker

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if this field is disabled.

var hour_format

Specifies 12-hour or 24-hour time format. One of 12 or 24. Defaults to 12.

var label

Text to be displayed alongside the component.

var max

The maximum allowed time value in hh:mm format. E.g.: '15:30', '00:00'

var min

The minimum allowed time value in hh:mm format. E.g.: '08:00', '13:30'

var minutes_step

Limits the available minutes to select from. One of 1, 5, 10, 15, 20, 30 or 60. Defaults to 1.

var name

An identifying name for this component.

var placeholder

A string that provides a brief hint to the user as to what kind of information is expected in the field.

var required

True if this is a required field. Defaults to False.

var trigger

True if the form should be submitted when the time is selected.

var value

The time value in hh:mm format. E.g. '10:30', '14:25', '23:59', '00:00'

var visible

True if the component should be visible. Defaults to True.

var width

The width of the time picker, e.g. '100px'. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Toggle​

class Toggle(name: str, label: str | None = None, value: bool | None = None, disabled: bool | None = None, trigger: bool | None = None, width: str | None = None, visible: bool | None = None, tooltip: str | None = None)

Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

Static methods​

load​

def load(_Toggle__d: Dict) ‑> Toggle

Creates an instance of this class using the contents of a dict.

Instance variables​

var disabled

True if the checkbox is disabled.

var label

Text to be displayed alongside the component.

var name

An identifying name for this component.

var tooltip

An optional tooltip message displayed when a user clicks the help icon to the right of the component.

var trigger

True if the form should be submitted when the toggle value changes.

var value

True if selected, False if unselected.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the toggle, e.g. '100px'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ToolbarCard​

class ToolbarCard(box: str, items: List[Command], secondary_items: List[Command] | None = None, overflow_items: List[Command] | None = None, commands: List[Command] | None = None)

Create a card containing a toolbar.

Static methods​

load​

def load(_ToolbarCard__d: Dict) ‑> ToolbarCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var items

Items to render.

var overflow_items

Items to render in an overflow menu.

var secondary_items

Items to render on the right side (or left, in RTL).

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

Tracker​

class Tracker(type: str, id: str)

Configure user interaction tracking (analytics) for a page.

Static methods​

load​

def load(_Tracker__d: Dict) ‑> Tracker

Creates an instance of this class using the contents of a dict.

Instance variables​

var id

The tracking ID or measurement ID.

var type

The tracking provider. Supported providers are ga (Google Analytics) and gtag (Google Global Site Tags or gtag.js) One of 'ga', 'gtag'. See enum h2o_wave.ui.TrackerType.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

TrackerType​

class TrackerType

Class variables​

var GA
var GTAG

VegaCard​

class VegaCard(box: str, title: str, specification: str, data: dict | str | Data | None = None, grammar: str | None = None, commands: List[Command] | None = None)

Create a card containing a Vega-lite plot.

Static methods​

load​

def load(_VegaCard__d: Dict) ‑> VegaCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for the plot, if any.

var grammar

Vega grammar to use. Defaults to 'vega-lite'. One of 'vega-lite', 'vega'. See enum h2o_wave.ui.VegaCardGrammar.

var specification

The Vega-lite specification.

var title

The title of this card.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

VegaCardGrammar​

class VegaCardGrammar

Class variables​

var VEGA
var VEGA_LITE

VegaVisualization​

class VegaVisualization(specification: str, data: dict | str | Data | None = None, width: str | None = None, height: str | None = None, name: str | None = None, visible: bool | None = None, grammar: str | None = None)

Create a Vega-lite plot for display inside a form.

Static methods​

load​

def load(_VegaVisualization__d: Dict) ‑> VegaVisualization

Creates an instance of this class using the contents of a dict.

Instance variables​

var data

Data for the plot, if any.

var grammar

Vega grammar to use. Defaults to 'vega-lite'. One of 'vega-lite', 'vega'. See enum h2o_wave.ui.VegaVisualizationGrammar.

var height

The height of the visualization. Defaults to '300px'.

var name

An identifying name for this component.

var specification

The Vega-lite specification.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the visualization. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

VegaVisualizationGrammar​

class VegaVisualizationGrammar

Class variables​

var VEGA
var VEGA_LITE

Visualization​

class Visualization(plot: Plot, data: dict | str | Data, width: str | None = None, height: str | None = None, name: str | None = None, visible: bool | None = None, events: List[str] | None = None, interactions: List[str] | None = None, animate: bool | None = None)

Create a visualization for display inside a form.

Static methods​

load​

def load(_Visualization__d: Dict) ‑> Visualization

Creates an instance of this class using the contents of a dict.

Instance variables​

var animate

EXPERIMENTAL: True to turn on the chart animations. Defaults to False.

var data

Data for this visualization.

var events

The events to capture on this visualization. One of 'select_marks'.

var height

The hight of the visualization. Defaults to '300px'.

var interactions

The interactions to be allowed for this plot. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: brush does not raise select_marks event.

var name

An identifying name for this component.

var plot

The plot to be rendered in this visualization.

var visible

True if the component should be visible. Defaults to True.

var width

The width of the visualization. Defaults to '100%'.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideArticlePreviewCard​

class WideArticlePreviewCard(box: str, persona: Component, image: str, title: str, name: str | None = None, aux_value: str | None = None, items: List[Component] | None = None, content: str | None = None, commands: List[Command] | None = None)

Create a wide article preview card displaying a persona, image, title, caption, and optional buttons.

Static methods​

load​

def load(_WideArticlePreviewCard__d: Dict) ‑> WideArticlePreviewCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The card's auxiliary text, displayed on the right-hand side of the header.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var content

The card's markdown content, displayed below the title on the right-hand side.

var image

The card’s image displayed on the left-hand side.

var items

The card's buttons, displayed under the caption.

var name

An identifying name for this card. Makes the card clickable, similar to a button.

var persona

The card's user avatar, 'size' prop is restricted to 'xs'.

var title

The card's title on the right-hand side

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideBarStatCard​

class WideBarStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

Static methods​

load​

def load(_WideBarStatCard__d: Dict) ‑> WideBarStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value displayed next to the primary value.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_color

The color of the progress bar.

var progress

The value of the progress bar, between 0 and 1.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideGaugeStatCard​

class WideGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

Static methods​

load​

def load(_WideGaugeStatCard__d: Dict) ‑> WideGaugeStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value displayed next to the primary value.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_color

The color of the progress gauge.

var progress

The value of the progress gauge, between 0 and 1.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideInfoCard​

class WideInfoCard(box: str, name: str, title: str, caption: str, label: str | None = None, subtitle: str | None = None, align: str | None = None, icon: str | None = None, image: str | None = None, category: str | None = None, commands: List[Command] | None = None)

Create a wide information card displaying a title, caption, and either an icon or image.

Static methods​

load​

def load(_WideInfoCard__d: Dict) ‑> WideInfoCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

The card's alignment, determines the position of an image / icon. Defaults to 'left'. One of 'left', 'right'. See enum h2o_wave.ui.WideInfoCardAlign.

var box

A string indicating how to place this component on the page.

var caption

The card's caption, displayed below the subtitle. Supports markdown.

var category

The card's category, displayed above the title.

var commands

Contextual menu commands for this component.

var icon

The card's icon.

var image

The card’s image.

var label

Label of a button rendered at the bottom of the card. If specified, whole card is not clickable anymore..

var name

An identifying name for this card. Makes the card clickable, similar to a button.

var subtitle

The card's subtitle, displayed below the title.

var title

The card's title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideInfoCardAlign​

class WideInfoCardAlign

Class variables​

var LEFT
var RIGHT

WidePieStatCard​

class WidePieStatCard(box: str, title: str, pies: List[Pie], commands: List[Command] | None = None)

Create a wide pie stat card displaying a title and pie chart with legend.

Static methods​

load​

def load(_WidePieStatCard__d: Dict) ‑> WidePieStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var pies

The pies to be included in the pie chart.

var title

The card's title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WidePlotCard​

class WidePlotCard(box: str, title: str, caption: str, plot: Plot, data: dict | str | Data, commands: List[Command] | None = None)

Create a wide plot card displaying a title, caption and a plot.

Static methods​

load​

def load(_WidePlotCard__d: Dict) ‑> WidePlotCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var box

A string indicating how to place this component on the page.

var caption

The card's caption, displayed below the title.

var commands

Contextual menu commands for this component.

var data

The card's plot data.

var plot

The card's plot.

var title

The card's title.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideSeriesStatCard​

class WideSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Data | str, plot_value: str, plot_zero_value: float | None = None, plot_category: str | None = None, plot_type: str | None = None, plot_curve: str | None = None, plot_color: str | None = None, data: dict | str | Data | None = None, commands: List[Command] | None = None)

Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

Static methods​

load​

def load(_WideSeriesStatCard__d: Dict) ‑> WideSeriesStatCard

Creates an instance of this class using the contents of a dict.

Instance variables​

var aux_value

The auxiliary value displayed below the primary value.

var box

A string indicating how to place this component on the page.

var commands

Contextual menu commands for this component.

var data

Data for this card.

var plot_category

The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

var plot_color

The plot's color.

var plot_curve

The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'. See enum h2o_wave.ui.WideSeriesStatCardPlotCurve.

var plot_data

The plot's data.

var plot_type

The type of plot. Defaults to area. One of 'area', 'interval'. See enum h2o_wave.ui.WideSeriesStatCardPlotType.

var plot_value

The data field to use for y-axis values.

var plot_zero_value

The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

var title

The card's title.

var value

The primary value displayed.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

WideSeriesStatCardPlotCurve​

class WideSeriesStatCardPlotCurve

Class variables​

var LINEAR
var SMOOTH
var STEP
var STEP_AFTER
var STEP_BEFORE

WideSeriesStatCardPlotType​

class WideSeriesStatCardPlotType

Class variables​

var AREA
var INTERVAL

Zone​

class Zone(name: str, size: str | None = None, direction: str | None = None, justify: str | None = None, align: str | None = None, wrap: str | None = None, zones: List[ForwardRef('Zone')] | None = None)

Represents an zone within a page layout.

Static methods​

load​

def load(_Zone__d: Dict) ‑> Zone

Creates an instance of this class using the contents of a dict.

Instance variables​

var align

Layout strategy for cross axis. One of 'start', 'end', 'center', 'stretch'. See enum h2o_wave.ui.ZoneAlign.

var direction

Layout direction. One of 'row', 'column'. See enum h2o_wave.ui.ZoneDirection.

var justify

Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.ZoneJustify.

var name

An identifying name for this zone.

var size

The size of this zone.

var wrap

Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'. See enum h2o_wave.ui.ZoneWrap.

var zones

The sub-zones contained inside this zone.

Methods​

dump​

def dump(self) ‑> Dict

Returns the contents of this object as a dict.

ZoneAlign​

class ZoneAlign

Class variables​

var CENTER
var END
var START
var STRETCH

ZoneDirection​

class ZoneDirection

Class variables​

var COLUMN
var ROW

ZoneJustify​

class ZoneJustify

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START

ZoneWrap​

class ZoneWrap

Class variables​

var AROUND
var BETWEEN
var CENTER
var END
var START
var STRETCH