@nativescript-community/ui-material-textview
Material Design Text views allow users to input text into your app.
npm i --save @nativescript-community/ui-material-textview

NativeScript Material Text view

Material Design's Text view 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-textview

For NativeScript 6.x

  • tns plugin add nativescript-material-textview

If using tns-core-modules

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

Changelog

FAQ

Usage

Plain NativeScript

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

XML

<Page xmlns:mdt="@nativescript-community/ui-material-textview">
<StackLayout horizontalAlignment="center">
<mdt:TextView text="raised textview"/>
<mdt:TextView variant="flat" text="flat textview"/>
<mdt:TextView variant="text" text="text textview"/>
<mdt:TextView elevation="5" rippleColor="red" text="raised custom textview"/>
</StackLayout>
</Page>

CSS

mdtextview {
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 { NativeScriptMaterialTextViewModule } from "@nativescript-community/ui-material-textview/angular";

@NgModule({
imports: [
NativeScriptMaterialTextViewModule,
...
],
...
})
<MDTextView  helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
(textChange)="onTextChange($event)">
</MDTextView>

NativeScript + Vue

import TextViewPlugin from '@nativescript-community/ui-material-textview/vue';

Vue.use(TextViewPlugin);
<MDTextView 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:

<MDTextView v-model="value" />

API

Attributes

Inherite from NativeScript TextView so it already has all the same attributes.

  • variant optional

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

  • errorColor optional

An attribute to set the error color of the textview.

  • helper optional

An attribute to set the helper text of the textview.

  • floating optional

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