スタイルは、システムデザインに関する決定を表す方法です。
トークンとともに、
デザインシステムの基本要素となります。
レイアウト内のコントロールはそれぞれ 1 つまたは複数の
デザインシステムのクラスに関連付けることができます。このクラスにより、実行時のコントロールのスタイルが決まります (色、背景色、フォント、サイズなど)。
Design System オブジェクト (DSO) 内では、対応する [ Styles ] エレメントでスタイルを定義します。このエレメントでは基本的に、システム内の各クラスのスタイルを宣言として定義します。
次の例では、一部のテキストブロックに使用している 4 つのクラスにスタイル設定を適用しています (画面の背景色は Form クラスで指定):
Design System オブジェクト内のスタイルシートの構造と形式は、ネイティブアプリケーションに使用する場合であっても、
CSS とよく似ています。事実、任意の CSS の
疑似エレメントまたは疑似クラスを記述することができます。
次のように記述するだけです:
styles <StyleSetName>
'{'
ListOfRulesAndClassDeclarations
'}'
「
デザインシステムのクラスの記述スタイル」を参照
入力値の説明:
StyleSetName
含まれる宣言セットに付ける名前。現在は、DSO で定義できるスタイルの宣言は 1 つだけですが、将来は複数を使用できるようになる予定です。
ListOfRulesAndClassDeclarations
各クラスのスタイル宣言のリスト。ほかの処理を行うルールを含めることもできます。たとえば、別の DSO のインポート、標準以外のフォントファミリーの組み込み、画面サイズごとのクラス定義、1 つのクラス定義を別の定義に含めることなどが可能です。
このリストの構文は次のとおりです:
styles <StyleSetName>
'{'
[ import_declaration ]
[ font_declaration ]
[ media_condition
'{'
[ class_declaration1 … ]
'}' ]
[ class_declaration2 … ]
'}'
構文の表記規則の表示
入力値の説明:
import_declaration
この宣言は、Design System オブジェクト、デザインシステムのトークン、デザインシステムのスタイル、外部 CSS で作成された定義をインポートして使用します。
font_declaration
この宣言は、Design System オブジェクトのトークンとスタイル用に、既定以外のフォントファミリーを定義します。
media_condition
これは、Design System オブジェクトにメディアを作成するための条件です。
class_declaration1、... class_declarationN
1 つまたは複数のコントロールに使用するデザインの特徴のセットです。
各クラスのスタイル特性を定義する簡単な方法として、ピリオドに続いてスペースなしでクラス名を記述し、必要な特性を中括弧でプロパティとして指定します。
.<class_name>
'{'
{
<property_name1> : <value1>;
<property_name2> : <value2>;
...
}
'}'
一部のプロパティは
Web Panel オブジェクトと
Panel オブジェクトの両コントロールのレンダリングに有効ですが、それ以外のプロパティはいずれかに固有です。
また、DSO のスタイル言語では、CSS とは異なり、プロパティに割り当てられた値をトークンへの参照に置き換えることができます。トークンは [ Tokens ] エレメントで定義するか、ほかの DSO からインポートできます。
次の例では、最初の 3 つのプロパティで、色、フォントサイズ、フォントファミリーのトークンへの参照を使用しています。残り 2 つについては、値を直接指定しています:
.H2
{
color: $colors.OnSurface;
font-size: $fontSizes.H2;
font-family: $fonts.Title1;
font-weight: bold;
letter-spacing: -2px;
}
「
デザインシステムのクラスの記述スタイル」では、トークンを使った記述の概要を示しています。
単位の px と dip は 1 対 1 で変換されます。このため、Web Panel と Panel のいずれのオブジェクトを使用するアプリケーションでも、同じ Design System オブジェクトまたはその拡張を使用できます。
詳細については、
デザインシステムのクラスを参照してください。
スタイルの構成に使用できる、@ (アットマーク) で始まる一連のルールがあります。たとえば、クラスを構成したり、トークンやスタイルを別の Design System オブジェクトからインポートしたり、画面サイズに応じてクラスのスタイルを変えたりすることができます。
詳細については、「
デザインシステムのスタイルのルール」を参照してください。
この部分で宣言するクラスはすべて、オブジェクトコントロールにクラスとして追加できます (
テーマの
クラスと同様)。また、このエレメント (Styles) またはオブジェクト全体をインポートしているほかの Design System オブジェクトでも使用できます。
コントロールの
[ Class ] プロパティを使用して、コントロールに関連付けられた 1 つまたは複数のクラスを動的に変更することもできます:
control_name.class = styleClass:
class_name
実行時にレンダリングされるコントロールにクラスがどのように適用されるのかについては、「
Design System オブジェクトのコントロールのレンダリングの優先順位」を参照してください。
GeneXus 17 Upgrade 6 以降。