Boxによるレイアウト
セル単位のFlexboxで、トップバー、サイドバー、カードを備えたダッシュボードの外枠を作成します。
この章の内容
- トップバー
- サイドバーとカード
- 標準でレスポンシブ対応
コンソールはセルのグリッドです。Text.jsはReact Nativeと同じFlexboxエンジンのYogaでレイアウトするため、<Box> はCSSのflexboxルールに従います。単位はセルで、p-1 は横1列、縦1行のパディングです。
トップバー
多くの画面は縦方向の構成で、1行のバーの下に残りの要素が並びます。h-1 でバーの高さを固定し、grow でコンテンツに残りの領域を使わせます。
削除：import { Box, Text, useInput } from "@textjs/app";追加：import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (削除： <Box className="flex-col border rounded px-2 py-1">削除： <Text bold>▼ Acme Deploys</Text>削除： <Text color="muted">Hello, console.</Text>追加： <Box className="flex-col grow">追加： <Box className="flex-row h-1 px-1 gap-2 shrink-0">追加： <Text bold>▼ Acme</Text>追加： <Text color="subtle">acme.local</Text>追加： <Spacer />追加： </Box>追加： <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer> は伸長するボックスで、その後ろにある要素を右端へ押し出します。
サイドバーとカード
右側に罫線を持つ固定幅のサイドバーと、残りの幅を分け合う3枚のカードを追加します。basis-0 と grow を組み合わせると、内容に関係なく各カードに均等な幅が割り当てられます。
追加：const NAV = ["Overview", "Deployments", "Settings"];追加：追加：function Card({ title, value }: { title: string; value: string }) {追加： return (追加： <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>追加： <Text color="subtle">{title}</Text>追加： <Text bold>{value}</Text>追加： </Box>追加： );追加：}追加：export default function Page() {追加： const [sidebar, setSidebar] = useState(true);追加： const [stacked, setStacked] = useState(false);追加：追加： useInput((e) => {追加： if (e.input === "s") setSidebar((v) => !v);追加： if (e.input === "d") setStacked((v) => !v);追加： });追加： return ( <Box className="flex-col grow"> {/* top bar */}削除： <Box className="flex-row grow">{/* sidebar + cards */}</Box>追加： <Box className="flex-row grow">追加： {sidebar && (追加： <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">追加： {NAV.map((item) => <Text key={item}>{item}</Text>)}追加： </Box>追加： )}追加： <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>追加： <Card title="Production" value="acme-web" />追加： <Card title="Deployments" value="6 today" />追加： <Card title="Build time" value="38s p50" />追加： </Box>追加： </Box> </Box> );}コンソールで s と d を押します。Yogaがレイアウトを再計算し、変更された行のみを再描画するため、サイドバーの切り替えに必要なのは1回の console.log です。
標準でレスポンシブ対応
グリッドはドッキングされたDevToolsパネルに追従します。ドラッグしてコンソールの幅や高さを広げると、カードが再配置されます。ブレークポイントが必要な場合は、useBreakpoint() が現在のブレークポイントをセル単位で返します。
試す
これは章の終わりに完成するAcme Deploysで、DevToolsで動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、sを押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。