nativescript - 如何更改 nativescript-vue 中的 RadDataForm 样式?(Nativescript-Vue)
问题描述
如何更改人员对象中存在的电子邮件和密码的字体大小、边框颜色等样式。
<RadDataForm :source="person"</RadDataForm>
解决方案
这似乎是您正在寻找的一个完美示例,用于TKPropertyEditorStyle
定义自定义字体、大小、颜色等,
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<RadDataForm ref="dataForm" :source="person">
<TKEntityProperty v-tkDataFormProperty name="name">
<TKPropertyEditor v-tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle v-tkPropertyEditorStyle
labelTextColor="red"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty v-tkDataFormProperty name="age">
<TKPropertyEditor v-tkEntityPropertyEditor type="Decimal">
<TKPropertyEditorStyle v-tkPropertyEditorStyle
labelTextColor="green"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty v-tkDataFormProperty name="birthDate">
<TKPropertyEditor v-tkEntityPropertyEditor type="DatePicker">
<TKPropertyEditorStyle v-tkPropertyEditorStyle
labelTextColor="blue"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
</RadDataForm>
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
person: {
name: "John",
age: 23,
birthDate: "1993-05-16"
}
};
}
};
</script>
推荐阅读
- javascript - Javascript:在启动用户触发操作之前等待 AJAX 调用完成
- react-native - 如何在mac os终端上使用放大添加通知命令添加添加(p12)证书的路径?
- javascript - 多个内联插入到表中
- opencv - 长焦镜头对大图像的相机标定误差较大
- laravel-5 - 模型创建后数据未真实保存在数据库中
- python - 我的 app.py 无法在后端接收请求并收到 404 错误
- javascript - 使用 react-apollo 进行服务器端渲染
- gradle - Beam 管道在直接运行器上运行正常时未在 Google Dataflow 中移动
- mysql - SQL 年龄组和唯一编号
- reactjs - 添加钩子组件时,比上一次渲染时渲染的钩子更多