最近のアクセス:
Unanimo の拡張

Design System オブジェクトの [ Style ] エレメントに独自のトークンや新しいクラスを追加し、それらのクラスを UI のビルドに使用するコントロールに割り当てることができます。
たとえば、新しいボタンスタイルを作成するには、次のようにして、デザインシステムに新しいクラスを作成します:
styles NewKBName {
@import GeneXusUnanimo.UnanimoWeb;

.button-red {
            background-color: red;
            font-size: $fontSizes.s;
            font-family: $fonts.primary-semibold;
            color: $colors.on-primary;
            text-transform: uppercase;
            border:none;
            border-radius: 15px;
        }
}
この例では、button-primary クラスを Unanimo デザインシステムからコピーしました。背景色を red に変更し、境界の半径を追加して外観により丸みを持たせています。また Button button-red クラスをパネルに割り当てました。実行時には次のように表示されます:
イメージ:52194.png
通常は、まずベースクラス (この場合は「Button」) を割り当て、その後、スタイルを変更するために作成するクラスを割り当てる必要があります。
最後に、新しいトークンまたはクラスを追加し、それらのクラスをパネル上のコントロールに適用することで、デザインシステムを拡張できます。


サブページ
Created: 23/04/24 18:12 by Admin Last update: 23/04/24 18:12 by Admin
カテゴリ
Powered by GXwiki 3.0