You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
3.6 KiB
84 lines
3.6 KiB
# Eidos Flex
|
|
|
|
`display:flex` container. Eidos-native: añade los props container-side
|
|
(`direction`, `align`, `justify`, `wrap`, `rowGap`, `columnGap`) sobre
|
|
la superficie completa de [Box](../box/README.md), del que hereda
|
|
estructura y se renderiza a través de él. Item-side props
|
|
(`alignSelf`, `gridColumn`, `flex`, `grow`, …) viven en el hijo Box.
|
|
|
|
## Superficie
|
|
|
|
```svelte
|
|
<Flex direction="row" align="center" justify="space-between" gap={3} padding={4}>
|
|
<Box>Start</Box>
|
|
<Box>Middle</Box>
|
|
<Box>End</Box>
|
|
</Flex>
|
|
```
|
|
|
|
## Baseline
|
|
|
|
Origen: `air/components/layout/flex` (rama `morfo-runtime`). Misma
|
|
adaptación que Box: drop del prefijo `air-`, vars renombradas a
|
|
`--flex-*`, `var(--space-N)` en lugar de `var(--air-space-N)`,
|
|
resolución vía `ActiveEidos.resolve`.
|
|
|
|
Composición: Flex se renderiza a través de `<Box>` con `display="flex"`
|
|
fijo. El DOM final es un único `<div data-box data-flex>` — el recipe
|
|
de Flex añade selectores `[data-box][data-flex] { … }` sobre los de
|
|
Box. Los props heredados (padding, margin, size, position) se pasan
|
|
intactos al Box raíz.
|
|
|
|
## Comparativa
|
|
|
|
| Capacidad | UIX | Radix Themes | Chakra UI | Mantine |
|
|
| --- | --- | --- | --- | --- |
|
|
| `direction` (row/column +reverse) | Sí | Sí | Sí (`flexDirection`) | Sí |
|
|
| `align` → align-items | Sí | Sí | Sí (`alignItems`) | Sí |
|
|
| `justify` → justify-content | Sí | Sí | Sí (`justifyContent`) | Sí |
|
|
| `wrap` → flex-wrap | Sí | Sí | Sí (`flexWrap`) | Sí |
|
|
| `gap` + `rowGap` / `columnGap` | Sí | Sí (`gap`, `gapX`, `gapY`) | Sí | Sí |
|
|
| `inline` boolean (inline-flex) | Sí | Vía `display="inline-flex"` | Sí | Sí (`inline`) |
|
|
| `alignContent` (multi-line cross) | Sí | Sí | Sí | Sí |
|
|
| Item props heredados de Box | Sí (composición) | Sí | Sí (style-props todo en Box) | — split |
|
|
| Responsive | Sí | Sí | Sí | Sí |
|
|
|
|
## Decisiones
|
|
|
|
- **Hereda Box por composición, no por mixin** — Flex renderiza a través
|
|
de `<Box>` con `display="flex"` fijo. Mantiene el contrato Box-as-foundation
|
|
y permite que `[data-box]` siga siendo el selector canónico para todo lo
|
|
que pinta como box.
|
|
- **`align`/`justify` cortos** — preferimos `align` sobre `alignItems`
|
|
(Mantine convention). Coincide con Radix Themes; difiere de Chakra.
|
|
- **`inline` boolean en vez de `display="inline-flex"`** — ergonomía;
|
|
el resto de la API queda consistente con Box (un solo display).
|
|
- **Item props NO en Flex** — `flex`, `grow`, `alignSelf`, `gridColumn`
|
|
van en el `<Box>` hijo. Split estilo Radix.
|
|
|
|
## Eventos Sema
|
|
|
|
0 eventos. Pasivo — sólo organiza hijos. Mismas reglas que Box.
|
|
|
|
## Gaps
|
|
|
|
| Gap | Disposición | Detalle |
|
|
| --- | --- | --- |
|
|
| `alignContent` (multi-line cross-axis) | ✅ implementado en `ec66999b` siguiente commit | Cubierto. |
|
|
| Helpers `HStack` / `VStack` (alias direction-fijo) | **diferir** | Ergonomía Chakra. UIX usa `<Stack direction="…">`. Reconsiderar si la fricción es real. |
|
|
| `inline-flex` shorthand alternativo (e.g. `<InlineFlex>`) | **descartar** | `inline` boolean cubre el caso. |
|
|
| Slot `divider` entre hijos (separator automático) | **diferir** | Patrón Chakra Stack. Más natural en Stack que en Flex. |
|
|
|
|
## Referencias
|
|
|
|
- Radix Themes Flex: https://www.radix-ui.com/themes/docs/components/flex
|
|
- Chakra UI Flex: https://chakra-ui.com/docs/components/flex
|
|
- Mantine Flex: https://mantine.dev/core/flex/
|
|
- MDN flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
|
|
|
|
## Passive justification
|
|
|
|
Visual-only (`scope: ['eidos']`). Una sola part Provider, marker
|
|
`[data-flex]`. Sin estados ni keyboard ni ARIA ni eventos. El recipe
|
|
consume `--flex-*` writeable inline.
|