CUBA:操作 FieldGroup 生成的标签
CUBA : manipulating the labels generated by FieldGroup
FieldGroup 组件正在为每个映射的属性创建标签和字段集。我希望能够在更改相应字段值时更改标签的样式。文档解释了如何为字段而不是标签执行此操作。
我该怎么办?
如果在fieldGroup中设置字段的stylename,假设为"red-field",那么该字段的caption就会有对应的CSS class "v-caption-red-field",所以您将能够在扩展主题中使用此选择器编写 CSS 规则。
示例字段组:
<fieldGroup id="fieldGroup"
datasource="clientDs">
<column width="250px">
<field id="title"/>
<field id="summary"
rows="5"/>
</column>
</fieldGroup>
<button caption="Change style" invoke="changeStyle"/>
触发器样式更改:
public class ClientEdit extends AbstractEditor<Client> {
@Named("fieldGroup.title")
private TextField titleField;
public void changeStyle() {
titleField.setStyleName("red-field");
}
}
CSS 规则:
@mixin halo-ext {
@include halo;
.v-caption-red-field {
color: red;
}
}
您可以在此处阅读有关主题扩展的更多信息:https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html
FieldGroup 组件正在为每个映射的属性创建标签和字段集。我希望能够在更改相应字段值时更改标签的样式。文档解释了如何为字段而不是标签执行此操作。
我该怎么办?
如果在fieldGroup中设置字段的stylename,假设为"red-field",那么该字段的caption就会有对应的CSS class "v-caption-red-field",所以您将能够在扩展主题中使用此选择器编写 CSS 规则。
示例字段组:
<fieldGroup id="fieldGroup"
datasource="clientDs">
<column width="250px">
<field id="title"/>
<field id="summary"
rows="5"/>
</column>
</fieldGroup>
<button caption="Change style" invoke="changeStyle"/>
触发器样式更改:
public class ClientEdit extends AbstractEditor<Client> {
@Named("fieldGroup.title")
private TextField titleField;
public void changeStyle() {
titleField.setStyleName("red-field");
}
}
CSS 规则:
@mixin halo-ext {
@include halo;
.v-caption-red-field {
color: red;
}
}
您可以在此处阅读有关主题扩展的更多信息:https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html