样式定制系统概览
全面的表单字段外观定制解决方案，实现品牌一致的视觉体验
此示例演示如何使用kinlink API对表单字段进行深度样式定制。通过动态CSS控制、主题切换和响应式设计，创建符合品牌风格的表单界面。
样式定制核心能力
- 🎨 标签样式控制：字体、颜色、大小的精细调整
- 🖌️ 组件外观定制：输入框、按钮、选择器的视觉重设计
- 🌈 主题系统：一键切换不同风格主题
- 📱 响应式适配：适应不同设备屏幕的样式调整
- 🔄 动态样式更新：基于状态和条件的实时样式变化
- ⚡ 性能优化：CSS变量和样式缓存机制
关键功能
- 设置单个字段标签样式
- 设置单个字段输入组件样式
- 批量设置多个字段标签样式
- 批量设置多个字段组件样式
代码示例
/**
* 示例2: 字段样式自定义
* 功能：修改表单字段标签和组件的样式
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
try {
// 设置字段标签样式
kinlink.formApi.setFieldLabelStyle('单行文本框_0', {
color: '#e74c3c',
fontWeight: 'bold',
fontSize: '16px',
});
// 设置输入组件样式
kinlink.formApi.setFieldComponentStyle('单行文本框_0', {
backgroundColor: '#f8f9fa',
border: '1px solid #dee2e6',
borderRadius: '4px',
padding: '8px',
});
// 批量设置必填字段标签样式
const requiredFields = [
'文字列__1行__0',
'文字列__1行__1',
'单行文本框_8',
'单行文本框_9',
];
requiredFields.forEach((field) => {
kinlink.formApi.setFieldLabelStyle(field, {
color: '#e74c3c',
position: 'relative',
});
});
// 批量设置日期字段组件样式
kinlink.formApi.setFieldsComponentStyles({
日期_1: { width: '180px' },
日期_2: { width: '180px' },
});
} catch (error) {
console.error('设置字段样式失败:', error);
}
});
})();使用说明
要使用此功能，只需将代码复制到您的kinlink自定义JavaScript中。根据您的表单字段，修改代码中的字段代码和样式属性。您可以使用标准的CSS属性来自定义样式。
完整代码请下载查看：
2-字段样式自定义.js
注意事项
样式修改会覆盖系统默认样式。如果遇到样式冲突，可能需要增加CSS选择器的特异性或使用!important规则。
API参考
此示例使用了以下kinlink API：
kinlink.events.on(eventName, callback)- 注册事件监听器kinlink.FormEvents.FORM_LOADED- 表单加载完成事件kinlink.formApi.setFieldLabelStyle(fieldCode, styleObject)- 设置字段标签样式kinlink.formApi.setFieldComponentStyle(fieldCode, styleObject)- 设置字段组件样式kinlink.formApi.setFieldsComponentStyles(stylesObject)- 批量设置多个字段组件样式