Stillendirme

Bileşenleri className yardımcı sınıfları veya tür tanımlı prop’larla biçimlendirin. Text.js uygulamalarında stil sayfaları yoktur.

#Yardımcı sınıflar

className, Tailwind tarzı yardımcı sınıflar alır. Bir birim bir hücredir.

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#Tür tanımlı prop’lar

Her yardımcı sınıfın bir prop karşılığı vardır. Prop’lar className değerinden önceliklidir.

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#Renkler

Hex değerleri, Tailwind adları veya fg, muted, surface, accent, success ve danger gibi tema token’ları kullanın. Token’lar etkin temayı izler.

#Temalar

Beş hazır tema yerleşik olarak sunulur: geistDark, geistLight, opencodeDark, tokyoNight ve amberCrt.

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#Duyarlı görünüm alanları

Uygulamalar varsayılan olarak sabitlenmiş DevTools konsolunu doldurur (viewport.responsive) ve paneli sürüklediğinizde yeniden boyutlanır. Layout için flex kullanın ve gerektiğinde boyutu okuyun:

const { cols } = useViewport();const sidebar = cols >= 90;

Sayfa yalnızca sabitlenmiş bir paneli görebilir. Ayrı penceredeki DevTools’u, DevTools yakınlaştırmasını ve Konsol kenar çubuğunu göremez; bu nedenle uygulama viewport.width × viewport.height (varsayılan 120×36) veya sizin sabitlediğiniz bir boyutu kullanır:

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again