label
El composite base: text con rol semántico. Las pantallas se escriben con labels nuestros, no con genéricos.
la receta (vive en el server):
{
"type": "text",
"props": {
"align": "$prop:align",
"color": "$prop:color",
"content": "$prop:content",
"lines": "$prop:lines",
"max_lines": "$prop:max_lines",
"style": "$prop:role",
"tabular": "$prop:tabular",
"weight": "$prop:weight"
}
}
una instancia (los $prop: rellenos):
{
"type": "label",
"props": {
"content": "Un label con rol headline",
"role": "headline"
}
}
sale esto:
Un label con rol headline
nav_row
Una fila que lleva a algún lado — título, ícono, chevron:
la receta (vive en el server):
{
"type": "button",
"children": [
{
"type": "stack",
"props": {
"spacing": 0
},
"children": [
{
"type": "stack",
"props": {
"axis": "horizontal",
"padding": 16,
"spacing": 12
},
"children": [
{
"type": "icon",
"props": {
"name": "$prop:icon"
}
},
{
"type": "text",
"props": {
"content": "$prop:title"
}
},
{
"type": "spacer"
},
{
"type": "icon",
"props": {
"name": "chevron_right",
"size": 16,
"tint": "secondary"
}
}
]
},
{
"type": "divider"
}
]
}
]
}
una instancia (los $prop: rellenos):
{
"type": "nav_row",
"props": {
"action": {
"type": "navigate",
"target": "treceui/text"
},
"icon": "text",
"title": "Ver Texto"
}
}
sale esto:
section_header
El título de una sección, con su acción opcional de «ver todo»:
la receta (vive en el server):
{
"type": "stack",
"props": {
"spacing": 0
},
"children": [
{
"type": "text",
"props": {
"content": "$prop:title",
"style": "title"
}
}
]
}
una instancia (los $prop: rellenos):
{
"type": "section_header",
"props": {
"title": "Novedades"
}
}
sale esto:
Novedades
chip
La píldora tocable de los selectores:
la receta (vive en el server):
{
"type": "stack",
"props": {
"background": "surface_raised",
"corner_radius": 8,
"padding": 8
},
"children": [
{
"type": "label",
"props": {
"content": "$prop:text",
"role": "caption"
}
}
]
}
una instancia (los $prop: rellenos):
{
"type": "chip",
"props": {
"action": {
"type": "navigate",
"target": "treceui/composites"
},
"title": "Kanto"
}
}
sale esto:
notice_card
Un aviso con ícono, para decir algo sin gritar:
la receta (vive en el server):
{
"type": "stack",
"props": {
"axis": "horizontal",
"background": "surface",
"corner_radius": 12,
"fill_width": true,
"padding": 12,
"spacing": 12
},
"children": [
{
"type": "icon",
"props": {
"name": "$prop:icon",
"size": 16,
"tint": "text_secondary"
},
"when": {
"present": "$prop:icon|null"
}
},
{
"type": "stack",
"props": {
"spacing": 4
},
"children": [
{
"type": "label",
"props": {
"content": "$prop:title|Qué falta acá",
"role": "caption"
}
},
{
"type": "label",
"props": {
"color": "text_secondary",
"content": "$prop:text",
"role": "caption"
}
}
]
}
]
}
una instancia (los $prop: rellenos):
{
"type": "notice_card",
"props": {
"icon": "download",
"text": "Sin conexión: mostrando lo guardado."
}
}
sale esto:
Qué falta acá
Sin conexión: mostrando lo guardado.
detail_row
Etiqueta a la izquierda, dato a la derecha — la fila de toda ficha:
la receta (vive en el server):
{
"type": "button",
"props": {
"action": "$prop:action"
},
"children": [
{
"type": "stack",
"props": {
"axis": "horizontal",
"fill_width": true,
"spacing": 12
},
"children": [
{
"type": "icon",
"props": {
"name": "$prop:icon"
},
"when": {
"present": "$prop:icon|null"
}
},
{
"type": "stack",
"props": {
"spacing": 4
},
"children": [
{
"type": "label",
"props": {
"content": "$prop:title",
"role": "body"
}
},
{
"type": "label",
"props": {
"color": "text_secondary",
"content": "$prop:subtitle",
"role": "caption"
}
}
]
},
{
"type": "spacer"
},
{
"type": "icon",
"props": {
"name": "chevron_right",
"size": 16,
"tint": "secondary"
}
}
]
}
]
}
una instancia (los $prop: rellenos):
{
"type": "detail_row",
"props": {
"label": "Peso",
"value": "6,9 kg"
}
}
sale esto:
split_row
Concepto y monto (tabular por default, casi siempre es cifra):
la receta (vive en el server):
{
"type": "button",
"props": {
"action": "$prop:action"
},
"children": [
{
"type": "stack",
"props": {
"axis": "horizontal",
"fill_width": true,
"padding": "$prop:padding|0",
"spacing": 12
},
"children": [
{
"type": "icon",
"props": {
"name": "$prop:icon"
},
"when": {
"present": "$prop:icon|null"
}
},
{
"type": "stack",
"props": {
"spacing": 4
},
"children": [
{
"type": "label",
"props": {
"content": "$prop:title",
"role": "body"
}
},
{
"type": "label",
"props": {
"color": "text_secondary",
"content": "$prop:subtitle",
"role": "caption"
},
"when": {
"present": "$prop:subtitle|null"
}
}
]
},
{
"type": "spacer"
},
{
"type": "stack",
"props": {
"alignment": "trailing",
"spacing": 4
},
"children": [
{
"type": "label",
"props": {
"color": "$prop:value_color|null",
"content": "$prop:value",
"max_lines": 1,
"role": "body",
"tabular": true
}
},
{
"type": "label",
"props": {
"color": "$prop:value_detail_color|text_secondary",
"content": "$prop:value_detail",
"role": "caption"
},
"when": {
"present": "$prop:value_detail|null"
}
}
]
}
]
}
]
}
una instancia (los $prop: rellenos):
{
"type": "split_row",
"props": {
"label": "Envío",
"value": "$ 2.990"
}
}
sale esto:
app_card
La tarjeta de una app en la Store:
la receta (vive en el server):
{
"type": "button",
"props": {
"action": "$prop:action"
},
"children": [
{
"type": "stack",
"props": {
"axis": "horizontal",
"background": "surface",
"corner_radius": 16,
"padding": 12,
"spacing": 12
},
"children": [
{
"type": "icon",
"props": {
"name": "$prop:icon",
"size": 40
}
},
{
"type": "stack",
"props": {
"spacing": 4
},
"children": [
{
"type": "text",
"props": {
"content": "$prop:name",
"style": "body",
"weight": "semibold"
}
},
{
"type": "text",
"props": {
"content": "$prop:tagline",
"style": "secondary"
}
},
{
"type": "text",
"props": {
"color": "accent",
"content": "$prop:badge",
"style": "caption"
},
"when": {
"present": "$prop:badge|null"
}
}
]
},
{
"type": "spacer"
},
{
"type": "button",
"props": {
"action": "$prop:cta_action",
"style": "prominent",
"title": "$prop:cta"
}
}
]
}
]
}
una instancia (los $prop: rellenos):
{
"type": "app_card",
"props": {
"action": {
"type": "navigate",
"target": "treceui"
},
"icon": "sparkles",
"name": "TreceUI",
"tagline": "El sistema, mostrado con el sistema"
}
}
sale esto: