Flex, Box y Align

El layout es opcional: si no lo usás, todo se posiciona en coordenadas absolutas. essentia-ui reexporta Flex y Box de @threlte/flex, que usan Yoga, y Align de @threlte/extras.

Uso

<Align x={0} y={0}>
  {#snippet children({ align })}
    <Flex
      width={vw}
      height={vh}
      classParser={tailwindParser}
      class="flex-row items-center gap-40 p-40"
      onreflow={align}
    >
      <Box flex={1} height={300}>
        {#snippet children({ width, height })}
          <Glass {width} {height} radius={20} />
        {/snippet}
      </Box>
    </Flex>
  {/snippet}
</Align>

Costo

Medir hojas sin tamaño explícito es cuadrático: conviene darle a cada Box su width y su height. Una columna de altos conocidos se apila a mano más barato que con Yoga.

Referencia

Estos componentes no tienen ficha acá porque son de threlte.

Documentación de @threlte/flex

Anterior: Input

Siguiente: Theme