注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
ユーザーのアプリケーションの見た目と感じを設計することは、エキサイティングな見込みであり、Slateはウィジェットの外観の多くの側面をカスタマイズし、上書きする柔軟性を提供します。しかし、多くのプロジェクトでは、デザインモックアップにピクセルパーフェクトな一致を達成することが、ワークフロー機能のクリーンで効率的な実装よりも重要になるときに、脱線します。
これを考えるもう一つの方法は、すべてのスタイルの上書きがユーザーのアプリケーションのシンプルさとメンテナンス性に対する取引であるということです。ユーザーのレイアウトとスタイリングを選ぶ際には慎重で思慮深く、新しい機能開発の別のラウンドに移る前に定期的にアプリケーションをリファクタリングしてクリーンアップする時間を取ることです。
ユーザーのアプリケーションをレイアウトするために Container widgets を使用します。ユーザーのアプリケーションを論理的に整理するための十分なコンテナと、不必要にコンテナをネストすることとの間でバランスを取ります。ユーザーのアプリケーションを構築するにつれて、すべてのウィジェットが最終的に Document Model (DOM) にいくつかのレイヤーを追加し、DOMの複雑さがブラウザのリソース使用、ページロード、ユーザーのアプリケーションの一般的な反応性、つまり、ユーザーのアプリケーションがどれほど「重い」かということと直接的な関係があることを覚えておいてください。疑問がある場合は、ウィジェットを少なくし、コンテナを3または4レベル以上ネストすることを避けてみてください。
ほとんどの場合、ユーザーは CSS を使用してユーザーのアプリケーションの レイアウト を変更することを避けるべきです - position から遠ざかり、静的なウィジェットの位置決めを使用するか、相対的な位置決めのための flex コンテナを使用します。ここでは特定のケースでいくつかの例外がありますが、アプリケーションの一般的なレイアウトについては、組み込みの位置決めツールに従うことで不必要な複雑さを避け、ユーザーのアプリケーションの読みやすさを向上させることができます。
Slateのよく overlooked される機能の一つは、ウィジェットを他のウィジェットに対して整列させる能力です。CTRL（MacではCMD）キーを押しながらクリックして、一つ以上のウィジェットを選択します。複数のウィジェットが選択されていると、右のパネルはウィジェットの設定を表示するのではなく、ウィジェットを整列させたり分散させるためのいくつかのオプションを提示します。
さらに、ユーザーがレイアウトを「自動的に」行いたい場合、子ウィジェットのレイアウトに Flex Container を使用できます。Flex コンテナの使用については、以下の Responsive Layouts のセクションで詳しく説明します。
動的なレイアウトには、アプリケーションの状態に基づいてコンテンツを表示したり非表示にしたりすることがよく含まれます。これを達成する方法はいくつかあります。以下の3つのパターンはいくつかのオプションを共有し、相対的な強みと弱みを議論します。
最も単純なケースでは、ウィジェットの表示設定の Additional Classes プロパティを hidden にテンプレート化することでウィジェットを非表示にできます。一般的なパターンは、関数（またはユーザーの状態変数）を使用してウィジェットが表示するべきかどうかを判断し、その関数の出力をウィジェットにテンプレート化することです。これはシンプルですが、複数のウィジェットにはスケールしませんし、ページロード時に「隠された」ウィジェットのための一瞬のフリッカーを見るでしょう。これは、依存関係グラフが解決し、クラスが適用されるまで表示され続けるからです。
特に複数のウィジェットがある場合、一つのタブが空白で、他のタブに表示するウィジェットが含まれているタブ付きコンテナを使用する方が良いです。ここでのパターンは、コンテナの境界線と背景を隠す（つまり、コンテナを背景に対して「見えない」にする）ために少しの CSS を適用することです：
Copied!1 2 3 4 5 6// これは 'minimal' を 'Additional Class' として持つ任意のコンテナから、枠線と背景を削除します。 .minimal sl-app-container { border: none; // 枠線をなしに設定します。 background: none; // 背景をなしに設定します。 }
次に、selectedTabIndexプロパティをテンプレート化して、非表示と表示を切り替えます。このパターンを使用すると、ページの読み込み時にフリッカーが発生せず、ウィジェットが即座に非表示になります。
ウィジェットを「非表示」にするだけでなく、DOMから完全に削除する必要がある場合は、親コンテナに追加のクラスをテンプレート化して、ルート要素セレクタによってウィジェットを非表示にします。このパターンは、ウィジェットを非表示にして、同じレベルの他の子ウィジェットが自身を再配置する必要があるレスポンシブレイアウトで最も一般的です。
すべてのslateウィジェットのルート要素には、widget-[widgetName]のような形式でIDセレクタがあります。したがって、w_sidebarコンテナの子であるw_myHTMLWidgetというウィジェットがあるとしましょう。ウィジェットを完全に非表示にするには、グローバルスタイルでクラスを定義します：
.hide-myHTMLWidget {
#widget-myHTMLWidget {
// このスタイル規則は、指定されたHTMLウィジェットを非表示にします。
display: none;
}
}
次に、w_sidebar で条件付きにこのクラスを追加すると、ウィジェット全体が非表示になります。条件付きの CSS クラスを使用するためのさらなるパターンや例については、以下の スタイルとの連携 セクションを参照してください。
アプリケーションを区切る最も一般的なパターンは、タブ付きコンテナ を使用することです。それぞれのコンテナタブは別のページとして扱うことができますが、これらの「ページ」は単なる UI 機能であることを覚えておくことが重要です。例えば、依存関係グラフの解決には影響を与えません。そのため、別のタブにあるチャートであっても、そのチャートにデータを表示するためのクエリは、依存関係グラフの解決と同時に実行されます。
タブ付きコンテナを使用してマルチページアプリケーションを構築する場合は、Lazy rendering enabled オプションをチェックしてください。これにより、タブのウィジェットのレンダリングが ページの読み込み時 から タブが開いた時 に移動します。これは、特に大部分のウィジェットがいつでも別のタブに「隠れている」非常に大規模なアプリケーションに非常に便利であり、ページの読み込み時間を大幅に改善することができます。
ユーザーに特定のタブを手動で選択させたくない場合でも、タブ付きコンテナを使用する必要があります。例えば、ワークフローアプリケーションを構築しており、ユーザーが次のタブに移動するタイミングを制御する必要がある場合などです。この場合、Show tab titles オプションのチェックを外し、どのタブ（0 から始まるインデックス）がいつ表示されるべきかをテンプレート化するために Handlebars ステートメントを使用します。一般的なパターンは、アプリケーションの状態の一部としてこのタブを追跡することです（上記の 状態を持つアプリケーションの構築 を参照）。これにより、状態変数内の現在のタブの値を単純に更新するだけで、アプリケーション内のタブが変更されます。
Foundry インスタンス内で Working with Flex Containers チュートリアルを検索してください。