注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
SlateはPalantirのオープンソースBlueprintフレームワークの上に構築されており、他のウェブサイトと同様に、DOMはCSSを使用してスタイルを設定します。これにより、ウィジェットの外観や感じに一貫性がもたらされ、"ダークモード"への切り替えも組み込まれています。これらは "スキン" や "テンプレート" ではなく、各Slateウィジェットに組み込まれています。
これは、ユーザーのアプリケーション設計が特定のUIを求める場合、開発努力は新しいルールを提供するスタイルのオーバーライドセットに集中することを意味します。これは複雑さを増す要素であり、Slateのデフォルトスタイルがどこに適用されているかを理解し、それをオーバーライドするための正確な特異性レベルでCSSセレクタを生成する必要があります。
ユーザーのアプリでスタイルを開発する際の最良の友人は、Chrome Developer Tools - 特に “Inspector” - であり、ウェブページの任意の要素のレンダリングされたHTMLとCSSを表示することができます。右クリック → “Inspect” は、クリックされた要素を強調表示してInspectorを開きます。これは、どのクラスがどの要素に適用されているか、したがってどのクラスを拡張または上書きする必要があるかを識別するための鍵となります。
技術的には、Slateアプリ内で書くCSSは、Less ↗と呼ばれる事前コンパイラ方言です。Lessは冗長なCSSをストリーミングする構文を提供し、複雑なスタイルを書く強力なツールであり、可読性を維持します。ページの読み込み時に、すべてのLESSがCSSにコンパイルされるため、LESS機能を利用している場合、レンダリングされたページを調査すると違いが見られるかもしれません。一般的なパターンや有用な機能については、LESSのドキュメントを読んでください。
各個別のウィジェットの Display 設定の Styles 入力エリアで、ウィジェットレベルで異なるスタイルとクラスを定義できます。これらのスタイルは選択したウィジェットでのみ使用可能です。ウィジェットがコンテナである場合、スタイルはそのネストされた子供全てで使用可能になります。
ウィジェット内で書かれたスタイルは、管理したり追跡したりするのが難しい場合があります。大規模なプロジェクトでは、個々のウィジェットにスタイルを入れるのではなく、スタイルパネルを通じてスタイルを管理するべきです。
最もクリーンなパターンは、 Styles パネルで新しいクラスを定義し、 Additional Classes 設定を使用して個々のウィジェットに適用することです。より複雑なスタイルをサポートするための2種類のスタイルシートが利用可能です。
ローカルスタイルシートは、アプリケーションレベルでスタイルとクラスを定義します。各Slateアプリケーションには、アプリケーション全体から参照できるローカルスタイルシートが1つだけ存在します。
Slateは、Palantirが作成したオープンソースフレームワークである Blueprint ↗ から提供されるスタイルを使用します。
HTMLで一般的なUI要素を構築し、ユーザーのアプリケーションをプラットフォームの残りの部分とよりシームレスに一致させ、プロフェッショナルでプロダクションの外観と感じを実現するために、Blueprintの多くのクラスとアイコンをユーザーのアプリケーションで使用できます。
Blueprintは、アクセシブルなアプリケーション設計を念頭に置いて選ばれた core and extended color names ↗ の範囲を提供しています。
これらは、LESS変数を使用してSlateスタイルで直接参照できます。
Blueprintには、Buttons ↗ から Progress Bars ↗ から Tags ↗ まで、多数のコンポーネントがあり、ダイナミックなユーザーインタラクション要素を作成したり、ユーザーのアプリケーションに洗練されたレベルをもたらすのに役立ちます。
これらをSlateで使用するには、各コンポーネントの CSS API （JavaScript APIではなく）セクションに注意を払い、関連する pt-x クラスとHTML要素を使用してSlateで類似のコンポーネントを作成できるかどうかを理解します。
Blueprintには、バッジや小さなUI要素としてユーザーのアプリケーションに統合しやすい、包括的な icons ↗ セットも含まれています。
コンポーネントと同様に、アイコンを含めるためにCSS APIを使用できます <span classes='pt-icon pt-icon-add' />
また、UIをさらにアクセシブルにするために、他のコンポーネントにアイコンを追加することもできます buttons ↗。
Slateのスタイリングはページの読み込み時に決定される必要があるため、すべてのCSSスタイルは静的でなければなりません。これは、例えば、ウィジェットの色を変えたり、他のプロパティを変えたりしようとするために、CSSクラスにHandlebarsステートメントを入れることはできないということを意味します。しかし、ダイナミックなスタイリングを達成するためのいくつかの異なるパターンがあります。
ユーザーは 生成 や 修正 クラスをリアルタイムで行うことはできませんが、各ウィジェットの Additional Classes 設定をテンプレート化するためにHandlebarsを使用することはできます。一般的なパターンは、いくつかの異なるクラスを事前に定義し、どのクラスが特定の状況で適用されるべきかを決定する関数を使用することです。大規模なステートフルアプリケーションを構築している場合 - 上記のセクションを参照 - は、任意の状態で全ての異なるウィジェットに適用するすべての正しいクラスを決定する中央関数を持つことを検討するかもしれません。そして、ウィジェットと適用すべき正しいクラスの間のより複雑なマップを返します。
この方法で、色、アイコン、または他の表示プロパティを変更するように応答するアプリを簡単に構築したり、ウィジェット全体を表示したり非表示にしたりして自己調整するアプリを構築することができます。この特定のパターンについては、上記のResponsive Layoutsセクションを参照してください。
Style 属性ユーザーのアプリケーションの CSS は事前にコンパイルされる必要がありますが、HTMLウィジェットのstyleプロパティはhandlebarsを使用してテンプレート化することができます。これは、HTMLウィジェットや、セルに表示されるHTMLを提供するテーブルにのみ適用されます。これらの状況では、CSSをダイナミックに生成し、その要素の style 属性 ↗ に入れることができます。
Slateは、ユーザーの組織にアプリケーションの外観をさらにカスタマイズするためのカスタムフォントの使用をサポートしています。カスタムフォントを使用するには、まずフォントをotfファイルとしてFoundryにアップロードする必要があります。アップロードが完了したら、スタイルシートを通じてフォントをインポートし、フォントファイルのridを使用してファミリーに割り当てることができます。