如何在nativescript-vue中更改RadDataForm样式? (Nativescript-Vue)

时间:2019-03-22 11:29:27

标签: nativescript nativescript-vue

如何更改人员对象中存在的电子邮件和密码的字体大小,边框颜色等样式。

 <RadDataForm :source="person"</RadDataForm>  

1 个答案:

答案 0 :(得分:0)

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>