安装

如果使用 @nativescript

• tns plugin add nativescript-material-textfield

如果使用 tns-core-modules

• tns plugin add [email protected]

添加插件后，请确保运行新的构建以避免任何问题。

Material Design 规范

用法

原生 NativeScript

重要: 请确保在 Page 元素上包含 xmlns:mdt="nativescript-material-textfield"

XML

<Page xmlns:mdt="nativescript-material-textfield">
    <StackLayout horizontalAlignment="center">
        <mdt:TextField text="raised textfield"/>
        <mdt:TextField variant="flat" text="flat textfield"/>
        <mdt:TextField variant="text" text="text textfield"/>
        <mdt:TextField elevation="5" rippleColor="red" text="raised custom textfield"/>
   </StackLayout>
</Page>

CSS

mdctextfield {
    ripple-color: blue;
    elevation: 4;
    stroke-color: blue;             // the border color when active
    stroke-inactive-color: green;   // the border color when inactive
    floating-color: blue;           // the floating placeholder color when active
    floating-inactive-color: green; // the floating placeholder color when inactive
}

NativeScript + Angular

import { NativeScriptMaterialTextFieldModule } from "nativescript-material-textfield/angular";

@NgModule({
    imports: [
        NativeScriptMaterialTextFieldModule,
        ...
    ],
    ...
})

<MDTextField  helper="example helper" placeholderColor="green" keyboardType="datetime"
        hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
        (textChange)="onTextChange($event)"></MDTextField>

NativeScript + Vue

import TextFieldPlugin from 'nativescript-material-textfield/vue';

Vue.use(TextFieldPlugin);

<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime"
        hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur"
        @textChange="onTextChange"/>

此外，您还可以使用 v-model 指令将文本绑定到某些实例数据

<MDTextField v-model="value" />

属性

继承自 Nativescript TextField 因此它已经具有所有相同的属性

属性

• variant 可选

用于设置文本框变体的属性。可以是 outline 或 underline 或 filled。没有值表示 underline 文本框

• errorColor 可选

用于设置文本框错误颜色的属性。

• helper 可选

用于设置文本框辅助文本的属性。

• floating 可选

用于设置文本框浮动状态的布尔属性。