Layout avec Box
Construisez la structure du tableau de bord avec Flexbox en cellules : une barre supérieure, une barre latérale et des cartes.
Dans ce chapitre
- Une barre supérieure
- Barre latérale et cartes
- Adaptation par défaut
La console est une grille de cellules. Text.js utilise Yoga pour son layout, le même moteur flexbox que React Native, donc <Box> suit les règles CSS de flexbox. Les unités sont des cellules : p-1 correspond à une colonne et une ligne de marge intérieure.
Une barre supérieure
La plupart des écrans forment une colonne : une barre d’une ligne, puis tout le reste. Donnez à la barre une hauteur fixe avec h-1 et laissez le contenu occuper le reste avec grow.
Supprimé : import { Box, Text, useInput } from "@textjs/app";Ajouté : import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Supprimé : <Box className="flex-col border rounded px-2 py-1">Supprimé : <Text bold>▼ Acme Deploys</Text>Supprimé : <Text color="muted">Hello, console.</Text>Ajouté : <Box className="flex-col grow">Ajouté : <Box className="flex-row h-1 px-1 gap-2 shrink-0">Ajouté : <Text bold>▼ Acme</Text>Ajouté : <Text color="subtle">acme.local</Text>Ajouté : <Spacer />Ajouté : </Box>Ajouté : <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> est une boîte qui s’étend : tout ce qui la suit est poussé vers le bord droit.
Barre latérale et cartes
Ajoutez une barre latérale de largeur fixe avec une bordure droite et trois cartes qui se partagent la largeur restante. basis-0 associé à grow donne à chaque carte une part égale, quel que soit son contenu.
Ajouté : const NAV = ["Overview", "Deployments", "Settings"];Ajouté : Ajouté : function Card({ title, value }: { title: string; value: string }) {Ajouté : return (Ajouté : <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Ajouté : <Text color="subtle">{title}</Text>Ajouté : <Text bold>{value}</Text>Ajouté : </Box>Ajouté : );Ajouté : }Ajouté : export default function Page() {Ajouté : const [sidebar, setSidebar] = useState(true);Ajouté : const [stacked, setStacked] = useState(false);Ajouté : Ajouté : useInput((e) => {Ajouté : if (e.input === "s") setSidebar((v) => !v);Ajouté : if (e.input === "d") setStacked((v) => !v);Ajouté : });Ajouté : return ( <Box className="flex-col grow"> {/* top bar */}Supprimé : <Box className="flex-row grow">{/* sidebar + cards */}</Box>Ajouté : <Box className="flex-row grow">Ajouté : {sidebar && (Ajouté : <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Ajouté : {NAV.map((item) => <Text key={item}>{item}</Text>)}Ajouté : </Box>Ajouté : )}Ajouté : <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Ajouté : <Card title="Production" value="acme-web" />Ajouté : <Card title="Deployments" value="6 today" />Ajouté : <Card title="Build time" value="38s p50" />Ajouté : </Box>Ajouté : </Box> </Box> );}Appuyez sur s et d dans la console. Yoga recalcule le layout et seules les lignes modifiées sont redessinées, donc afficher ou masquer la barre latérale ne coûte qu’un seul console.log.
Adaptation par défaut
La grille suit le panneau DevTools ancré. Élargissez ou agrandissez la console en faisant glisser son bord et les cartes se réorganisent. Lorsque vous avez besoin de points de rupture, useBreakpoint() renvoie le point de rupture actuel, en cellules.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur s.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.