Search code examples
nativescriptnativescript-vue

How to change the RadDataForm style in nativescript-vue ? (Nativescript-Vue)


How to change font-size, border-color e.t.c styling of email and password present in the person object.

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

Solution

  • Here seems to be a perfect example you are looking, use TKPropertyEditorStyle to define custom font, size, color etc.,

        <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>