@nativescript-community/ui-material-textview

Installation

Warning :warning: :warning:

From 5.x using material component will break N tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or tabs (clone of N one, but with a little less features)

For N 7.0

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

For N 6.x

• tns plugin add nativescript-material-textview

If using tns-core-modules

• tns plugin add nativescript-material-textview@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-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

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

Attributes

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

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.