注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
アプリケーションのルックアンドフィールをデザインすることは、興奮する見込みであり、Slate はウィジェットの外観の多くの側面をカスタマイズし、上書きする柔軟性を提供します。しかし、多くのプロジェクトでは、デザインのモックアップにピクセルパーフェクトに一致させることが、ワークフロー機能のクリーンで効率的な実装よりも重要になると、脱線します。
これを考える別の方法は、すべてのスタイルの上書きが、ユーザーのアプリケーションのシンプルさと保守性とのトレードオフであるということです。レイアウトとスタイリングの選択には注意深く、思慮深く選び、新しい機能開発の新たなラウンドに移る前に、定期的にアプリケーションをリファクタリングし、クリーンアップする時間をかけてください。
Container widgets を使用して、ユーザーのアプリケーションをレイアウトします。ユーザーのアプリケーションを論理的に整理するための十分なコンテナと、不必要にコンテナをネストすることとの間でバランスを取ります。アプリケーションを構築するにつれて、すべてのウィジェットが最終的にDocument Model (DOM) ↗ にいくつかの層を追加し、DOM の複雑さがブラウザのリソース使用量、ページの読み込み、およびユーザーのアプリケーションの一般的な応答性 - つまり、ユーザーのアプリケーションがどれだけ「重い」か - と直接的な関係があることを覚えておいてください。疑問がある場合は、ウィジェットを少なくし、コンテナを3 または 4 レベル以上深くネストするのを避けてみてください。
ほとんどすべてのケースで、CSS を使用してユーザーのアプリケーションのレイアウトに影響を与えることを避けるべきです - positionから離れて、静的なウィジェットの配置を使用するか、相対的な配置のためのフレックスコンテナを使用してください。ここには特定のケースでの例外がありますが、アプリケーションの一般的なレイアウトについては、組み込みの配置ツールに固執することで不要な複雑さを避け、アプリの可読性を向上させます。
Slate のしばしば見落とされる機能の1つは、ウィジェットを互いに整列する能力です。CTRL（MacではCMD）キーを押しながらクリックして、1つ以上のウィジェットを選択します。複数のウィジェットが選択されていると、右パネルはウィジェットの設定を表示するのではなく、ウィジェットを整列または分散させるいくつかのオプションを提示します。
さらに、ユーザーがレイアウトを「自動的に」行いたい場合は、Flex Container を使用して子ウィジェットをレイアウトできます。Flex コンテナの操作については、下の Responsive Layouts のセクションを参照してください。
動的なレイアウトには、アプリケーションの状態に基づいてコンテンツを表示または非表示にすることがよく含まれます。これを達成する方法はいくつかあります。以下の3つのパターンはいくつかのオプションを共有し、相対的な強みと弱みを議論します。
最も単純なケースでは、ウィジェットの表示設定の Additional Classes プロパティを hidden にテンプレート化することで、ウィジェットを非表示にできます。一般的なパターンは、関数（またはユーザーの状態変数）を使用してウィジェットが表示するべきかを決定し、その関数の出力をウィジェットにテンプレート化することです。これはシンプルですが、複数のウィジェットにはスケールしませんし、ページの読み込み時に「非表示」のウィジェットについては、依存関係グラフが解決し、クラスが適用されるまで見える状態が一瞬続くため、ちらつきが見られます。
特に複数のウィジェットがある場合、1つのタブが空白で、他のタブに表示するウィジェットが含まれているタブ付きコンテナを使用する方が良いでしょう。ここでのパターンは、コンテナの境界線と背景を隠す（つまり、コンテナを背景に対して「見えない」にする）少量の CSS を適用することです：