Component layout
<Box>, <Text>, <ScrollBox>, <Modal>, <SplitPane>, <Stack>, <Grid>, <Spacer>, <Divider> và <Badge>.
Các thành phần cơ bản này sắp xếp lưới ô bằng Yoga flexbox.
<Box>
Vùng chứa layout.
Trực tiếp64×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 | Mô tả |
|---|---|
className | Tiện ích cho ô |
border | single rounded double heavy dashed |
title | Văn bản lồng trong viền trên |
bg / fg | Màu nền và màu chữ |
overflow | hidden hoặc scroll |
<Text>
Văn bản nội dòng. <Text> lồng nhau trở thành các span có định dạng.
<Text wrap="truncate-end"> <Text bold>Deployed</Text> to <Text color="accent">production</Text></Text>| Prop | Mô tả |
|---|---|
color | Màu chữ |
bold italic underline dim | Thuộc tính |
wrap | wrap nowrap truncate-end |
<ScrollBox>
Một cột có thể cuộn. stickyScroll ghim ở cuối khi nội dung tăng lên.
Trực tiếp60×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>
Một lớp phủ ở giữa làm mờ nội dung bên dưới và giữ tiêu điểm bên trong.
Trực tiếp72×14 · booting Turbolog…tsx
<Modal title=" Commands " onClose={() => setOpen(false)} width={48}> <Select searchable autoFocus options={commands} onChange={run} /></Modal>Spacer, Divider và Badge
<Spacer /><Divider title="Deployments" /><Badge variant="success">READY</Badge><KeyHint keys="⌘K" label="search" />Tiện ích layout
Cách viết tắt cho các kiểu sắp xếp flex thường dùng.
<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>
Hai ngăn và một thanh phân cách. Với resizable, thanh phân cách tham gia thứ tự Tab và ← → điều chỉnh kích thước ngăn (Shift để thay đổi năm ô).
<SplitPane defaultSize={0.3} resizable minSize={16}> <Sidebar /> <Content /></SplitPane>size là một tỷ lệ (0.3) hoặc số ô (24). direction="column" xếp chồng các ngăn.