लेआउट कंपोनेंट
<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> स्टाइल वाले span बनते हैं।
<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" />लेआउट हेल्पर
आम फ़्लेक्स व्यवस्थाओं के लिए शॉर्टहैंड।
<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" पेन को एक के नीचे एक रखता है।