Text

The Text component allows you to display text in your Space. They can be displayed anywhere in your Space or in-line within other components (detail, card list, table).

Ways to use a Text component.

A Text field can be used to concatenate values to provide better labels and readability.

Configuring your Text component.

1. First, give your component a name.
2. If you are displaying this component inline within another component, then you will also need to provide a label.
3. In the template section, you can enter your text and/or use variables to create dynamic content.

Example

If you have a first_name and last_name field in this detail component, you can create a new Text component called full name. Simply insert variables for the first name and last name in the template, with a space in between: 

${self.data.first_name} ${self.data.last_name}

You'll now have a new Text field that will show the full name - so you can hide the separate first and last name fields.

‍

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.

‍

Design

Layout

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

‍

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

‍

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.

‍

Typography

You can change the size, color, and styling of your text.

‍