Text & Gestaltung
Gestalte eine Deployment-Karte mit Farben, Textattributen und Theme-Tokens.
In diesem Kapitel
- Textattribute
- Theme-Tokens
- Eine Deployment-Karte
- Themes
Jede Zelle hat ein Zeichen, einen Vordergrund, einen Hintergrund und eine Reihe von Attributen. Text.js kompiliert sie zu %c-CSS-Spans, sodass die Konsole echte Farben, Fettdruck und Kursivschrift anzeigt.
Textattribute
<Text> akzeptiert bold, dim, italic, underline und strikethrough. Verschachtelte <Text>-Elemente werden zu formatierten Spans innerhalb einer Zeile.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Theme-Tokens
Die color-Prop akzeptiert Hexwerte, reine Farbnamen (emerald) und Theme-Tokens; Farbabstufungen der Tailwind-Palette verwendest du über Klassen (text-emerald-400). Tokens folgen dem aktiven Theme, bevorzuge sie daher für alles mit semantischer Bedeutung. Füge eine Statuskomponente hinzu:
Hinzugefügt: import { Text } from "@textjs/app";Hinzugefügt: Hinzugefügt: export type DeployStatus = "ready" | "building" | "error" | "queued";Hinzugefügt: Hinzugefügt: export const STATUS = {Hinzugefügt: ready: { label: "Ready", color: "success" },Hinzugefügt: building: { label: "Building", color: "warning" },Hinzugefügt: error: { label: "Error", color: "danger" },Hinzugefügt: queued: { label: "Queued", color: "subtle" },Hinzugefügt: } as const;Hinzugefügt: Hinzugefügt: export function Status({ status }: { status: DeployStatus }) {Hinzugefügt: const s = STATUS[status];Hinzugefügt: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Hinzugefügt: }Eine Deployment-Karte
bg-surface hebt die Karte vom Hintergrund ab. Die Deployment-ID übernimmt die Statusfarbe, erscheint während des Builds kursiv und bei einem Fehler durchgestrichen.
Entfernt: import { Box, Spacer, Text, useInput } from "@textjs/app";Hinzugefügt: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Hinzugefügt: import { Status, STATUS, type DeployStatus } from "./status";Hinzugefügt: Hinzugefügt: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Hinzugefügt: export default function Page() {Hinzugefügt: const { theme, cycleTheme } = useAppTheme();Hinzugefügt: const [status, setStatus] = useState<DeployStatus>("ready");Hinzugefügt: Hinzugefügt: useInput((e) => {Hinzugefügt: if (e.input === "t") cycleTheme();Hinzugefügt: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Hinzugefügt: });Hinzugefügt: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Hinzugefügt: <Box className="flex-col border rounded px-2 py-1 bg-surface">Hinzugefügt: <Box className="flex-row gap-2 h-1">Hinzugefügt: <Text bold>acme-web</Text>Hinzugefügt: <Status status={status} />Hinzugefügt: </Box>Hinzugefügt: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Hinzugefügt: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Hinzugefügt: dpl_8fK2Hinzugefügt: </Text>Hinzugefügt: </Box> </Box> );}wrap="truncate-end" beendet lange Commit-Nachrichten mit …, statt sie in eine zweite Zeile umzubrechen.
Themes
Text.js bringt fünf Themes mit: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT und Geist Light. Drücke t in der Konsole, um sie durchzuschalten. Der gesamte Frame wird mit der neuen Palette neu gezeichnet, weil jede Farbe oben ein Token ist.
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 t.
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.