30 - ウィジェットとセクションのリサイズ

この内容は、learn.palantir.com でもご覧いただけますが、アクセシビリティの観点から、ここに掲載しています。

📖 タスクの概要

Workshop では、ウィジェットやセクションのサイズを変更するために HTML や CSS を記述する必要はありません。ウィジェットのドキュメントに記載されているように、設定パネルを使用して、高さと幅を絶対値または相対値で設定できます。

たとえば、フィルターリストのウィジェットが狭くて、約10%拡大したいと思った場合、このタスクではセクションのサイズを変更する方法を1つ紹介します。これは、セクション内のウィジェットにも適用できます。

今後のチュートリアルで、レイアウトパターンやサイズ変更についてさらに実験する機会があります。

🔨 タスクの説明

レイアウトパネルの Section: Inbox Filters 項目をクリックし、右側の設定の DIMENSIONS エリアを確認してください。
- 既定では、ページは行レイアウトで設定されており、フィルターとテーブルのセクションは行の関係になっています。
フィルターセクションの Absolute 行幅は 300 ピクセルです。これを 350 に変更し、サイズ変更が反映されることを確認してください。
- 代わりに、絶対値ではなくオブジェクトテーブルに対して比例したサイズを定義することができます。
Section: Table セクションをクリックし、右側の設定の DIMENSIONS エリアを確認してください。テーブルセクションの Flex 値は 1 です。
- テーブルとフィルターサイズの比率を 3 対 1 にしたいとします。
テーブルセクションの Flex 値を 3 に変更してください。
再び Section: Inbox Filters 項目をクリックし、設定パネルの DIMENSIONS エリアで、Column Width オプションを Flex に変更し、値に 1 を入力してください。
- ℹ️ ウィジェット は、絶対値でリサイズすることも、他のウィジェットに対して相対的にリサイズすることもできます（Flex を使用）。対応する設定は、ウィジェットの設定パネルの Display タブにあります。
モジュールを保存して公開し、View モードでモジュールを確認してください。