注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
アプリケーションの外観や操作感をデザインするのは楽しみな作業です。Slate では、ウィジェットの外観のさまざまな要素を柔軟にカスタマイズしたり、オーバーライドしたりできます。しかし、多くのプロジェクトでは、ワークフロー機能をすっきりと効率的に実装することよりも、デザインのモックアップとピクセル単位で完全に一致させることが重視されると、本来の目的から外れてしまいます。
別の見方をすると、スタイルをオーバーライドするたびに、アプリケーションのシンプルさや保守性とのトレードオフが生じます。レイアウトとスタイルは慎重に検討して選び、新しい機能の開発を次に進める前に、定期的に時間を取ってアプリケーションをリファクタリングし、整理してください。
コンテナウィジェットを使ってアプリケーションをレイアウトします。アプリケーションを論理的に整理するために十分な数のコンテナを使いつつ、不必要なコンテナの入れ子は避けるよう、バランスを取ります。アプリケーションを作成していくと、どのウィジェットも最終的には Document Model (DOM) ↗ にいくつかの階層を追加すること、そして DOM の複雑さは、ブラウザーのリソース使用量、ページの読み込み、アプリケーション全般の応答性、つまりアプリケーションの「重さ」に直接関係することに留意してください。迷った場合は、ウィジェットの数を減らし、コンテナの入れ子の深さが3〜4階層を超えないようにします。
ほぼすべての場合において、アプリケーションのレイアウトを変更するために CSS を使うことは避けるべきです。position は使わず、ウィジェットの固定配置を使うか、相対配置には Flex コンテナを使います。特定のケースでは例外もありますが、アプリケーション全体のレイアウトでは、組み込みの配置ツールを使うことで、不必要な複雑さを避け、アプリを見やすくできます。
Slate で見落とされがちな機能として、ウィジェットを互いに揃える機能があります。CTRL キー（Mac では CMD キー）を押しながらクリックして、1個以上のウィジェットを選択します。複数のウィジェットを選択すると、右側のパネルにはウィジェットの設定が表示されなくなり、代わりにウィジェットを揃えたり等間隔に配置したりするためのオプションが表示されます。
さらに、レイアウトを「自動的に」行いたい場合は、Flex コンテナを使って子ウィジェットをレイアウトできます。Flex コンテナの使い方の詳細については、以下のレスポンシブレイアウトのセクションを参照してください。
動的なレイアウトでは、アプリケーションの状態に基づいてコンテンツを表示したり非表示にしたりすることがよくあります。これを実現する方法はいくつかあります。以下の3つのパターンでは、その選択肢とそれぞれの長所および短所を説明します。
最もシンプルなケースでは、ウィジェットの表示設定にある追加クラスプロパティをテンプレート化して hidden にすることで、ウィジェットを非表示にできます。一般的なパターンは、関数（または状態変数）を使ってウィジェットを表示するかどうかを判断し、その関数の出力をウィジェットにテンプレートとして組み込むことです。この方法はシンプルですが、複数のウィジェットへの適用にはあまり向いていません。また、ページの読み込み時に「非表示」となるウィジェットも、依存関係グラフの解決が完了し、クラスが適用されるまでは表示されるため、一瞬ちらつきが発生します。
特に複数のウィジェットを扱う場合は、1つのタブを空白にし、もう1つのタブに表示するウィジェットを配置したタブ付きコンテナを使う方が適しています。このパターンでは、少量の CSS を適用してコンテナの境界線と背景を非表示にします（つまり、背景に対してコンテナを「見えなく」します）。
Copied!1 2 3 4 5 6 7// これにより、「Additional Class」に「minimal」が指定されたすべてのコンテナから、 // ボーダーと背景が削除されます。 .minimal sl-app-container { border: none; background: none; }
次に、selectedTabIndex プロパティをテンプレート化して、非表示と表示を切り替えます。このパターンでは、ページの読み込み時にちらつきが発生せず、ウィジェットは瞬時に非表示になります。
ウィジェットを単に「非表示」にするだけでなく、DOM から完全に削除する必要がある場合は、親コンテナの追加クラスをテンプレート化し、ルート要素のセレクターでウィジェットを非表示にすることで実現できます。このパターンは、ウィジェットを非表示にすると同時に、同じ階層にあるほかの子ウィジェットを再配置する必要があるレスポンシブレイアウトで最もよく使われます。
すべての Slate ウィジェットのルート要素には、widget-[widgetName] という形式の ID セレクターがあります。たとえば、w_sidebar コンテナの子として w_myHTMLWidget という名前のウィジェットがあるとします。このウィジェットを完全に非表示にするには、グローバルスタイルでクラスを定義します。
.hide-myHTMLWidget {
#widget-myHTMLWidget {
display: none;
}
}
次に、w_sidebar でこのクラスを条件付きで追加すると、ウィジェット全体が非表示になります。条件付き CSS クラスを使うその他のパターンや例については、以下のスタイルを操作するセクションを参照してください。
アプリケーションを分割する最も一般的なパターンは、タブ付きコンテナを使うことです。コンテナの各タブを個別のページとして扱えますが、これらの「ページ」は単なる UI 機能であることを忘れないでください。たとえば、依存関係グラフの解決には影響しないため、チャートが別のタブにあっても、そのチャートにデータを入力するクエリは依存関係グラフの解決時に実行されます。
タブ付きコンテナを使って複数ページのアプリケーションを作成する場合は、遅延レンダリングを有効化オプションに必ずチェックを入れてください。これにより、タブ内のウィジェットのレンダリングは、ページの読み込み時ではなく、タブを開いたときに行われます。これは、どの時点でもウィジェットの大部分が別のタブで「非表示」になっている非常に大きなアプリケーションで特に有効であり、ページの読み込み時間を大幅に短縮できます。
ユーザーが特定のタブを手動で選択できないようにしたい場合でも、タブ付きコンテナを使うべきです。たとえば、ワークフローアプリを作成していて、ユーザーが次のタブに移動するタイミングを制御する必要がある場合が該当します。この場合、タブタイトルを表示オプションのチェックを外し、Handlebars ステートメントを使って、各時点で表示するタブ（0始まりのインデックス）をテンプレート化できます。一般的なパターンは、このタブをアプリケーションの状態の一部として管理することです（上記の状態を持つアプリケーションを作成するを参照）。これにより、状態変数内の現在のタブの値を更新するだけで、アプリケーションのタブが切り替わります。
お使いの Foundry インスタンスで、Flex コンテナを操作するチュートリアルを検索します。