1# llimphi-widget-router23*Read this in English: [README.md](README.md).*
45Navegación por **pila de rutas** con transiciones de página. Es el análogo del `Navigator` de Flutter, resuelto a la Elm:
67- La pila (`RouteStack`) vive en el `Model` del App — pura, testeable,
8 serializable si `R` lo es. El widget no retiene nada.
9- `router_view` pinta **sólo la ruta actual** y compone
10 `View::animated_switch_from` (compositor) para la transición: al cambiar
11 la ruta, la página vieja sale como fantasma direccional y la nueva entra
12 desde el lado opuesto. La dirección la decide el último op de la pila:
13 **push entra desde la derecha, pop desde la izquierda** (LTR clásico).
14- Los **Hero** cruzan rutas gratis: un nodo con `View::hero(key, dur)` (o
15 `hero_view` del widget hero) presente en la página saliente y en la
16 entrante con la misma `key` **vuela** entre sus dos rects — el
17 `HeroRegistry` del runtime ya enlaza identidad entre frames.
1819## Uso20```ignore21// Model
22struct Model { nav: RouteStack<Ruta> }
23#[derive(Clone, PartialEq, Hash)]24enum Ruta { Lista, Detalle(u32), Config }
2526// update
27Msg::Abrir(id) => m.nav.push(Ruta::Detalle(id)),
28Msg::Volver => { m.nav.pop(); }
2930// view
31router_view(1, &m.nav, PageTransition::Slide, motion::SLOW, move |r| {
32 match r {
33 Ruta::Lista => lista_view(m),
34 Ruta::Detalle(i) => detalle_view(m, *i),
35 Ruta::Config => config_view(m),
36 }
37})
38```39## Limitaciones honestas4041- ~~El fantasma se pinta encima del contenido nuevo~~ → resuelto con el
42 **scene-split de fantasmas** (`SwitchStyle::exit_under`): la página
43 saliente se pinta DEBAJO de la entrante, en su posición z real. Eso
44 habilita `PageTransition::Cover` — push opaco estilo UIKit (la nueva
45 tapa sin fade; el pop desliza la vieja por encima, revelando).
46- `router_view` usa el seam `LayoutBuilder` para conocer el slot; el límite
47 v1 del seam es **sin anidamiento** — si una página contiene otro
48 `layout_builder` (p. ej. `fitted_box`), usar `router_view_sized` con el
49 tamaño que la app ya trackea por `on_resize`.
50- Una transición en curso no se "revierte" al conmutar de nuevo: la
51 variante cambia y arranca la nueva (el fantasma anterior sigue su fade).
5253---
5455Parte de **llimphi** — ver [llimphi](../../LEEME.md).
Navegación por pila de rutas con transiciones de página. Es el análogo del Navigator de Flutter, resuelto a la Elm:
La pila (RouteStack) vive en el Model del App — pura, testeable,
serializable si R lo es. El widget no retiene nada.
router_view pinta sólo la ruta actual y compone
View::animated_switch_from (compositor) para la transición: al cambiar
la ruta, la página vieja sale como fantasma direccional y la nueva entra
desde el lado opuesto. La dirección la decide el último op de la pila:
push entra desde la derecha, pop desde la izquierda (LTR clásico).
Los Hero cruzan rutas gratis: un nodo con View::hero(key, dur) (o
hero_view del widget hero) presente en la página saliente y en la
entrante con la misma keyvuela entre sus dos rects — el
HeroRegistry del runtime ya enlaza identidad entre frames.
El fantasma se pinta encima del contenido nuevo → resuelto con el
scene-split de fantasmas (SwitchStyle::exit_under): la página
saliente se pinta DEBAJO de la entrante, en su posición z real. Eso
habilita PageTransition::Cover — push opaco estilo UIKit (la nueva
tapa sin fade; el pop desliza la vieja por encima, revelando).
router_view usa el seam LayoutBuilder para conocer el slot; el límite
v1 del seam es sin anidamiento — si una página contiene otro
layout_builder (p. ej. fitted_box), usar router_view_sized con el
tamaño que la app ya trackea por on_resize.
Una transición en curso no se "revierte" al conmutar de nuevo: la
variante cambia y arranca la nueva (el fantasma anterior sigue su fade).