Layout z Box
Zbuduj szkielet panelu za pomocą Flexbox w komórkach: górny pasek, pasek boczny i karty.
W tym rozdziale
- Górny pasek
- Panel boczny i karty
- Domyślna responsywność
Konsola to siatka komórek. Text.js układa ją za pomocą Yoga, tego samego silnika flexbox, którego używa React Native, więc <Box> stosuje reguły CSS flexbox. Jednostkami są komórki: p-1 to jedna kolumna i jeden wiersz wewnętrznego odstępu.
Górny pasek
Większość ekranów ma układ kolumnowy: pasek o wysokości jednego wiersza, a pod nim cała reszta. Nadaj paskowi stałą wysokość za pomocą h-1 i pozwól treści zająć resztę za pomocą grow.
Usunięto: import { Box, Text, useInput } from "@textjs/app";Dodano: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Usunięto: <Box className="flex-col border rounded px-2 py-1">Usunięto: <Text bold>▼ Acme Deploys</Text>Usunięto: <Text color="muted">Hello, console.</Text>Dodano: <Box className="flex-col grow">Dodano: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Dodano: <Text bold>▼ Acme</Text>Dodano: <Text color="subtle">acme.local</Text>Dodano: <Spacer />Dodano: </Box>Dodano: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> to rosnący kontener: wszystko za nim jest przesuwane do prawej krawędzi.
Panel boczny i karty
Dodaj panel boczny o stałej szerokości z prawym obramowaniem oraz trzy karty, które dzielą pozostałą szerokość. basis-0 wraz z grow daje każdej karcie równy udział niezależnie od jej zawartości.
Dodano: const NAV = ["Overview", "Deployments", "Settings"];Dodano: Dodano: function Card({ title, value }: { title: string; value: string }) {Dodano: return (Dodano: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Dodano: <Text color="subtle">{title}</Text>Dodano: <Text bold>{value}</Text>Dodano: </Box>Dodano: );Dodano: }Dodano: export default function Page() {Dodano: const [sidebar, setSidebar] = useState(true);Dodano: const [stacked, setStacked] = useState(false);Dodano: Dodano: useInput((e) => {Dodano: if (e.input === "s") setSidebar((v) => !v);Dodano: if (e.input === "d") setStacked((v) => !v);Dodano: });Dodano: return ( <Box className="flex-col grow"> {/* top bar */}Usunięto: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Dodano: <Box className="flex-row grow">Dodano: {sidebar && (Dodano: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Dodano: {NAV.map((item) => <Text key={item}>{item}</Text>)}Dodano: </Box>Dodano: )}Dodano: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Dodano: <Card title="Production" value="acme-web" />Dodano: <Card title="Deployments" value="6 today" />Dodano: <Card title="Build time" value="38s p50" />Dodano: </Box>Dodano: </Box> </Box> );}Naciśnij s i d w konsoli. Yoga przelicza layout, a ponownie rysowane są tylko zmienione wiersze, więc przełączenie widoczności panelu bocznego kosztuje jedno wywołanie console.log.
Domyślna responsywność
Siatka dopasowuje się do zadokowanego panelu DevTools. Przeciągnij krawędź konsoli, aby zwiększyć jej szerokość lub wysokość, a karty zmienią układ. Gdy potrzebujesz progów responsywności, useBreakpoint() zwraca aktualny próg w komórkach.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij s.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.