@nativescript-community/ui-material-textfield
TypeScript icon, indicating that this package has built-in type declarations

7.2.54 • Public • Published

NativeScript Material Text field

Material Design's Text field component for NativeScript.

npm npm

Contents

  1. Installation
  2. Changelog
  3. FAQ
  4. Usage
  5. API

Installation

For NativeScript 7.0+

  • tns plugin add @nativescript-community/ui-material-textfield

For NativeScript 6.x

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

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textfield" on the Page element.

XML

<Page xmlns:mdt="@nativescript-community/ui-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

mdtextfield {
    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-community/ui-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-community/ui-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" />

API

Attributes

Inherite from NativeScript TextField so it already has all the same 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.

Package Sidebar

Install

npm i @nativescript-community/ui-material-textfield

Weekly Downloads

2,226

Version

7.2.54

License

Apache-2.0

Unpacked Size

109 kB

Total Files

32

Last publish

Collaborators

  • dgmachado
  • classicoldsong
  • mayerlench
  • jcassidyav
  • sebjean
  • cjohn001
  • edusperoni
  • asharghi
  • farfromrefuge
  • triniwiz
  • eddyverbruggen
  • rigor789
  • walkerrunpdx
  • dnr
  • keerl
  • cvietor
  • bradmartin
  • rdlabo
  • tralves