Layout con Box
Costruisci la struttura della dashboard con Flexbox in celle: una barra superiore, una barra laterale e schede.
In questo capitolo
- Una barra superiore
- Barra laterale e schede
- Responsive per impostazione predefinita
La console è una griglia di celle. Text.js ne organizza il layout con Yoga, lo stesso motore flexbox usato da React Native, quindi <Box> segue le regole flexbox di CSS. Le unità sono celle: p-1 corrisponde a una colonna e una riga di padding.
Una barra superiore
La maggior parte delle schermate è una colonna: una barra di una riga, poi tutto il resto. Assegna alla barra un’altezza fissa con h-1 e lascia che il contenuto occupi lo spazio restante con grow.
Rimosso: import { Box, Text, useInput } from "@textjs/app";Aggiunto: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Rimosso: <Box className="flex-col border rounded px-2 py-1">Rimosso: <Text bold>▼ Acme Deploys</Text>Rimosso: <Text color="muted">Hello, console.</Text>Aggiunto: <Box className="flex-col grow">Aggiunto: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Aggiunto: <Text bold>▼ Acme</Text>Aggiunto: <Text color="subtle">acme.local</Text>Aggiunto: <Spacer />Aggiunto: </Box>Aggiunto: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> è un box che si espande: tutto ciò che lo segue viene spinto verso il bordo destro.
Barra laterale e schede
Aggiungi una barra laterale a larghezza fissa con un bordo destro e tre schede che si dividono la larghezza restante. basis-0 con grow assegna a ogni scheda una quota uguale, indipendentemente dal contenuto.
Aggiunto: const NAV = ["Overview", "Deployments", "Settings"];Aggiunto: Aggiunto: function Card({ title, value }: { title: string; value: string }) {Aggiunto: return (Aggiunto: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Aggiunto: <Text color="subtle">{title}</Text>Aggiunto: <Text bold>{value}</Text>Aggiunto: </Box>Aggiunto: );Aggiunto: }Aggiunto: export default function Page() {Aggiunto: const [sidebar, setSidebar] = useState(true);Aggiunto: const [stacked, setStacked] = useState(false);Aggiunto: Aggiunto: useInput((e) => {Aggiunto: if (e.input === "s") setSidebar((v) => !v);Aggiunto: if (e.input === "d") setStacked((v) => !v);Aggiunto: });Aggiunto: return ( <Box className="flex-col grow"> {/* top bar */}Rimosso: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Aggiunto: <Box className="flex-row grow">Aggiunto: {sidebar && (Aggiunto: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Aggiunto: {NAV.map((item) => <Text key={item}>{item}</Text>)}Aggiunto: </Box>Aggiunto: )}Aggiunto: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Aggiunto: <Card title="Production" value="acme-web" />Aggiunto: <Card title="Deployments" value="6 today" />Aggiunto: <Card title="Build time" value="38s p50" />Aggiunto: </Box>Aggiunto: </Box> </Box> );}Premi s e d nella console. Yoga ricalcola il layout e ridisegna solo le righe modificate, quindi mostrare o nascondere la barra laterale costa un solo console.log.
Responsive per impostazione predefinita
La griglia segue il pannello DevTools ancorato. Trascina la console per allargarla o aumentarne l’altezza e le schede si ridispongono. Quando ti servono i breakpoint, useBreakpoint() restituisce quello corrente, in celle.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi s.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.