Как изменить стиль RadDataForm в nativescript-vue?(Nativescript-Вью) - PullRequest
0 голосов
/ 22 марта 2019

Как изменить размер шрифта, стиль рамки e.t.c электронной почты и пароль, присутствующие в объекте person.

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

1 Ответ

0 голосов
/ 22 марта 2019

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