组件样式配置
在大屏编辑器中,每个组件都可以通过 属性面板 进行样式配置。
样式配置决定了组件的外观表现,包括颜色、字体、边框、透明度等,从而确保大屏整体视觉效果统一、美观。
1. 样式配置入口
- 位置:选中组件后,右侧属性面板自动切换到 样式配置 选项卡。
- 适用范围:不同组件类型(文字、图表、图片、按钮等)支持的样式项略有差异,但基础样式配置相似。
2. 常见样式属性
(1)颜色与背景
- 填充颜色:支持选择纯色、渐变色或透明背景。
- 背景图片:可上传图片作为组件背景,支持平铺、拉伸、居中显示等模式。
- 透明度:设置组件整体的不透明度,数值范围 0%(完全透明)~100%(完全不透明)。
(2)字体样式
- 字体:支持多种字体库选择。
- 字号:设置文字大小。
- 颜色:自定义文字颜色,支持十六进制色值输入。
- 加粗/斜体/下划线:常见文本修饰。
- 对齐方式:支持左对齐、居中、右对齐(部分组件支持垂直对齐)。
(3)边框与圆角
- 边框颜色:自定义边框线条颜色。
- 边框粗细:以像素为单位,控制线条宽度。
- 边框样式:实线、虚线、点线等。
- 圆角半径:控制组件边角的圆润程度。
(4)阴影与滤镜
- 阴影:可设置阴影颜色、偏移量、模糊半径,增强立体感。
- 滤镜效果:如亮度、对比度、饱和度、模糊等,可让组件风格更具个性化。
(5)布局样式
- 大小与位置:与坐标设置联动,支持精确输入宽高值。
- 内边距与外边距:部分容器类组件支持内容与边界的间距设置。
- 层级(Z-Index):调整组件在画布中的叠放顺序。
3. 样式继承与主题
- 全局主题:在大屏画布设置中启用主题后,部分组件(如图表、按钮)可继承主题的默认配色。
- 组件独立样式:若单独配置了组件样式,则会覆盖主题默认设置。
- 统一修改:修改主题后,未单独设置的组件样式会随主题一起更新。
4. 使用技巧
- 统一配色:建议先在画布层面设置全局主题,再微调单个组件,保证整体风格一致。
- 渐变与透明度:适当使用渐变色和透明度,可以增强视觉层次感。
- 阴影效果:谨慎使用过多阴影,以免影响大屏整体清晰度。
示例场景
- 在图表类组件中,设置背景透明度为 0%,仅保留数据展示,增强简洁感。
- 在按钮组件中,添加圆角和阴影效果,提升交互的视觉反馈。
- 在文字组件中,统一应用主题配色,保证标题与内容层次分明。