デザインシステムのクラスのプロパティ

色、背景、境界線、サイズ、外側の余白、内側の余白、フォント、リンク、位置、揃え位置など、どのプラットフォーム (Web、Angular、Android、Apple) の画面コントロールにも適用できる特性を指定します。スタイルの font-face ルールなどのルール設定にも使用します。

構文

<property_name>':'{value [ unit ]  | $token_group.token_name | gx-function( gx_object )}...';'

「デザインシステムのクラスの記述スタイル」を参照してください。
入力値の説明:
property_name
  有効なスタイルプロパティ名です。有効なプロパティは、Web プラットフォームオブジェクト (Web Panel など) 用に既存するものに加え、ネイティブおよび Angular (Panel など) 用があります。
value
  property_name プロパティの有効な値です。
unit
  property_name の有効な単位です。px、dip、em、% などがあります。
$token_group
有効なトークンカテゴリです。トークンエディターに、可能な値を示すコンボボックスがあります (色、半径、間隔など)。
token_name
  現在の Design System オブジェクト、またはこの DSO にインポートされている DSO の [ Tokens ] エレメントの token_group カテゴリで定義されているトークンの名前です。インポートされた DSO は、拡張テーブルのような「拡張 DSO」と考えることができます。
gx-function
  ナレッジベースのオブジェクトへの参照を値として返すために使用する関数です。たとえば、gx-image 関数はナレッジベースの画像への参照を返し、画像を指定するプロパティに使用します。gx-file 関数はナレッジベースのファイルへの参照を返します。
gx_object
  gx-function で参照するナレッジベースのオブジェクトです。関数が gx-image の場合は画像タイプ、関数が gx-file の場合はファイルタイプです。

例

tokens myTokens
{
       #colors
       {
               Highlight: #D89722;
       }
       #spacing
       {
               s: 15px;
       }
}

styles myStyle
{
       .class1
       {
               color: red;
               line-height: 75px; 
       }
       .class2
       {
                color: #D82822;
                line-height: 1.8;
       }
       @font-face
       {
                 Font-family: TestFont;
                 src: gx-file(MyFontFile);
       }
       .class3
       {
                 color: $colors.Highlight;
                 font-family: TestFont;
       }
       .class4
       {
                 gx-lottie-file: gx-file(lottieFile);   //Panel のみ
       }        
       .class5
       {
                 margin: 10dip 5dip 15dip 5dip;
                 background-image: gx-image(myImage);
       }
       .class6
       {
                 margin: 10px 5px;
       }
       .class7
       {
                 margin: $spacing.s;
                 border: 5px solid red;
       }
       .class8
       {
                 color: blue;
                 gx-label-class:  class3;
       }
}

CSS と同様、一部のプロパティには複数のプロパティを 1 つにまとめる省略形があります。たとえば、4 つのプロパティ margin-top、margin-bottom、margin-left、margin-right を個別に設定する代わりに、margin と入力し、4 つの値を 1 行で設定することができます。さらに、top と bottom、right と left が同じ場合は、ペアで設定できます。すべて同じである場合は値を 1 つ指定するだけです。
例として CSS の border プロパティの短縮形を参照してください。
一部のプロパティは Web パネルとパネルの両コントロールのレンダリングに有効ですが、それ以外のプロパティはいずれかのタイプ (Web パネルまたはパネル) に固有です。
Web の場合、CSS で有効なプロパティはここでもすべて有効です。ただし、その逆は当てはまりません。ローコードの方針に沿って抽象化レベルが高くなっている GeneXus 固有のプロパティがあり、広く使用されることになるからです。これらは接頭語「gx-」が付いています。
また、CSS とは異なり、値を直接入力する代わりにトークンを参照できます。
ネイティブまたは Angular のアプリケーションについては、Web アプリケーションと同様の機能を持つプロパティを通常は同じ方法で呼び出しますが、場合によっては相違点もあります。将来的には標準化を進める予定です。
プロパティまたはその値が意味のないものであるか、特定のプラットフォームでの特定のコントロールのレンダリングには無効である場合、その定義は無視されます。ただし、同じコントロールのクラスのその他の有効なプロパティは除きます。

gx- プロパティ

そのオブジェクトの GeneXus 固有のプロパティです。たとえば、HighlightInfo クラスを使用して、特定の項目属性/変数コントロールに一貫したスタイルを設定するとします。
このコントロールのラベルを表示する際のスタイルはどのように設定すればいいでしょうか。このクラス内で、ラベルのスタイルを指定するクラスを [ gx-label-class ] プロパティで指定します:

styles MyStyles
{
    .HighlightInfo
    {
        font-family: serif;
        font-size: 60px;
        color: grey;
        gx-label-class: LabelHighlightInfo;
    }
    .LabelHighlightInfo
    {
        color: green;
        font-weight: bold;
    }
}

たとえば、LabelHighlightInfo クラスをテキストブロックに関連付け、HighlightInfo クラスを項目属性に関連付けた (ラベルにはテキストブロックと同じ LabelHighlightInfo クラスを関連付けた) 場合、実行時には次のようになります:

項目属性のテキストとタグのテキストの特性を一部を除き同じにするには、次のようにインクルードルールを使用できます:

.HighlightInfo
{
    font-family: serif;
    font-size: 40px;
    color: grey;
    gx-label-class: LabelHighlightInfo;
}

.LabelHighlightInfo
{
     @include HighlightInfo;
     color: green;
     font-weight: bold;
}

別の例として、「CONTACT US TODAY」というキャプションを持つテキストブロックコントロールに次のクラスが関連付けられている場合を考えます:

   .MainActionText
    {
        color: $colors.Highlight;  //トークン Highlight: #D82822; 
        font-size: 14px;
        font-family: Rubik-Medium;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 18px;
    }

Web で実行すると、表示は次のようになります:

ただし、テキストブロック (名前は TextBlock1) に、たとえば開始イベントで次のように [ Link ] プロパティが定義されていた場合:

                        TextBlock1.Link = ContactUs_web.Link()

実行時の表示は次のようになります:

これはリンクであるため、HTML セレクターにより、リンクを示す <a> タグのスタイルが確認され、既定で一般的な青色で表示されます。
クラスがリンクに使用された場合に独自のスタイルを適用するには、 [ gx-attribute-link-class ] プロパティを追加し、コントロールがリンクの場合のスタイルを設定するクラスを指定します。この例では、次のように選択します:

.MainActionText
  {
       color: $colors.Highlight;
       font-size: 14px;
       font-family: Rubik-Medium;
       font-weight: 500;
       text-decoration: none;
       text-transform: uppercase;
       line-height: 18px;
       gx-attribute-link-class: MainActionText;
   }

実行時の表示は次のようになります:

テキストブロックをポイントしたときの色を変更するクラスを追加することもできます:

   .MainActionText
    {
        color: $colors.Highlight;
        font-size: 14px;
        font-family: Rubik-Medium;
        font-weight: 500;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 18px;
        gx-attribute-link-class: MainActionText;
        gx-attribute-hovered-class: LinkHover;
    }
   .LinkHover
    {
        color: $colors.HighlightNeg; //トークン HighlightNeg: #D89722
    }

実行時には、次のようになります:

使用可能バージョン

GeneXus 17 Upgrade 6 以降