nativescript-material-textfield
by farfromrefuge | v3.3.2
Material textfield component
npm i --save nativescript-material-textfield
  • Version: 3.3.2
  • GitHub:
  • Downloads:
    • Last Day:   1
    • Last Week:  38
    • Last Month: 70

npm npm GitHub forks GitHub stars

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

<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"/>

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

<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.