Teks & gaya
Atur gaya kartu deployment dengan warna, atribut teks, dan token tema.
Dalam bab ini
- Atribut teks
- Token tema
- Kartu deployment
- Tema
Setiap sel memiliki karakter, warna depan, latar belakang, dan sekumpulan atribut. Text.js mengompilasinya menjadi span CSS %c, sehingga konsol menampilkan warna asli, teks tebal, dan teks miring.
Atribut teks
<Text> menerima bold, dim, italic, underline, dan strikethrough. Elemen <Text> bersarang menjadi span bergaya dalam satu baris.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Token tema
Prop color menerima nilai heksadesimal, nama warna biasa (emerald), dan token tema; variasi warna palet Tailwind menggunakan kelas (text-emerald-400). Token mengikuti tema aktif, jadi utamakan token untuk segala hal yang bersifat semantik. Tambahkan komponen status:
Ditambahkan: import { Text } from "@textjs/app";Ditambahkan: Ditambahkan: export type DeployStatus = "ready" | "building" | "error" | "queued";Ditambahkan: Ditambahkan: export const STATUS = {Ditambahkan: ready: { label: "Ready", color: "success" },Ditambahkan: building: { label: "Building", color: "warning" },Ditambahkan: error: { label: "Error", color: "danger" },Ditambahkan: queued: { label: "Queued", color: "subtle" },Ditambahkan: } as const;Ditambahkan: Ditambahkan: export function Status({ status }: { status: DeployStatus }) {Ditambahkan: const s = STATUS[status];Ditambahkan: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Ditambahkan: }Kartu deployment
bg-surface membuat kartu tampak terangkat dari latar belakang. ID deployment menggunakan warna status, menjadi miring saat proses build berlangsung, dan dicoret saat terjadi error.
Dihapus: import { Box, Spacer, Text, useInput } from "@textjs/app";Ditambahkan: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Ditambahkan: import { Status, STATUS, type DeployStatus } from "./status";Ditambahkan: Ditambahkan: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Ditambahkan: export default function Page() {Ditambahkan: const { theme, cycleTheme } = useAppTheme();Ditambahkan: const [status, setStatus] = useState<DeployStatus>("ready");Ditambahkan: Ditambahkan: useInput((e) => {Ditambahkan: if (e.input === "t") cycleTheme();Ditambahkan: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Ditambahkan: });Ditambahkan: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Ditambahkan: <Box className="flex-col border rounded px-2 py-1 bg-surface">Ditambahkan: <Box className="flex-row gap-2 h-1">Ditambahkan: <Text bold>acme-web</Text>Ditambahkan: <Status status={status} />Ditambahkan: </Box>Ditambahkan: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Ditambahkan: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Ditambahkan: dpl_8fK2Ditambahkan: </Text>Ditambahkan: </Box> </Box> );}wrap="truncate-end" mengakhiri pesan commit yang panjang dengan … alih-alih melanjutkannya ke baris kedua.
Tema
Text.js menyertakan lima tema: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT, dan Geist Light. Tekan t di konsol untuk menggilirnya. Seluruh frame digambar ulang dengan palet baru, karena setiap warna di atas merupakan token.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan t.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.