CODEWITHSUNDEEP
nativescriptnativescript-vue
Mohit Gupta
Mohit Gupta

Reputation: 35

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>

Upvotes: 1

Views: 446

Answers (1)

Manoj
Manoj

Reputation: 21898

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>

Upvotes: 1

Related Questions