组件的样式由右侧的"样式面板"进行编辑。"样式面板"可用于编辑组件的样式、鼠标悬浮于组件时的样式、组件内部特定区域的样式。
功能入口
“选择组件” > “右侧面板” >“样式”面板。
使用示例
示例1 使用表达式动态决定样式
- CSS输入框支持
插值表达式，在双花括号中可以填入任意的JS表达式可以在其中自由使用数据源变量，页面变量等
示例2 配置特定区域样式 & 鼠标悬浮时样式
- 首先准备一个卡片组件，选中组件后点击右侧样式来到样式面板
- 点击“背景”>“颜色下拉按钮” 可以进行颜色的选择
- 在
样式选择器上点击组件整体并选择内容区域，此时在样式面板上调整样式将仅对内容区域生效
- 在
样式选择器上点击常态并选择鼠标悬浮，此时在样式面板上的调整将仅在鼠标悬浮时生效，同时组件将展示鼠标悬浮时的样式预览
组件里没有我想要的选择器? 可以点击右侧面板进行反馈，联系组件开发着添加预设 或者 可以选择下面介绍的方法 “自定义样式选择器”
样式选择器
当样式选择器选中特定区域和特定状态时
组件的特定区域将展示处于特定状态的样式
此时，通过样式面板进行的样式编辑仅对"特定区域的特定状态"生效
自定义样式选择器
注意
下面的内容需要一定的前端知识
1). 区域选择器中可以填入任意CSS选择器对组件内部的元素进行选择
2). 状态选择器中可以填入任意CSS伪类对元素状态进行选择
