سبک‌دهی

با ابزارهای className یا پراپ‌های نوع‌دار به کامپوننت‌ها استایل بدهید. برنامه‌های Text.js شیوه‌نامه ندارند.

#ابزارها

ویژگی className ابزارهایی به سبک Tailwind می‌پذیرد. هر واحد برابر با یک سلول است.

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

#پراپ‌های نوع‌دار

هر ابزار یک پراپ دارد. پراپ‌ها بر ویژگی className اولویت دارند.

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

#رنگ‌ها

از مقادیر هگز، نام‌های Tailwind یا توکن‌های پوسته مانند fg، muted، surface، accent، success و danger استفاده کنید. توکن‌ها از پوستهٔ فعال پیروی می‌کنند.

#پوسته‌ها

پنج پیش‌تنظیم داخلی ارائه می‌شود: geistDark، geistLight، opencodeDark، tokyoNight و 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");

#ناحیه‌های نمایش واکنش‌گرا

برنامه‌ها به‌طور پیش‌فرض کنسول DevTools متصل به پنجره را پر می‌کنند (viewport.responsive) و با کشیدن پنل، اندازه‌شان تغییر می‌کند. با flex چیدمان را تنظیم کنید و هر زمان نیاز داشتید اندازه را بخوانید:

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

صفحه فقط می‌تواند پنل متصل به پنجره را ببیند. DevTools جداشده، بزرگ‌نمایی DevTools و نوار کناری «کنسول» برای آن قابل مشاهده نیستند، بنابراین برنامه از viewport.width × viewport.height (مقدار پیش‌فرض 120×36) یا اندازه‌ای که شما ثابت می‌کنید استفاده می‌کند:

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