لے آؤٹ کمپوننٹس
<Box>، <Text>، <ScrollBox>، <Modal>، <SplitPane>، <Stack>، <Grid>، <Spacer>، <Divider> اور <Badge>۔
یہ بنیادی کمپوننٹس Yoga flexbox سے سیل گرڈ کا لے آؤٹ بناتے ہیں۔
<Box>
لے آؤٹ کا کنٹینر۔
لائیو64×14 · booting Turbolog…tsx
<Box className="flex-row gap-2 p-1 border rounded"> <Box className="flex-col grow border rounded px-1 bg-surface"> <Text bold>Sidebar</Text> </Box> <Box className="flex-col grow border rounded px-1 border-accent"> <Text color="accent">Content</Text> </Box></Box>| Prop | تفصیل |
|---|---|
className | سیل یوٹیلٹیز |
border | single rounded double heavy dashed |
title | اوپری بارڈر میں شامل متن |
bg / fg | پس منظر اور متن کا رنگ |
overflow | hidden یا scroll |
<Text>
ان لائن متن۔ نیسٹڈ <Text> اسٹائل والے spans میں بدل جاتا ہے۔
<Text wrap="truncate-end"> <Text bold>Deployed</Text> to <Text color="accent">production</Text></Text>| Prop | تفصیل |
|---|---|
color | متن کا رنگ |
bold italic underline dim | خصوصیات |
wrap | wrap nowrap truncate-end |
<ScrollBox>
اسکرول ہونے والا کالم۔ مواد بڑھنے پر stickyScroll اسکرول کو نچلے سرے پر رکھتا ہے۔
لائیو60×12 · booting Turbolog…tsx
<ScrollBox stickyScroll focusable className="border rounded px-1" height={8}> {logs.map((line, i) => <Text key={i}>{line}</Text>)}</ScrollBox><Modal>
درمیان میں موجود اوورلے جو نیچے کے مواد کو مدھم کرتا ہے اور فوکس کو اپنے اندر رکھتا ہے۔
لائیو72×14 · booting Turbolog…tsx
<Modal title=" Commands " onClose={() => setOpen(false)} width={48}> <Select searchable autoFocus options={commands} onChange={run} /></Modal>Spacer، Divider اور Badge
<Spacer /><Divider title="Deployments" /><Badge variant="success">READY</Badge><KeyHint keys="⌘K" label="search" />لے آؤٹ ہیلپرز
عام flex ترتیبوں کے لیے مختصر طریقے۔
<Center> <Text>Nothing deployed yet</Text></Center><Stack gap={1} divider> <Overview /> <Deployments /></Stack><Grid columns={3} gap={1}> {metrics.map((m) => <Metric key={m.id} {...m} />)}</Grid><SplitPane>
دو پین اور ایک ڈیوائیڈر۔ resizable کے ساتھ ڈیوائیڈر Tab کی ترتیب میں شامل ہو جاتا ہے اور ← → اس کا سائز بدلتے ہیں (پانچ سیل کے لیے Shift)۔
<SplitPane defaultSize={0.3} resizable minSize={16}> <Sidebar /> <Content /></SplitPane>size ایک کسر (0.3) یا سیل کی تعداد (24) ہے۔ direction="column" پین کو ایک کے نیچے ایک رکھتا ہے۔