Box ile layout
Pano iskeletini hücrelerde Flexbox ile oluşturun: bir üst çubuk, bir kenar çubuğu ve kartlar.
Bu bölümde
- Üst çubuk
- Kenar çubuğu ve kartlar
- Varsayılan olarak duyarlı
Konsol, hücrelerden oluşan bir ızgaradır. Text.js, layout için React Native’in de kullandığı Flexbox motoru Yoga’yı kullanır, bu nedenle <Box> CSS flexbox kurallarını izler. Birimler hücre cinsindendir: p-1, bir sütun ve bir satır iç boşluktur.
Üst çubuk
Çoğu ekran bir sütundur: önce tek satırlık bir çubuk, ardından geri kalan her şey gelir. Çubuğa h-1 ile sabit bir yükseklik verin ve grow ile içeriğin kalan alanı kaplamasını sağlayın.
Kaldırılan: import { Box, Text, useInput } from "@textjs/app";Eklenen: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (Kaldırılan: <Box className="flex-col border rounded px-2 py-1">Kaldırılan: <Text bold>▼ Acme Deploys</Text>Kaldırılan: <Text color="muted">Hello, console.</Text>Eklenen: <Box className="flex-col grow">Eklenen: <Box className="flex-row h-1 px-1 gap-2 shrink-0">Eklenen: <Text bold>▼ Acme</Text>Eklenen: <Text color="subtle">acme.local</Text>Eklenen: <Spacer />Eklenen: </Box>Eklenen: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> büyüyen bir kutudur: ardından gelen her şey sağ kenara itilir.
Kenar çubuğu ve kartlar
Sağ kenarlığı olan sabit genişlikte bir kenar çubuğu ve kalan genişliği paylaşan üç kart ekleyin. basis-0, grow ile birlikte her karta içeriğinden bağımsız olarak eşit pay verir.
Eklenen: const NAV = ["Overview", "Deployments", "Settings"];Eklenen: Eklenen: function Card({ title, value }: { title: string; value: string }) {Eklenen: return (Eklenen: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>Eklenen: <Text color="subtle">{title}</Text>Eklenen: <Text bold>{value}</Text>Eklenen: </Box>Eklenen: );Eklenen: }Eklenen: export default function Page() {Eklenen: const [sidebar, setSidebar] = useState(true);Eklenen: const [stacked, setStacked] = useState(false);Eklenen: Eklenen: useInput((e) => {Eklenen: if (e.input === "s") setSidebar((v) => !v);Eklenen: if (e.input === "d") setStacked((v) => !v);Eklenen: });Eklenen: return ( <Box className="flex-col grow"> {/* top bar */}Kaldırılan: <Box className="flex-row grow">{/* sidebar + cards */}</Box>Eklenen: <Box className="flex-row grow">Eklenen: {sidebar && (Eklenen: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">Eklenen: {NAV.map((item) => <Text key={item}>{item}</Text>)}Eklenen: </Box>Eklenen: )}Eklenen: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>Eklenen: <Card title="Production" value="acme-web" />Eklenen: <Card title="Deployments" value="6 today" />Eklenen: <Card title="Build time" value="38s p50" />Eklenen: </Box>Eklenen: </Box> </Box> );}Konsolda s ve d tuşlarına basın. Yoga layout’u yeniden hesaplar ve yalnızca değişen satırlar yeniden boyanır, bu nedenle kenar çubuğunu açıp kapatmanın maliyeti tek bir console.log çağrısıdır.
Varsayılan olarak duyarlı
Izgara, kenara sabitlenmiş DevTools paneline uyum sağlar. Konsolu sürükleyerek genişletin veya yüksekliğini artırın; kartlar yeniden yerleşir. Kırılma noktalarına ihtiyaç duyduğunuzda useBreakpoint() geçerli olanı hücre cinsinden döndürür.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve s tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.