Stylowanie

Stylizuj komponenty za pomocą klas narzędziowych className lub typowanych propsów. Aplikacje Text.js nie mają arkuszy stylów.

#Klasy narzędziowe

className przyjmuje klasy narzędziowe w stylu Tailwind. Jedna jednostka to jedna komórka.

<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>

#Typowane propsy

Każda klasa narzędziowa ma odpowiadający jej prop. Propsy mają pierwszeństwo przed className.

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

#Kolory

Używaj kolorów szesnastkowych, nazw Tailwind lub tokenów motywu, takich jak fg, muted, surface, accent, success i danger. Tokeny odpowiadają aktywnemu motywowi.

#Motywy

Dostępnych jest pięć wbudowanych motywów: geistDark, geistLight, opencodeDark, tokyoNight i 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");

#Responsywne obszary widoku

Aplikacje domyślnie wypełniają zadokowaną konsolę DevTools (viewport.responsive) i zmieniają rozmiar podczas przeciągania panelu. Twórz layout za pomocą flex i odczytuj rozmiar, gdy go potrzebujesz:

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

Strona widzi tylko zadokowany panel. Odłączony panel DevTools, powiększenie DevTools i panel boczny „Konsola” są dla niej niewidoczne, więc aplikacja używa viewport.width × viewport.height (domyślnie 120×36) lub rozmiaru, który ustawisz na stałe:

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