レイアウト
以下の多くの機能は現在ベータ版であり、お客様への提供は間もなく開始されます。お客様の組織の設定において、Layout Improvementsトグルを使用してオプトインできます。
キャンバス
Retoolでアプリケーションの作成を始めるには、キャンバスにコンポーネントをドラッグ・アンド・ドロップします。キャンバスにはグリッドがあります。グリッドは以下のもので構成されています。
- 表示域いっぱいに広がる12個の列
- 高さが固定されている行
キャンバスにさらにコンポーネントをドラッグすると、必要に応じてグリッドが広がり行が追加されます。
キャンバスの最大幅は1560ピクセルですが、お客様がそれを構成するための設定が間もなく導入されます。
📘
コンポーネントをドラッグするときに、またはCMD/CTRLキーを押すことで、グリッドを確認してください。
コンポーネントの整列
コンポーネントは、Retoolアプリケーションの基本的な構成ブロックです。単純なText InputやButtonからTable、Chart、またはFormまで、40個以上のコンポーネントがあります。コンポーネントは、右側のパネルのComponentsタブから選択できます。自分のアプリケーションに新しいコンポーネントを追加するには、以下のように、キャンバスにそれをドラッグします。
一部のコンポーネントには、キャンバスにドラッグしたときにデフォルトのデータが含まれています。コンポーネントの構成(クエリーの結果への結び付けなど)についての詳細は、コンポーネントの使用を参照してください。
すべてのコンポーネントには、デフォルトのサイズ(例: 2列 x 5行)が設定されており、標準で余白が設定されています。キャンバス上のコンポーネントをドラッグ・アンド・ドロップして配置変更すると、レイアウトがどのように変わるかのライブ・プレビューが表示されます。使用可能領域内でコンポーネントを移動するには、矢印キーを使用します。
編集モードでは、キャンバス上のコンポーネントは非常にインタラクティブであるため、それがドラッグ・アンド・ドロップ操作の妨げになる場合があります。CMD/CTRLキーを押しながらクリックすると、相互作用なくコンポーネントを選択またはドラッグできます。
複数のコンポーネントを選択するには、クリックしてドラッグします。現在の選択内容にコンポーネントを追加するには、CMD/CTRLキーを押しながらクリックします。
まず、コンポーネントを選択し、その角または端でサイズを変更します。
実行中のドラッグ操作またはサイズ変更を取り消す場合は、ESCキーを押します。
コンポーネントを複製するには、ALTキーを押しながら新しいコンポーネントの配置先までドラッグします。
複数のコンポーネントのグループ化
Retoolでは、内部に12列のグリッドがある、柔軟性の高いコンテナー・コンポーネントが用意されています。コンテナーにコンポーネントを直接ドラッグできます。また、複数のコンテナーを互いにネストすることもできます。
ほとんどのコンテナーは、そのコンテンツに基づいて動的にサイズ変更できます。右側のパネルの Layout の下で Height を Hug contents に設定します。
高さが固定されているコンテナーの場合は、オーバーフローを Scroll または Hidden に設定できます。一部のコンテナーには、 Visible オーバーフローも用意されています。Scroll を選択した場合、エディター・モードでは常にスクロール・バーが表示されますが、アプリケーション・ビューアーでは、スクロールするコンテンツがある場合のみ表示されます。
Tabbed Container
Tabbed Containerでは、タブをいくつでも作成でき、各タブには固有のコンポーネント・グリッドがあります。タブ名にカーソルを重ねてコンポーネントを前後にドラッグします。
Hug contents を有効にした場合、Tabbed Containerは、現在選択しているタブのコンテンツに合わせてサイズ変更されます。
Modal
もう1つのコンテナー・コンポーネントはModalであり、ボタンをクリックすると新しいコンテナーがポップアップ表示されるというものです。Modalにコンポーネントを追加するには、そのコンポーネントを Open Modal ボタンにドラッグします。同様に、ドラッグ中にモーダルのXボタンにカーソルを重ねると、モーダルが閉じます。
Form
Formでは、複数の入力要素をグループ化できます。それにより、それらを同時に送信できます。任意のコンポーネントをFormにドラッグします。値が含まれているコンポーネント(TextInput、Checkboxなど)は、送信したフォーム・データに含まれます。
ListView
ListViewでは、繰り返し可能なコンポーネント行を作成できます。ListViewをクエリーの結果に結び付ける方法については、ListViewの使用を参照してください。1行目のコンポーネントの配置を変更すると、すべての行に影響があります。
動的なレイアウト
非表示のコンポーネント
Retool内のコンポーネントは、ブール条件に基づいて非表示にできます。例えば、Checkboxをオンにするとコンポーネントが非表示になるようにするとします。目的のコンポーネントを選択し、右側のInspectorタブの Display セクションに移動し、 Hide when true フィールドに{{ checkbox1.value }}を追加します。コンポーネントの Hide when true に該当すると、そのコンポーネントがRetoolグリッド内の領域を占有しなくなります。他のコンポーネントが上にずれてその空白が埋まります。
条件を評価できない場合(クエリーの結果が返されるまで待機している場合など)、コンポーネントはデフォルトで非表示になります。
レスポンシブ・デザイン
モバイル上でRetoolのコンポーネントを表示するには、右側のパネルのInspectorタブで Show on mobile をオンにします。その後、上部のバーにあるDesktopアイコンとMobileアイコンを切り替えることで、アプリケーションのデスクトップ・レイアウトおよびモバイル・レイアウトを表示します。
Updated over 2 years ago