Skip to content

自定义样式

系统开发免不了要进行页面的样式调整,盘古提供了灵活的页面自定义样式能力。

使用方式

在自定义页面中有以下两种样式设置方式:

基础样式配置

盘古提供通用的样式配置面板用于可视化配置基础的样式,例如:宽、高、不透明度、显示、边距、边框、圆角、阴影等,用户改变样式面板的配置后可以实时在可视编辑区域查看效果。

手工编码模式

盘古还可以通过点击样式面板的编辑样式按钮手动进行 css 编码模式修改组件样式,自定义样式支持 less 语法。具体示例如下:

less
:rootNode {
  background-color: yellow;
  .arco-alert-content {
    color: orange;
    font-weight: bold;
  }
}

根据变量动态控制

组件增加了类名绑定功能,通过类名绑定,根据不同的变量对组件设置不同的类名,在自定义样式设置中,对不同的类名设置不同的样式即可实现根据变量动态控制组件样式功能

image

类名绑定设置

类名样式设置