التنسيق

نسّق المكوّنات باستخدام أدوات 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