腾讯云微搭低代码 通过样式 API 灵活调整组件样式

在对组件进行样式调整时,如果样式属性面板中的配置不能满足业务需求,可以以在组件的 CSS 编辑面板中,编写样式 API,通过样式选择器,实现组件样式的精细化控制,具体方案如下。

相关产品
腾讯云微搭低代码 产品页,含版本规格、价格与购买入口。

注意:

1. 添加组件后,切换到组件的样式属性配置栏,单击 CSS,打开 CSS 编辑弹窗。

2. 在该弹窗中,提供了组件的各类样式 API 示例(包含组件的样式选择器和 CSS 属性示例),可选取所需样式示例,单击示例右上角的追加图标,将其添加到左侧的 CSS 编辑面板中。

3. 此时,保存按钮右上方会显示红点,表示当前内容未保存。单击保存,上方画布中,会根据样式 API 内容,更新为新样式。

4. 样式 API 中的 CSS 属性名称和可写入值,均符合前端通用的 CSS 范式,可根据自己的需求,对 CSS 属性进行删减或修改。例如,我仅需要调整标题颜色和输入框背景颜色,则可以去除其他 CSS 属性,并将颜色值按需修改,保存后,即可得到如下效果。

注意:自定义 CSS 更改的样式对应组件内联样式,请通过 ID 选择器或类选择器来更改组件元素样式,直接使用元素选择器将无法保存 CSS 编辑内容。

赞 (0)
上一篇 4天前
下一篇 4天前