Layout mit Box
Baue das Dashboard-Grundgerüst mit Flexbox in Zellen: eine Kopfleiste, eine Seitenleiste und Karten.
In diesem Kapitel
- Eine obere Leiste
- Seitenleiste und Karten
- Standardmäßig responsiv
Die Konsole ist ein Raster aus Zellen. Text.js berechnet das Layout mit Yoga, derselben flexbox-Engine, die React Native verwendet, sodass <Box> den CSS-Regeln für flexbox folgt. Die Einheiten sind Zellen: p-1 entspricht einer Spalte und einer Zeile Innenabstand.
Eine obere Leiste
Die meisten Ansichten sind als Spalte aufgebaut: eine einzeilige Leiste, dann alles andere. Gib der Leiste mit h-1 eine feste Höhe und lass den Inhalt mit grow den Rest einnehmen.
Entfernt: import { Box, Text, useInput } from "@textjs/app";Hinzugefügt: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Entfernt: <Box className="flex-col border rounded px-2 py-1">Entfernt: <Text bold>▼ Acme Deploys</Text>Entfernt: <Text color="muted">Hello, console.</Text>Hinzugefügt: <Box className="flex-col grow">Hinzugefügt: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Hinzugefügt: <Text bold>▼ Acme</Text>Hinzugefügt: <Text color="subtle">acme.local</Text>Hinzugefügt: <Spacer />Hinzugefügt: </Box>Hinzugefügt: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> ist eine wachsende Box: Alles danach rückt an den rechten Rand.
Seitenleiste und Karten
Füge eine Seitenleiste mit fester Breite und rechtem Rahmen sowie drei Karten hinzu, die sich die verbleibende Breite teilen. basis-0 mit grow gibt jeder Karte den gleichen Anteil, unabhängig von ihrem Inhalt.
Hinzugefügt: const NAV = ["Overview", "Deployments", "Settings"];Hinzugefügt: Hinzugefügt: function Card({ title, value }: { title: string; value: string }) {Hinzugefügt: return (Hinzugefügt: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Hinzugefügt: <Text color="subtle">{title}</Text>Hinzugefügt: <Text bold>{value}</Text>Hinzugefügt: </Box>Hinzugefügt: );Hinzugefügt: }Hinzugefügt: export default function Page() {Hinzugefügt: const [sidebar, setSidebar] = useState(true);Hinzugefügt: const [stacked, setStacked] = useState(false);Hinzugefügt: Hinzugefügt: useInput((e) => {Hinzugefügt: if (e.input === "s") setSidebar((v) => !v);Hinzugefügt: if (e.input === "d") setStacked((v) => !v);Hinzugefügt: });Hinzugefügt: return ( <Box className="flex-col grow"> {/* top bar */}Entfernt: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Hinzugefügt: <Box className="flex-row grow">Hinzugefügt: {sidebar && (Hinzugefügt: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Hinzugefügt: {NAV.map((item) => <Text key={item}>{item}</Text>)}Hinzugefügt: </Box>Hinzugefügt: )}Hinzugefügt: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Hinzugefügt: <Card title="Production" value="acme-web" />Hinzugefügt: <Card title="Deployments" value="6 today" />Hinzugefügt: <Card title="Build time" value="38s p50" />Hinzugefügt: </Box>Hinzugefügt: </Box> </Box> );}Drücke s und d in der Konsole. Yoga berechnet das Layout neu und zeichnet nur die geänderten Zeilen neu, sodass das Ein- und Ausblenden der Seitenleiste einen einzigen console.log-Aufruf kostet.
Standardmäßig responsiv
Das Raster richtet sich nach dem angedockten DevTools-Bereich. Ziehe die Konsole breiter oder höher und die Karten ordnen sich neu an. Wenn du Breakpoints brauchst, liefert useBreakpoint() den aktuellen Breakpoint in Zellen.
Ausprobieren
Das ist Acme Deploys am Ende des Kapitels, ausgeführt in DevTools. Klicke auf das Pad und nutze dann die Tasten unten.
Die Konsole öffnen
Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke s.
Auf einem Desktop öffnen
Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.
Quiz
2 FragenBeantworte jede Frage, um das Kapitel abzuschließen.