zablooContainer
Agrupar, y layout flex.
Catálogo de componentes
Los trece tipos de nodo que define el formato, una página cada uno: qué dibuja, qué props acepta, qué estados lleva y cómo se comporta en un SDK más antiguo.
Una pantalla de zabloo es un árbol de
nodos, y el formato define trece
tipos de nodo — ni uno más. Este catálogo es una página por tipo: qué dibuja,
qué props acepta, qué estados lleva, qué actions dispara, cómo se comporta en
un SDK más antiguo y qué componentes de @zabloo/react lo producen.
Trece suena a poco al lado de la lista de widgets de cualquier toolkit de UI, y es a propósito. Las cards, los acordeones, los desplegables y las rejillas no faltan: se construyen con esos trece, en tu propio código, y se aplanan antes de que el juego llegue a verlos. Un tipo nuevo se añade solo cuando hace posible algo que ninguno de los existentes puede expresar; nunca porque un diseño tenga un nombre para ello.
Los cuatro grupos de abajo son los cuatro problemas que el conjunto tenía que cubrir. Léelos en orden y el tamaño del conjunto se explica solo.
Una tarjeta con un control Ejecutar dibuja su componente en la GPU, ahí mismo. Solo corre un preview a la vez — arrancar otro devuelve el anterior a su póster, porque un navegador limita cuántos contextos WebGL puede tener abiertos una página y descarta el más viejo sin preguntar.
Estructura
Poner cosas en la pantalla y decidir dónde van: estos cuatro tipos dibujan los paneles, las palabras y las imágenes, y corren la pasada de layout que coloca todo lo demás.
Text
Una tirada de glifos con un tamaño intrínseco.
Image
Un rectángulo texturizado que se dimensiona por su origen.
ScrollView
Una ventana a un contenido más grande que ella.
Entrada
Recoger una respuesta del jugador. Cada uno de estos tipos recoge una forma de respuesta —una pulsación, un sí/no, una elección dentro de un rango, caracteres escritos— y se la entrega al juego.
Dinámicos
Pantallas cuya forma no se conoce al escribirlas: una lista tan larga como los datos que tenga detrás, una sección que el jugador abre, un número que todavía está cargando.
Repeat
Hijos que salen de un array, no del documento.
Collapse
Contenido que entra y sale del flujo.
ProgressBar
Una fracción del padre.
Spinner
Un bucle sin fin, indexado por identidad.
Capas
Dibujar encima de la pantalla en vez de dentro de ella —el diálogo de confirmación, el tooltip— y quitarle la entrada a lo que hay debajo mientras está abierto.
Modal
Overlay
Orden Z, captura de entrada, focus scope.
Más nombres que tipos de nodo
@zabloo/react también exporta Row, Column, Accordion, Tabs, Badge, Modal, Toast, Tooltip, Checkbox, Switch, Radio, Select, List, Grid — composites, aplanados al escribir. Nunca llegan a la IR, y por eso se nombran aquí en vez de tener su propia tarjeta arriba.