Other UI elements and controlling your app's style

p(contents)

Wrap some text in a paragraph tag. Helps with layout of raw text.

h1(contents...)

Show contents as a level 1 heading

h2(contents...)

Show contents as a level 2 heading

h3(contents...)

Show contents as a level 3 heading

br()

Insert a line break (html <br>) into your UI

divider(; inset = false, vertical = false)

Create a thin line to separate sections of a layout. inset adds 72px of indentation to the left for horizontal dividers, and reduces max-height for vertical dividers.

function icon(name)

Add an icon to part of your UI. Supports material design icons. The name is the name of icon - e.g. "home", "heart", etc

For a list of available icons visit materialdesignicons.com. You can find their names by clicking on them.

Size can be one of x-small, small, medium (default), large, x-large.

Works well embedded in buttons.

show_if(id, content...)

Create a span that only shows content if the variable id is true. As with all Matte logic id should be a function defined in the Server module of your app.

hide_if(id, content...)

Companion to show_if. Creates a span that only shows content if the variable id is false. As with all Matte logic id should be a function defined in the Server module of your app.

expansion_panel(header, content)

Create an expansion panel with that appears as header in the list and can expanded to also show content

Should only be used inside an expansion_panel_list

If you need to include multiple elements inside header or content, wrap them as a tuple.

expansion_panel_list(items...)

Create a list of expansion panel items. items should only be a set of expansion_panels

dialog(id, title, content, width = 500)

Display a dialog box (which pops over the rest of the content, forcing user acknowledgement). Visibility is controlled by id. A common use case is to define this output function to have sole input from a button, and simply return whether the button has been clicked.

title and content can be dynamically set.

If you need to include multiple elements inside content, wrap them as a tuple.

snackbar(id, content; color = "error", width = 500)

Display a snackbar at the bottom of the page to notify users of events or other info. Visibility of the snackbar is controlled by id, which should be a boolean. A common use case is to define this output function to have sole input from a button, and simply return whether the button has been clicked.

content can be dynamically set. Snackbars are small, so you should only include (raw) text i.e. (text_output) in the content, not other UIElements.

If you need to include multiple elements inside content, wrap them as a tuple.

Snackbars automatically close based on the timeout set (in milliseconds). Set to 0 to keep open indefinitely.

circular_loader(; width = 3, color = "primary")

Add a circular spinning loading animation to your UI. Best wrapped in a show_if so you can hide it once the relevant content has finished loading.

tooltip(content, tip)

Add a mouseover-activated tooltip to the UI elements contained in content. Works best for small elements like buttons.

If you need to include multiple elements inside content, wrap them as a tuple.