样式 API
tip
标准化组件统一了 PC 端、H5 端和小程序端实现,同时对外开放支持一系列标准 API,支持样式 API 和自定义 CSS 变量 等。标准化组件都在组件列表中添加 的标注。
标准化组件暴露对外样式 API,解决用户通过低码编辑器无法自定义组件内部结构样式的问题
#
示例.wd-btn { border-color: cyan; background-color: black; border-width: 2px; border-radius: 6px;}
.wd-btn:hover { background-color: #0c0096;}
.wd-btn.is-disabled { background-color: #888;}
.wd-btn__text { color: cyan;}
(为了保证样式修改一定会生效,建议在自定义样式前增加一个 id 选择器来提升 CSS 优先级)
#
多端响应式适配标准化组件提供在不同端渲染时,同时会提供对应的类名,可以为指定的终端编写样式
例如,按钮组件提供了三端唯一的类名
- PC 端按钮根元素 .wd-pc-btn 可以为 PC 端的按钮编写样式
- H5 端按钮根元素 .wd-h5-btn 可以为 H5 端的按钮编写样式
- 小程序端按钮根元素 .wd-mp-btn 可以为小程序端的按钮编写样式
比如希望让移动端的按钮默认占满屏幕宽度,可以单独为 H5 端和小程序端的按钮编写如下样式
.wd-mp-btn,.wd-h5-btn { width: 100%;}