Una primitiva, seis roles, y cada variante es un prop. Nada de esto es una vista distinta: es el mismo nodo con otros datos.
El caso mínimo — un nodo, un rol:
{
"type": "text",
"props": {
"content": "El veloz murciélago",
"style": "headline"
}
}
sale esto:
El veloz murciélago
Los seis roles con repeat: una vista, seis datos — el server no manda seis árboles:
{
"type": "repeat",
"props": {
"items": [
{
"content": "El veloz murciélago — large_title",
"role": "large_title"
},
{
"content": "El veloz murciélago — title",
"role": "title"
},
{
"content": "El veloz murciélago — headline",
"role": "headline"
},
{
"content": "El veloz murciélago — body",
"role": "body"
},
{
"content": "El veloz murciélago — secondary",
"role": "secondary"
},
{
"content": "El veloz murciélago — caption",
"role": "caption"
}
],
"view": "label"
}
}
sale esto:
El veloz murciélago — large_title
El veloz murciélago — title
El veloz murciélago — headline
El veloz murciélago — body
El veloz murciélago — secondary
El veloz murciélago — caption
Color por token (nunca un hex en la pantalla):
{
"type": "stack",
"props": {
"spacing": 4
},
"children": [
{
"type": "text",
"props": {
"content": "text_primary es la tinta normal",
"style": "body"
}
},
{
"type": "text",
"props": {
"color": "text_secondary",
"content": "text_secondary baja la voz",
"style": "body"
}
},
{
"type": "text",
"props": {
"color": "accent",
"content": "accent es la voz de la casa",
"style": "body"
}
}
]
}
sale esto:
text_primary es la tinta normal
text_secondary baja la voz
accent es la voz de la casa
strikethrough — lo que costaba antes:
{
"type": "stack",
"props": {
"axis": "horizontal",
"spacing": 8
},
"children": [
{
"type": "text",
"props": {
"color": "text_secondary",
"content": "$ 19.990",
"strikethrough": true,
"style": "body"
}
},
{
"type": "text",
"props": {
"content": "$ 12.990",
"style": "body",
"weight": "semibold"
}
}
]
}
sale esto:
$ 19.990
$ 12.990
tabular — cada dígito del mismo ancho, montos que se leen como tabla:
{
"type": "stack",
"props": {
"spacing": 2
},
"children": [
{
"type": "text",
"props": {
"align": "trailing",
"content": "$ 111.111",
"style": "body",
"tabular": true
}
},
{
"type": "text",
"props": {
"align": "trailing",
"content": "$ 908.008",
"style": "body",
"tabular": true
}
}
]
}
sale esto:
$ 111.111
$ 908.008
lines reserva el alto aunque el texto sea corto (las tarjetas vecinas alinean):
{
"type": "text",
"props": {
"content": "Un título corto",
"lines": 2,
"style": "body"
}
}
sale esto:
Un título corto
align — el server decide la alineación:
{
"type": "text",
"props": {
"align": "center",
"content": "centrado",
"style": "body"
}
}
sale esto:
centrado
mono + pre — código que se lee como código (con esto está impreso este mismo JSON):
{
"type": "text",
"props": {
"content": "{ \"type\": \"text\" }",
"mono": true,
"pre": true,
"style": "caption"
}
}
sale esto:
{ "type": "text" }