اسٹائلنگ

کمپوننٹس کو 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