クラスを使用して、実行 (レンダリング) 時にコントロールの UI に適用する一連のデザイン特性を指定します。
宣言はデザインシステムのスタイルのセクションで行います。

構文

'.'<class_name1> [ , {'.'<class_nameN>, ...} ] 
‘{’
        [ @include <class_namej>... ';' ]       
       {<property_name>: {value [ unit ] |$token_group.token_name | gx-function}...}';' 
       ...
‘}’

「デザインシステムのクラスの記述スタイル」を参照
入力値の説明:
class_name₁,..., class_name_N
    開発者がクラスに付ける名前です。この名前はコントロールのクラスのプロパティで使用されます。同じプロパティ定義を共有する場合は、複数のクラス名を指定することもできます (現時点で Web の場合のみ可能)。Web クラス名の大文字と小文字に関する一時的な制限を参照してください。
class_name_j
    同じスタイルセクションで宣言されていて、そのプロパティをここに含めるクラスの名前です。この名前のクラスがなかった場合は無視されます。
property_name
    有効なスタイルプロパティ名です。有効なプロパティは、Web プラットフォームオブジェクト (Web Panel など) 用に既存するものに加え、ネイティブおよび Angular (Panel など) 用があります。「デザインシステムのクラスのプロパティ」を参照してください。
value
    property_name プロパティの有効な値です。
unit
    property_name の有効な単位です。px、dip、em、% などがあります。
$token_group
    有効なトークンカテゴリです。トークンエディターに、可能な値を示すコンボボックスがあります (色、半径、間隔など)。
token_name
      現在の DSO、またはこの DSO にインポートされている DSO の [ Tokens ] エレメントの token_group カテゴリで定義されているトークンの名前です。インポートされた DSO は、拡張テーブルのような「拡張 DSO」と考えることができます。
gx-function
    ナレッジベースのオブジェクトへの参照を値として返すために使用する関数です。たとえば、gx-image 関数はナレッジベースの画像への参照を返し、画像を指定するプロパティに使用します。gx-file 関数はナレッジベースのファイルへの参照を返します。

例:

H1 クラスでは、H1_Negative の宣言ブロック全体が有効です。ただし、色の宣言は例外で、H1 で明示的に指定されている宣言が有効になります。

.H1_Negative
{
    color: #FFFFFF;
    font-family: $fonts.Title1;
    font-size: $fontSizes.H1;
    font-weight: bold;
    text-align: center;
    letter-spacing: -1.72px;
    line-height: 75px;
} 
.H1
{
    @include H1_Negative;
    color: $colors.Black;
}

プロパティによって、値が指定されているもの、値と単位が指定されているもの、トークンへの参照が指定されているものがあります。この DSO を Panel に適用した場合、px 単位は dip に変換されます (1 対 1 で対応)。

クラスの特性

クラスは限定的ではなく、適用できるコントロールのタイプに制限はありません。関連付けられているクラスのスタイル宣言がコントロールのタイプに適切ではなかった場合、その宣言 (その宣言のみ) は考慮されません。
このため、クラスでフォントサイズなどのテキスト特性が定義されている場合、テキスト ブロック タイプや項目属性/変数タイプのコントロールには効果がありますが、画像タイプのコントロールには効果はありません。
どの UI コントロールにも関連付けられていないクラスが存在しても構いません。同様に、DSO (またはその DSO にインポートされている任意の DSO、または DSO の [ Styles ] エレメント) で指定されていないクラスが関連付けられているコントロールが存在しても構いません。後者の場合、コントロールは関連付けられているクラスがないかのように処理されます。

[ About ] プロパティ

一部のプロパティは Web パネルとパネルの両コントロールのレンダリングに有効ですが、それ以外のプロパティは限定的です。
詳細については、「デザインシステムのクラスのプロパティ」を参照してください。

[ Styles ] エレメントのクラスの構造

クラスは、条件を満たしたときにのみ宣言が有効になるよう、条件を設定できます。現時点では、画面サイズなどメディアに関連する条件のみを指定でき、条件は Web のみが対象です。
また、同じ DSO 内、またはインポートしている DSO の [ Styles ] エレメントで、条件がない (または条件が異なる) 同じクラスが選択されることもあります。このような場合については、「デザインシステムでのクラスの構造」を参照してください。
「Design System オブジェクトのコントロールのレンダリングの優先順位」も参照してください。

Web クラス名の大文字と小文字に関する一時的な制限

Web アプリケーションで使用する DSO では CSS ファイルが生成されますが、このとき各クラス名の大文字と小文字は DSO と同じになります。
DSO や CSS では大文字と小文字が区別されませんが、HTML はセレクターは大文字小文字が区別されると見なされます。このため、MyClass クラスが関連付けられているコントロールが、実行時に CSS 内のそのクラスから値を取得するには、名前が myclass などではなく MyClass になっている必要があります。
現時点 (GeneXus 17 Upgrade 6) では、DSO で初めてクラス名を入力して保存した場合、その大文字と小文字がナレッジベースで使用されます。その後、開発者が DSO で変更を加えても、内部では最初のものが引き続き使われるため、コントロールでもそれが使用されます。

この処理方法のマイナス面:

1.    DSO で最初に次のように宣言したとします:

styles MyStyles
{
    .MyClass
    {
        color: brown;
    }
}

このクラスをコントロールに関連付けるとき、MyClass クラスが選択肢として表示されます。CSS が生成されるとき、大文字と小文字は DSO オブジェクトと同じになるため、MyClass になります。実行時には、茶色が正しく表示されます。
しかし、DSO で大文字と小文字を変更 (あるいはクラスを削除し、大文字と小文字を変えてもう一度記述) し、クラス名を「myclass」にした場合、このクラスをコントロールに関連付けるときにクラスのフィールドに「myclass」と入力しても、IDE ではフォーカスの移動後に「MyClass」と表示されます。
問題は、生成される CSS では変更が適用されて「myclass」になり、コントロールの HTML タグは MyClass になることです。したがって、CSS でクラスを探しても見つからず、実行時に茶色が適用されません。
2.    2 つの異なる DSO で同じクラス名を使用した場合も同じことが起こります。2 つの異なる DSO からであったとしても、初めて保存したときの大文字と小文字が内部で使用されます。
このため、特定の大文字と小文字でクラスを一度保存したら、別の DSO でも大文字と小文字をすべて同じにする必要があります。入力する大文字と小文字にかかわらず、コントロールは常に最初のものに関連付けられます。どの DSO のものかは関係ありません。
別の選択肢として、名前を変えれば、それが別のエンティティであることがわかります。

使用可能バージョン

GeneXus 17 Upgrade 6 以降