Макет с Box
Создайте каркас панели на Flexbox в ячейках: верхнюю панель, боковую панель и карточки.
В этой главе
- Верхняя панель
- Боковая панель и карточки
- Адаптивность по умолчанию
Консоль — это сетка ячеек. Text.js строит её макет с помощью Yoga, того же движка flexbox, который использует React Native, поэтому <Box> следует правилам CSS flexbox. Единицы измерения — ячейки: p-1 задаёт внутренний отступ в один столбец и одну строку.
Верхняя панель
Большинство экранов устроены как столбец: панель высотой в одну строку, затем всё остальное. Задайте панели фиксированную высоту с помощью h-1, а содержимому отдайте оставшееся место с помощью grow.
Удалено: import { Box, Text, useInput } from "@textjs/app";Добавлено: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Удалено: <Box className="flex-col border rounded px-2 py-1">Удалено: <Text bold>▼ Acme Deploys</Text>Удалено: <Text color="muted">Hello, console.</Text>Добавлено: <Box className="flex-col grow">Добавлено: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Добавлено: <Text bold>▼ Acme</Text>Добавлено: <Text color="subtle">acme.local</Text>Добавлено: <Spacer />Добавлено: </Box>Добавлено: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> — это растягивающийся блок: всё, что идёт после него, сдвигается к правому краю.
Боковая панель и карточки
Добавьте боковую панель фиксированной ширины с правой границей и три карточки, которые делят оставшуюся ширину. basis-0 вместе с grow выделяет каждой карточке равную долю независимо от её содержимого.
Добавлено: const NAV = ["Overview", "Deployments", "Settings"];Добавлено: Добавлено: function Card({ title, value }: { title: string; value: string }) {Добавлено: return (Добавлено: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Добавлено: <Text color="subtle">{title}</Text>Добавлено: <Text bold>{value}</Text>Добавлено: </Box>Добавлено: );Добавлено: }Добавлено: export default function Page() {Добавлено: const [sidebar, setSidebar] = useState(true);Добавлено: const [stacked, setStacked] = useState(false);Добавлено: Добавлено: useInput((e) => {Добавлено: if (e.input === "s") setSidebar((v) => !v);Добавлено: if (e.input === "d") setStacked((v) => !v);Добавлено: });Добавлено: return ( <Box className="flex-col grow"> {/* top bar */}Удалено: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Добавлено: <Box className="flex-row grow">Добавлено: {sidebar && (Добавлено: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Добавлено: {NAV.map((item) => <Text key={item}>{item}</Text>)}Добавлено: </Box>Добавлено: )}Добавлено: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Добавлено: <Card title="Production" value="acme-web" />Добавлено: <Card title="Deployments" value="6 today" />Добавлено: <Card title="Build time" value="38s p50" />Добавлено: </Box>Добавлено: </Box> </Box> );}Нажмите s и d в консоли. Yoga пересчитывает макет, и перерисовываются только изменившиеся строки, поэтому переключение боковой панели обходится одним вызовом console.log.
Адаптивность по умолчанию
Сетка подстраивается под закреплённую панель DevTools. Растяните консоль в ширину или высоту, и карточки перестроятся. Если вам нужны контрольные точки, useBreakpoint() возвращает текущую в ячейках.
Попробовать
Это Acme Deploys в конце главы, работающее в DevTools. Нажмите на панель, затем используйте клавиши ниже.
Открыть консоль
Приложение рендерится в DevTools.Сначала включите «Показывать функции для веб-разработчиков» в Safari: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите s.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.
Тест
2 вопросаОтветьте на все вопросы, чтобы завершить главу.