ASTRO轻应用 ASTROZERO-设置AstroZero标准页面列表视图组件属性:样式

时间:2024-12-04 13:53:12

样式

针对有丰富前端开发经验的用户,可通过“样式”面板对页面进行更深度的个性化布局定制。

  • 布局:对页面 CSS 属性进行直接配置,如设置组件的宽度、高度等。您也可以在“高级设置”中,直接编写 CS S代码进行更深度的个性化布局定制。
    • 单击“显示”属性后的按钮,可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。
    • “显示”属性下方展示了当前元素的盒模型示意图,在对应的数字位置单击并改变值,即可快速改变元素上下左右位置上的内外边距属性。
    • 当前元素盒模型示意图下方,展示了当前元素的宽和高,默认是根据当前布局自适应后的宽高,可以在这里手动输入值配置当前元素的宽和高。
    • 盒模型和宽高配置时,支持“px”、“em”、“%”、“auto”等多种单位。
      图5 样式属性配置面板
  • 字体:设置字体大小、字体样式、颜色等。
  • 背景:设置背景颜色、透明度。
  • 边框:设置边框颜色、宽度等,支持“px”、“em”和“%”三种单位。
  • 阴影:设置阴影颜色、模糊、扩散等,支持“px”、“em”和“%”三种单位。
  • 高级设置:在高级设置中,直接编写CSS代码作用于当前元素。
    • 样式源码:组件具体样式代码,组件样式设置后,样式代码将自动显示在“样式源码”中。也可以自定义样式代码,对组件进行详细配置。自定义代码支持多行输入,并高亮显示样式参数。
    • 样式类:当前组件使用的CSS样式类名,可在CSS代码中进行引用。
support.huaweicloud.com/usermanual-astrozero/astrozero_05_9071.html