Text

A tile that display simple text or platform specific text (e.g. html)

Name	Description
component	`text`
text	text to be displayed, can be text, html, markdown, etc. Any text in here will not be parsed as expression
overflow	how to handle text overflow, valid values are `ellipsis \| clip \| fade \| visible`
span	see general styling but how many rows to span, default is 1. Set this values to `expanded` if we want to span the remaining rows. Used this when you want your text to wrap instead of overflowing
styles	see styles

Styles

In addition to regular styles, the following are also supported

Name	Description
textAlign	`center \| start \| end \| left \| right \| justify`
decoration	`upper-case \| lower-case \| capitalize`

A separate textWrapper can be configured by setting it directly.

Example text wrapper

{
  "component": "text",
  "text": "{$date|date:MMM dd}",
  "styles": {
    "textWrapper": {
      "backgroundColor": "#cc26A3B3",
      "padding": "12px 5px",
      "borderRadius": "10px"
    },
    "textAlign": "left",
    "fontWeight": 600,
    "fontSize": "22",
    "color": "white",
    "shadow": {
      "blur": "20px",
      "offset": "0 0",
      "color": "#222"
    }
  },
  "classes": {
    "root": "cardText"
  }
}

Options

dynamicStyles: Array
rule: left operator right syntax
value: styles block

Supported left side expressions: textLength

Example dynamic style

{
  "component": "text",
  "text": "{data.day.tiledTitle}",
  "options": {
    "dynamicStyles": [
      {
        "rule": "textLength > 18",
        "value": {
          "fontSize": "16"
        }
      }
    ]
  },
  "styles": {
    "fontSize": "20",
    "color": "white",
    "shadow": {
      "blur": "20px",
      "offset": "0 0",
      "color": "#333"
    }
  }
}