版面配置元件
<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" />版面配置輔助元件
常見 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 時每次調整 5 個儲存格）。
<SplitPane defaultSize={0.3} resizable minSize={16}> <Sidebar /> <Content /></SplitPane>size 可以是比例（0.3）或儲存格數量（24）。direction="column" 會將窗格垂直堆疊。