Layout dengan Box
Bangun kerangka dasbor dengan Flexbox dalam sel: bilah atas, bilah samping, dan kartu.
Dalam bab ini
- Bilah atas
- Bilah samping dan kartu
- Responsif secara default
Konsol adalah kisi sel. Text.js menatanya dengan Yoga, mesin flexbox yang juga digunakan React Native, sehingga <Box> mengikuti aturan CSS flexbox. Satuannya adalah sel: p-1 memberi padding satu kolom dan satu baris.
Bilah atas
Sebagian besar layar berupa kolom: bilah setinggi satu baris, lalu semua konten lainnya. Tetapkan tinggi bilah dengan h-1 dan biarkan konten mengisi sisanya dengan grow.
Dihapus: import { Box, Text, useInput } from "@textjs/app";Ditambahkan: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Dihapus: <Box className="flex-col border rounded px-2 py-1">Dihapus: <Text bold>▼ Acme Deploys</Text>Dihapus: <Text color="muted">Hello, console.</Text>Ditambahkan: <Box className="flex-col grow">Ditambahkan: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Ditambahkan: <Text bold>▼ Acme</Text>Ditambahkan: <Text color="subtle">acme.local</Text>Ditambahkan: <Spacer />Ditambahkan: </Box>Ditambahkan: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> adalah kotak yang membesar: apa pun setelahnya terdorong ke tepi kanan.
Bilah samping dan kartu
Tambahkan bilah samping berlebar tetap dengan garis tepi kanan dan tiga kartu yang berbagi lebar tersisa. basis-0 bersama grow memberi setiap kartu bagian yang sama terlepas dari isinya.
Ditambahkan: const NAV = ["Overview", "Deployments", "Settings"];Ditambahkan: Ditambahkan: function Card({ title, value }: { title: string; value: string }) {Ditambahkan: return (Ditambahkan: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Ditambahkan: <Text color="subtle">{title}</Text>Ditambahkan: <Text bold>{value}</Text>Ditambahkan: </Box>Ditambahkan: );Ditambahkan: }Ditambahkan: export default function Page() {Ditambahkan: const [sidebar, setSidebar] = useState(true);Ditambahkan: const [stacked, setStacked] = useState(false);Ditambahkan: Ditambahkan: useInput((e) => {Ditambahkan: if (e.input === "s") setSidebar((v) => !v);Ditambahkan: if (e.input === "d") setStacked((v) => !v);Ditambahkan: });Ditambahkan: return ( <Box className="flex-col grow"> {/* top bar */}Dihapus: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Ditambahkan: <Box className="flex-row grow">Ditambahkan: {sidebar && (Ditambahkan: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Ditambahkan: {NAV.map((item) => <Text key={item}>{item}</Text>)}Ditambahkan: </Box>Ditambahkan: )}Ditambahkan: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Ditambahkan: <Card title="Production" value="acme-web" />Ditambahkan: <Card title="Deployments" value="6 today" />Ditambahkan: <Card title="Build time" value="38s p50" />Ditambahkan: </Box>Ditambahkan: </Box> </Box> );}Tekan s dan d di konsol. Yoga menghitung ulang layout dan hanya baris yang berubah yang digambar ulang, sehingga menampilkan atau menyembunyikan bilah samping hanya memerlukan satu console.log.
Responsif secara default
Kisi mengikuti panel DevTools yang ditambatkan. Seret konsol agar lebih lebar atau lebih tinggi dan kartu akan menata ulang posisinya. Saat Anda memerlukan breakpoint, useBreakpoint() mengembalikan breakpoint saat ini, dalam sel.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan s.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.