如何更改 nativescript-vue 中的 RadDataForm 样式? (Nativescript-Vue)
How to change the RadDataForm style in nativescript-vue ? (Nativescript-Vue)
如何更改字体大小、边框颜色 e.t.c 个人对象中电子邮件和密码的样式。
<RadDataForm :source="person"</RadDataForm>
Here 似乎是您正在寻找的完美示例,使用 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>
如何更改字体大小、边框颜色 e.t.c 个人对象中电子邮件和密码的样式。
<RadDataForm :source="person"</RadDataForm>
Here 似乎是您正在寻找的完美示例,使用 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>