UI Components in zero-true

In zero-true we have a builtin UI library (powered by vuetify) that directly ties into the notebook’s runtime. This means that you can add interactivity to your notebook without needing to define callbacks or adding any boilerplate. You can create and reference these component values in your notebook easily, allowing you to create reactive and share interactive experiences from your notebook.

​

Creating UI Components

In general, creating a UI component in zero-true is as simple as importing zero-true into your notebook and writing one line of code. For a slider for example:

import zero_true as zt
zt.Slider(id='slider')

As of today, every zero-true UI component requires a unique ID. Most components render with sensible defaults with just an id provided but are highly customizable. Not all UI components in zero-true are the same so we encourage you to reference our documentation if anything isn’t working as expected!

​

Accessing Component Values

Accessing component values for interactive components is very simple. Just use the “value” attribute on each of the components. For example:

import zero_true as zt
slider = zt.Slider(id='slider')
print(slider.value)

The code above will produce the output recorded in the gif below:

​

“Static” Components

Some components in zero-true are static, they can be used to display information but are not interactive. Some components like this are:

• zt.Image
• zt.Text
• zt.Matplotlib
• zt.Plotly
• zt.DataFrame
• zt.Layout
• zt.Row
• zt.Column

You can display information with these components but they do not allow for any interactivity on the users part.

​

“Interactive” Components

Interactive components allow users to submit values to your notebook. Some of these components include:

• zt.Slider -> Returns int or float
• zt.Button -> Returns bool
• zt.RangeSlider -> Returns a list of ints or floats
• zt.TextInput -> Returns a string
• zt.TextArea -> Returns a string
• zt.NumberInput -> Returns an int or float

All available attributes for components are exposed in our API reference.