如何居中rad数据形式的文本输入?

时间:2019-04-12 20:57:00

标签: angular nativescript

我想使rad数据表单中的文本居中对齐,因为我有这些要求。输入必须居中。

我尝试使用CSS通过设置text-align属性来做到这一点。我在文档中寻找了一种实现方法,但是没有示例。

<RadDataForm #myLoginForm row="1" col="0" [source]="loginForm" [metadata]="loginFormMetadata">
        <!--Email property-->
        <TKEntityProperty
            tkDataFormProperty
            textAlignment="center"
            displayName=""
            name="email"
            hintText="Email"
            index="0">

            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>

            <!--Non empty, and email validators-->
            <TKNonEmptyValidator tkEntityPropertyValidators></TKNonEmptyValidator>
            <TKEmailValidator tkEntityPropertyValidators></TKEmailValidator>
        </TKEntityProperty>

输入始终从左到右开始,而不是光标不移动但输入字符在输入字符时向左移动的居中输入。

更新-

我使用了Manoj的建议,并且能够使用Native API获得居中的文本输入。 我使用以下链接弄清楚了如何使本机API在我的NS Angular项目中可用: https://docs.nativescript.org/angular/core-concepts/accessing-native-apis-with-javascript#intellisense-and-access-to-the-native-apis-via-typescript

之后,我可以使用事件绑定将RadDataFrom绑定到该函数。

<RadDataForm #myLoginForm row="1" col="0" [source]="loginForm" [metadata]="loginFormMetadata" (editorUpdate)="dfEditorUpdate($event)">

感谢Manoj!

1 个答案:

答案 0 :(得分:1)

您必须本地设置样式,请参考docs here

export function dfEditorUpdate(args: DataFormEventData) {
    const editor = args.editor;
    switch (args.propertyName) {
        case "albumName":
            if (isAndroid) {
                editor.getEditorView().setGravity(android.view.Gravity.CENTER_HORIZONTAL);
            } else {
                editor.editor.textAlignment = NSTextAlignment.Center
            }
            break;
    }
}

Playground Sample