attribute-date は項目属性クラスからプロパティを継承するクラスで、具体的には
Date データタイプ/
DateTime データタイプに基づくプロパティに適用されます。
Work With パターンを生成する際に、
データタイプが
Date または
DateTime の項目属性にこの特定のクラスを自動的に割り当てることができます。
まず
Design System オブジェクトの
[ Styles ] エレメントで、項目属性に目的の汎用スタイルを指定して項目属性クラスを作成します:
.Attribute {
gx-label-class: attribute__label;
border-style: solid;
border-color: #8592A6;
border-width: 1dip;
border-radius: 4dip;
margin-left: 16dip;
margin-right: 16dip;
margin-bottom: 8dip;
background-color: $colors.surface;
padding-left: 8dip;
padding-right: 8dip;
gx-show-edit-text-line: false;
color: #3D4854;
gx-invite-message-color: #8592A6;
font-size: 16dip;
font-family: $fonts.primary-regular;
}
ここで、次に示すように、
[ Control Type ] プロパティが Radio Button に設定されている項目属性/変数について、境界線を表示しないようにし、下縁を付けるとします:
定義するクラスは次のようになります:
.attribute-date {
@include Attribute;
border-style: none;
margin-bottom: 7dip;
}
デザインシステムのクラス