Metin ve biçimlendirme
Bir dağıtım kartını renkler, metin nitelikleri ve tema token’larıyla biçimlendirin.
Bu bölümde
- Metin öznitelikleri
- Tema token’ları
- Dağıtım kartı
- Temalar
Her hücrenin bir karakteri, ön planı, arka planı ve öznitelik kümesi vardır. Text.js bunları %c CSS span’lerine derler; böylece konsol gerçek renkleri, kalın ve italik yazıları gösterir.
Metin öznitelikleri
<Text> bileşeni bold, dim, italic, underline ve strikethrough alır. İç içe <Text> öğeleri, tek bir satır içinde stillendirilmiş span’lere dönüşür.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Tema token’ları
color prop’u hex değerlerini, yalın renk adlarını (emerald) ve tema token’larını kabul eder; Tailwind paletindeki tonlar sınıflarla (text-emerald-400) kullanılır. Token’lar etkin temayı izler, bu yüzden anlamsal renkler için bunları tercih edin. Bir durum bileşeni ekleyin:
Eklenen: import { Text } from "@textjs/app";Eklenen: Eklenen: export type DeployStatus = "ready" | "building" | "error" | "queued";Eklenen: Eklenen: export const STATUS = {Eklenen: ready: { label: "Ready", color: "success" },Eklenen: building: { label: "Building", color: "warning" },Eklenen: error: { label: "Error", color: "danger" },Eklenen: queued: { label: "Queued", color: "subtle" },Eklenen: } as const;Eklenen: Eklenen: export function Status({ status }: { status: DeployStatus }) {Eklenen: const s = STATUS[status];Eklenen: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Eklenen: }Dağıtım kartı
bg-surface kartı arka plandan öne çıkarır. Dağıtım kimliği durum rengini alır, derleme sırasında italik olur ve hata durumunda üstü çizilir.
Kaldırılan: import { Box, Spacer, Text, useInput } from "@textjs/app";Eklenen: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Eklenen: import { Status, STATUS, type DeployStatus } from "./status";Eklenen: Eklenen: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Eklenen: export default function Page() {Eklenen: const { theme, cycleTheme } = useAppTheme();Eklenen: const [status, setStatus] = useState<DeployStatus>("ready");Eklenen: Eklenen: useInput((e) => {Eklenen: if (e.input === "t") cycleTheme();Eklenen: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Eklenen: });Eklenen: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Eklenen: <Box className="flex-col border rounded px-2 py-1 bg-surface">Eklenen: <Box className="flex-row gap-2 h-1">Eklenen: <Text bold>acme-web</Text>Eklenen: <Status status={status} />Eklenen: </Box>Eklenen: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Eklenen: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Eklenen: dpl_8fK2Eklenen: </Text>Eklenen: </Box> </Box> );}wrap="truncate-end" uzun commit mesajlarını ikinci satıra kaydırmak yerine … ile bitirir.
Temalar
Text.js beş temayla gelir: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT ve Geist Light. Temalar arasında geçiş yapmak için konsolda t tuşuna basın. Yukarıdaki her renk bir token olduğu için karenin tamamı yeni paletle yeniden çizilir.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve t tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.