レイアウトコンポーネント
<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>| プロパティ | 説明 |
|---|---|
className | セル用ユーティリティー |
border | single rounded double heavy dashed |
title | 上辺の罫線に埋め込むテキスト |
bg / fg | 背景色と文字色 |
overflow | hidden または scroll |
<Text>
インラインテキストです。ネストした <Text> はスタイル付きのスパンになります。
<Text wrap="truncate-end"> <Text bold>Deployed</Text> to <Text color="accent">production</Text></Text>| プロパティ | 説明 |
|---|---|
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>
2つのペインと区切り線です。resizable を指定すると、区切り線が Tab キーのフォーカス移動順に加わり、← → でサイズを変更できます（Shift 併用で5セルずつ）。
<SplitPane defaultSize={0.3} resizable minSize={16}> <Sidebar /> <Content /></SplitPane>size は比率（0.3）またはセル数（24）です。direction="column" はペインを縦に並べます。