Здесь кажется идеальным примером, который вы ищете, используйте 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>