Installation

If using @nativescript :

• tns plugin add nativescript-material-textfield

If using tns-core-modules

• tns plugin add nativescript-material-textfield@2.5.4

Be sure to run a new build after adding plugins to avoid any issues.

---

Material Design Spec

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdt="nativescript-material-textfield" on the Page element

XML

1<Page xmlns:mdt="nativescript-material-textfield">
2    <StackLayout horizontalAlignment="center">
3        <mdt:TextField text="raised textfield"/>
4        <mdt:TextField variant="flat" text="flat textfield"/>
5        <mdt:TextField variant="text" text="text textfield"/>
6        <mdt:TextField elevation="5" rippleColor="red" text="raised custom textfield"/>
7   </StackLayout>
8</Page>

CSS

1mdctextfield {
2    ripple-color: blue;
3    elevation: 4;
4    stroke-color: blue;             // the border color when active
5    stroke-inactive-color: green;   // the border color when inactive
6    floating-color: blue;           // the floating placeholder color when active
7    floating-inactive-color: green; // the floating placeholder color when inactive
8}

NativeScript + Angular

1import { NativeScriptMaterialTextFieldModule } from "nativescript-material-textfield/angular";
2
3@NgModule({
4    imports: [
5        NativeScriptMaterialTextFieldModule,
6        ...
7    ],
8    ...
9})

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

NativeScript + Vue

1import TextFieldPlugin from 'nativescript-material-textfield/vue';
2
3Vue.use(TextFieldPlugin);

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

Also, you can bind the text to some instance data using the v-model directive:

1<MDTextField v-model="value" />

Attributes

Inherite from Nativescript TextField so it already has all the same attributes

Attributes

• variant optional

An attribute to set the variant of the textfield. Can be outline or underline or filled. No value means underline textfield

• errorColor optional

An attribute to set the error color of the textfield.

• helper optional

An attribute to set the helper text of the textfield.

• floating optional

A boolean attribute to set the floating state of the textfield.