Skip to content
Quetzy edited this page Jun 20, 2022 · 3 revisions

[!] Needs Update for 0.3.0 [!]

A 'text' element draws text, naturally. YUI uses scribble to draw text, and thus supports all the inline formatting that scribble supports. It does not yet support all the functions you can call on scribble text elements.

Shortcuts

Because text is so common in User Interfaces, YUI allows some shortcuts to define text without using a text element. For example:

type: panel
elements:
  - type: text
    text: This is a normal text element!
  - "You can also just use a string literal, and YUI will create a text element with the string literal as the text value"
  - { path: displayName } # you can also just put a [[data binding]] as an element, and YUI will convert it to a text element with the binding as the text binding

Required Properties

text

Text Properties

Property Type Default Value? Bindable? Description
text string or array of strings - yes This is the text that will be displayed. Scribble formatting tags are supported. The value can also be an array of strings, each of which can also be bindings. Using an array of strings is more performant than using multiple text elements.
text_format format string - no As an alternative to using an array of strings, you can also use text_format to format the text value into another string, like text_format: "Name: {0}". The {0} will be replaced by the value of the textproperty. This is only useful if text is a binding and not a literal string. Note that you must quote the string in YAML, as { and } are special characters.
text_style text_style ID body no text_style is used with Themes to easily apply a set of common properties to a text element without having to repeat the same properties all over the place. The styles supported by the default theme are body, title, and subtitle, but a theme can add more. The text_style will apply a font and a color to the text.
font font asset name - no You may want to apply a specific font in some cases, without creating a text_style for each case. This font value will override the font defined by the text style.
centered boolean, x, or y false no TODO
padding number or {padding definition} 0 no padding allows you to define a 'buffer zone' around the text content. For example, setting padding to 5 will put 5 pixels worth of space around all sides of the content.