Layout con Box
Crea la estructura del panel con Flexbox en celdas: una barra superior, una barra lateral y tarjetas.
En este capítulo
- Una barra superior
- Barra lateral y tarjetas
- Adaptable por defecto
La consola es una cuadrícula de celdas. Text.js la distribuye con Yoga, el mismo motor flexbox que usa React Native, por lo que <Box> sigue las reglas de flexbox de CSS. Las unidades son celdas: p-1 equivale a una columna y una fila de relleno.
Una barra superior
La mayoría de las pantallas son una columna: una barra de una fila y después todo lo demás. Dale a la barra una altura fija con h-1 y deja que el contenido ocupe el resto con grow.
Eliminado: import { Box, Text, useInput } from "@textjs/app";Añadido: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Eliminado: <Box className="flex-col border rounded px-2 py-1">Eliminado: <Text bold>▼ Acme Deploys</Text>Eliminado: <Text color="muted">Hello, console.</Text>Añadido: <Box className="flex-col grow">Añadido: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Añadido: <Text bold>▼ Acme</Text>Añadido: <Text color="subtle">acme.local</Text>Añadido: <Spacer />Añadido: </Box>Añadido: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> es una caja que crece: todo lo que va después se desplaza hasta el borde derecho.
Barra lateral y tarjetas
Añade una barra lateral de ancho fijo con un borde derecho y tres tarjetas que compartan el ancho restante. basis-0 con grow da a cada tarjeta una parte igual, independientemente de su contenido.
Añadido: const NAV = ["Overview", "Deployments", "Settings"];Añadido: Añadido: function Card({ title, value }: { title: string; value: string }) {Añadido: return (Añadido: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Añadido: <Text color="subtle">{title}</Text>Añadido: <Text bold>{value}</Text>Añadido: </Box>Añadido: );Añadido: }Añadido: export default function Page() {Añadido: const [sidebar, setSidebar] = useState(true);Añadido: const [stacked, setStacked] = useState(false);Añadido: Añadido: useInput((e) => {Añadido: if (e.input === "s") setSidebar((v) => !v);Añadido: if (e.input === "d") setStacked((v) => !v);Añadido: });Añadido: return ( <Box className="flex-col grow"> {/* top bar */}Eliminado: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Añadido: <Box className="flex-row grow">Añadido: {sidebar && (Añadido: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Añadido: {NAV.map((item) => <Text key={item}>{item}</Text>)}Añadido: </Box>Añadido: )}Añadido: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Añadido: <Card title="Production" value="acme-web" />Añadido: <Card title="Deployments" value="6 today" />Añadido: <Card title="Build time" value="38s p50" />Añadido: </Box>Añadido: </Box> </Box> );}Pulsa s y d en la consola. Yoga recalcula el layout y solo se repintan las filas que han cambiado, por lo que mostrar u ocultar la barra lateral cuesta un único console.log.
Adaptable por defecto
La cuadrícula se ajusta al panel acoplado de DevTools. Arrastra la consola para darle más ancho o altura y las tarjetas se redistribuyen. Cuando necesites puntos de ruptura, useBreakpoint() devuelve el actual, en celdas.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa s.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.