布局组件
<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" 将窗格纵向堆叠。