样式 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%;}