注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
Slate は、Palantir のオープンソースの Blueprint フレームワークの上に構築されており、他のウェブサイトと同様に、DOM を CSS を使ってスタイル化します。これにより、ウィジェットに統一されたルック＆フィールが提供され、"ダークモード"への切り替えが容易になります。これらは「スキン」や「テンプレート」ではなく、各 Slate ウィジェットに組み込まれています。
これは、アプリケーションのデザインが特定の UI を要求している場合、新しいルールを提供するスタイルオーバーライドのセットに開発の努力を集中させることを意味します。これには複雑さが増すため、Slate のデフォルトスタイルが適用される場所を理解し、それを上書きするための正確な特異性レベルの CSS セレクタを生成する必要があります。
アプリでスタイルを開発する際には、Chrome Developer Tools（特に「インスペクタ」）が最良の友人となります。これにより、Webページ内の任意の要素のレンダリングされたHTMLとCSSを表示することができます。右クリック → 「検証」で、クリックした要素が強調表示された状態でインスペクタが開きます。これは、どのクラスがどの要素に適用されているか、そしてどのクラスを拡張または上書きする必要があるかを特定するために重要です。
厳密には、Slate アプリ内で記述する CSS は、Less という事前コンパイラのダイアレクトです。Less は、冗長な CSS を簡潔化するための構文を提供し、複雑なスタイルを書きながら可読性を維持するための強力なツールです。ページの読み込み時に、すべての LESS が CSS にコンパイルされるため、LESS 機能を活用している場合は、レンダリングされたページを検査すると差異が見られることがあります。LESS のドキュメントで一般的なパターンや便利な機能について詳しく読んでください。
スタイル入力エリアの表示設定で、ウィジェットレベルで異なるスタイルやクラスを定義できます。これらのスタイルは、選択したウィジェットでのみ利用可能です。ウィジェットがコンテナの場合、スタイルはネストされた子要素すべてで利用可能になります。
ウィジェットに記述されたスタイルは、管理や追跡が難しい場合があります。これに対して、スタイルを中央の場所に保存します。大規模なプロジェクトでは、個々のウィジェットにスタイルを入れるのではなく、スタイルパネルを通じてスタイルを管理する必要があります。
最もクリーンなパターンは、スタイルパネルで新しいクラスを定義し、追加クラス設定を使用して個々のウィジェットに適用することです。より複雑なスタイルをサポートするために、2種類のスタイルシートが利用可能です。
ローカルスタイルシートは、アプリケーションレベルでスタイルとクラスを定義します。各 Slate アプリケーションには、アプリケーション全体から参照できるローカルスタイルシートが1つだけあります。
Slate は、Palantir が作成したオープンソースのフレームワークである Blueprint で提供されるスタイルを使用しています。
アプリケーション内で Blueprint のクラスやアイコンを多数使用することで、一般的な UI 要素を HTML で構築し、アプリケーションをプラットフォーム全体とシームレスに一致させ、プロフェッショナルで本番向けのルック＆フィールを実現できます。
Blueprint は、アクセシブルなアプリケーションデザインを念頭に置いて選択された コアと拡張カラー名 の範囲を提供しています。
これらは、Slate のスタイルで LESS 変数を使用して直接参照できます。
Blueprint には、ボタン や プログレスバー や タグ など、ダイナミックなユーザーインタラクション要素の作成やアプリケーションへのポリッシュレベルを追加するのに役立つ多くのコンポーネントがあります。
これらを Slate で使用するには、各コンポーネントの CSS API（JavaScript API ではなく）セクションに注意を払い、関連する pt-x クラスと HTML 要素を使用して Slate で同様のコンポーネントを作成できるかどうかを理解します。
Blueprint には、バッジや小さな UI 要素としてアプリケーションに統合しやすい アイコン の包括的なセットも含まれています。
コンポーネントと同様に、CSS API を使用してアイコンを含めることができます <span classes='pt-icon pt-icon-add' />
また、ボタン などの他のコンポーネントにアイコンを追加して、UI をさらにアクセシブルにすることができます。
Slate のスタイリングはページの読み込み時に決定される必要があるため、すべての CSS スタイルは静的でなければなりません。つまり、例えば、ウィジェットの色を変更したり、他のプロパティを変更したりしようとするハンドルバーステートメントを CSS クラスに入れることはできません。ただし、ダイナミックスタイリングを実現するためのいくつかの異なるパターンが利用可能です。
生成 または 変更 できないクラスを動的に生成することはできませんが、ハンドルバーを使用して各ウィジェットの 追加クラス 設定をテンプレート化することができます。一般的なパターンは、いくつかの異なるクラスを事前に定義し、特定の状況で適用すべきクラスを決定する関数を使用することです。大規模でステートフルなアプリケーションを構築している場合は、上記のセクションを参照してください。任意の条件ですべての異なるウィジェットに適用する正しいクラスを決定する中央の関数が必要になる場合があります。
この方法で、色やアイコン、その他の表示プロパティを変更することによって応答するアプリを簡単に構築したり、ウィジェット全体を表示および非表示にすることでサイズ変更することができます。上記のレスポンシブレイアウトセクションで、この特定のパターンに関する詳細を参照してください。
Style 属性アプリケーションの CSS は事前にコンパイルされる必要がありますが、HTML ウィジェットのスタイルプロパティはハンドルバーを使ってテンプレート化することができます。これは、HTML ウィジェットや、表示するセルの HTML を提供するテーブルの場合にのみ適用されます。これらの状況では、CSS を動的に生成し、その要素の style 属性 に挿入できます。
Slate は、カスタムフォントを使用して、アプリケーションの外観を組織にさらに合わせることができます。カスタムフォントを使用するには、まずフォントを otf ファイルとして Foundry にアップロードする必要があります。アップロードが完了すると、フォントファイルの rid を使用して、スタイルシートを介してフォントをインポートし、ファミリーに割り当てることができます。
Copied!1 2 3 4 5 6 7@font-face { /* フォントファミリーの名前を設定します */ font-family: alliance1; /* フォントのURLおよびフォーマットを指定します */ src: url("https://developer.palantir.com/blobster/api/salt/ri.blobster.main.blob.a3dd73c4-d300-4194-b977-fc176410cdf6") format("opentype"); }