Unanimo をベースにして独自の
デザインシステムを作成できます。そのためには、
Unanimo デザインシステムに定義されている
トークンやスタイルのプロパティの値をオーバーライドし、独自のトークンと
スタイルを作成して拡張します。
「
Unanimo の使用方法」で説明したように、
ナレッジベース内に
Design System オブジェクトを作成し、 [ Styles ] エレメントで以下の内容を
既定のスタイルとして設定します。
styles NewKBName {
@import GeneXusUnanimo.UnanimoWeb;
}
Web アプリケーションを実行すると、既定で次のように表示されます。
プライマリとセカンダリの色を以下に示すように変更するには (Unanimo デザインシステムと同じトークンに基づく)、既定のスタイルとして設定されているデザインシステムの [ Token ] エレメントに移動し、次のように入力します。
tokens NewKB (color-scheme: [ light ] |dark)
{
//COLORS
@color-scheme = light {
#colors
{
#region Unanimo_Colors
primary: #6AC796;
secondary: #639FBA;
#endregion
}
}
}
注: この例では、Light カラースキームのみがカスタマイズされます。
このようにして、トークン値の定義をオーバーライドします。
変更内容をデザインシステムに保存した後、ブラウザーを強制的にリロードすると、Work With は次のように表示されます。
Unanimo で定義されているすべてのトークンに同じように適用されます。
Unanimo で定義されている一部のスタイルを変更してカスタマイズする方法を説明します。
たとえば、タイトルのスタイルを変更するには、既定のスタイルとしてナレッジベース用に使用されるデザインシステムのクラス heading-01 の定義を追加し、プロパティをカスタマイズします。
styles NewKBName {
@import GeneXusUnanimo.UnanimoWeb;
.heading-01 {
font-family: $fonts.primary-semibold;
font-size: $fontSizes.l;
color: $colors.primary;
}
}
これらの変更を保存し、ブラウザーを強制的にリロードすると、「Products」というタイトルが小さくなり、異なるカラーで表示されます。
この方法で、Unanimo デザインシステムに定義されているクラスをカスタマイズできます。
トークンやスタイルの操作の詳細については、「
Design System オブジェクト」を参照してください。また、クラスをカスタマイズする際には、
スタイルを含めるルールに関する説明が役に立ちます。
GeneXus 18 以降では、GAM および GXflow 用に配布される組み込みの UI をカスタマイズできます。アプリケーション用にカスタマイズしたのと同じデザインシステムを使用して、組み込みの UI をカスタマイズできます。
その方法については、次のドキュメントを参照してください。