레이아웃 컴포넌트
<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"은 패널을 세로로 쌓아요.