Tekst i style
Nadaj karcie wdrożenia kolory, atrybuty tekstu i tokeny motywu.
W tym rozdziale
- Atrybuty tekstu
- Tokeny motywu
- Karta wdrożenia
- Motywy
Każda komórka ma znak, kolor tekstu, tło i zestaw atrybutów. Text.js kompiluje je do spanów CSS %c, dzięki czemu konsola wyświetla rzeczywiste kolory, pogrubienie i kursywę.
Atrybuty tekstu
<Text> przyjmuje bold, dim, italic, underline i strikethrough. Zagnieżdżone elementy <Text> stają się stylizowanymi spanami w obrębie jednego wiersza.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Tokeny motywu
Prop color przyjmuje wartości szesnastkowe, zwykłe nazwy kolorów (emerald) i tokeny motywu; odcienie z palety Tailwind stosuje się przez klasy (text-emerald-400). Tokeny dostosowują się do aktywnego motywu, więc wybieraj je do wszystkiego, co ma znaczenie semantyczne. Dodaj komponent statusu:
Dodano: import { Text } from "@textjs/app";Dodano: Dodano: export type DeployStatus = "ready" | "building" | "error" | "queued";Dodano: Dodano: export const STATUS = {Dodano: ready: { label: "Ready", color: "success" },Dodano: building: { label: "Building", color: "warning" },Dodano: error: { label: "Error", color: "danger" },Dodano: queued: { label: "Queued", color: "subtle" },Dodano: } as const;Dodano: Dodano: export function Status({ status }: { status: DeployStatus }) {Dodano: const s = STATUS[status];Dodano: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Dodano: }Karta wdrożenia
bg-surface wyróżnia kartę na tle. Identyfikator wdrożenia przyjmuje kolor statusu, podczas budowania jest zapisany kursywą, a przy błędzie zostaje przekreślony.
Usunięto: import { Box, Spacer, Text, useInput } from "@textjs/app";Dodano: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Dodano: import { Status, STATUS, type DeployStatus } from "./status";Dodano: Dodano: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Dodano: export default function Page() {Dodano: const { theme, cycleTheme } = useAppTheme();Dodano: const [status, setStatus] = useState<DeployStatus>("ready");Dodano: Dodano: useInput((e) => {Dodano: if (e.input === "t") cycleTheme();Dodano: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Dodano: });Dodano: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Dodano: <Box className="flex-col border rounded px-2 py-1 bg-surface">Dodano: <Box className="flex-row gap-2 h-1">Dodano: <Text bold>acme-web</Text>Dodano: <Status status={status} />Dodano: </Box>Dodano: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Dodano: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Dodano: dpl_8fK2Dodano: </Text>Dodano: </Box> </Box> );}wrap="truncate-end" kończy długie opisy commitów znakiem …, zamiast zawijać je do drugiego wiersza.
Motywy
Text.js zawiera pięć motywów: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT i Geist Light. Naciśnij t w konsoli, aby przełączać je po kolei. Cała klatka jest ponownie rysowana w nowej palecie, ponieważ każdy kolor powyżej jest tokenem.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij t.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.