Layout com Box
Monte a estrutura do painel com Flexbox em células: uma barra superior, uma barra lateral e cartões.
Neste capítulo
- Uma barra superior
- Barra lateral e cartões
- Responsivo por padrão
O console é uma grade de células. O Text.js organiza o layout com Yoga, o mesmo motor de flexbox usado pelo React Native, então <Box> segue as regras de flexbox do CSS. As unidades são células: p-1 corresponde a uma coluna e uma linha de espaçamento interno.
Uma barra superior
A maioria das telas é uma coluna: uma barra de uma linha, depois todo o resto. Defina uma altura fixa para a barra com h-1 e deixe o conteúdo ocupar o restante com grow.
Removido: import { Box, Text, useInput } from "@textjs/app";Adicionado: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Removido: <Box className="flex-col border rounded px-2 py-1">Removido: <Text bold>▼ Acme Deploys</Text>Removido: <Text color="muted">Hello, console.</Text>Adicionado: <Box className="flex-col grow">Adicionado: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Adicionado: <Text bold>▼ Acme</Text>Adicionado: <Text color="subtle">acme.local</Text>Adicionado: <Spacer />Adicionado: </Box>Adicionado: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> é uma caixa que se expande: tudo depois dela é empurrado para a borda direita.
Barra lateral e cartões
Adicione uma barra lateral de largura fixa com uma borda à direita e três cartões que dividem a largura restante. basis-0 com grow dá a cada cartão uma parte igual, independentemente do seu conteúdo.
Adicionado: const NAV = ["Overview", "Deployments", "Settings"];Adicionado: Adicionado: function Card({ title, value }: { title: string; value: string }) {Adicionado: return (Adicionado: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Adicionado: <Text color="subtle">{title}</Text>Adicionado: <Text bold>{value}</Text>Adicionado: </Box>Adicionado: );Adicionado: }Adicionado: export default function Page() {Adicionado: const [sidebar, setSidebar] = useState(true);Adicionado: const [stacked, setStacked] = useState(false);Adicionado: Adicionado: useInput((e) => {Adicionado: if (e.input === "s") setSidebar((v) => !v);Adicionado: if (e.input === "d") setStacked((v) => !v);Adicionado: });Adicionado: return ( <Box className="flex-col grow"> {/* top bar */}Removido: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Adicionado: <Box className="flex-row grow">Adicionado: {sidebar && (Adicionado: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Adicionado: {NAV.map((item) => <Text key={item}>{item}</Text>)}Adicionado: </Box>Adicionado: )}Adicionado: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Adicionado: <Card title="Production" value="acme-web" />Adicionado: <Card title="Deployments" value="6 today" />Adicionado: <Card title="Build time" value="38s p50" />Adicionado: </Box>Adicionado: </Box> </Box> );}Pressione s e d no console. O Yoga recalcula o layout e apenas as linhas que mudaram são repintadas, então alternar a visibilidade da barra lateral custa um único console.log.
Responsivo por padrão
A grade acompanha o painel acoplado do DevTools. Arraste para aumentar a largura ou a altura do console e os cartões se reorganizam. Quando você precisar de breakpoints, useBreakpoint() retorna o atual, em células.
Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione s.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.