[英]How to change the RadDataForm style in nativescript-vue ? (Nativescript-Vue)
如何更改 person 对象中存在的电子邮件和密码的字体大小、边框颜色等样式。
<RadDataForm :source="person"</RadDataForm>
Here seems to be a perfect example you are looking, use TKPropertyEditorStyle
to define custom font, size, color etc., 这似乎是您正在寻找的完美示例,使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.