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

📖 タスクの概要

Workshop は、ウィジェットやセクションのサイズを変更するために HTML や CSS を書く必要がないように抽象化しています。ウィジェットのドキュメンテーションで読んだように、設定パネルを使って、高さと幅を絶対値または相対値で設定することができます。

例えば、フィルター処理するリストのウィジェットが窮屈すぎて、約10%拡大することを決めたとしましょう。このタスクでは、セクションのサイズを変更する一つの方法を説明します。これは、それらのセクション内のウィジェットにも適用できます。

今後のチュートリアルで、レイアウトパターンやサイズの実験をする機会が増えます。

🔨 タスクの説明

1. レイアウトパネルの セクション: 受信フィルター 項目をクリックし、右側の設定の DIMENSIONS エリアを見てください。

   • デフォルトでは、ユーザーのページは 行 レイアウトに設定されています。これは、フィルターとテーブルのセクションが 行列 の関係を持っていることを意味します。

2. フィルターセクションの 絶対 行幅は 300 ピクセルです。それを 350 に変更して、サイズの変更を観察してください。

   • あなたは、絶対値ではなく、オブジェクトテーブルに対して比例したサイズを定義したいかもしれません。

3. セクション: テーブル セクションにクリックして、右側の設定の DIMENSIONS エリアを見てください。ユーザーのテーブルセクションの Flex 値は 1 です。

   • テーブルとフィルターサイズの比率を3対1にしたいとしましょう。

4. テーブルセクションの Flex 値を 3 に変更します。

5. セクション: 受信フィルター 項目に戻ってクリックし、設定パネルの DIMENSIONS エリアで 行幅 オプションを Flex に変更し、値 1 を入力します。

   • ℹ️ ウィジェット は、絶対値または相対値（Flexを使用）で他のウィジェットに対してサイズを変更することができます。対応する設定は、ウィジェットの設定パネルの Display タブで見つけることができます。

6. モジュールを保存し、公開した後、View モードでモジュールを確認します。