Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nativescript-community/ui-material-textview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NativeScript Material Text view

Material Design's Text view component for NativeScript.

Installation
Changelog
FAQ
Usage
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

tns plugin add nativescript-material-textview@2.5.4

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.

@nativescript-community/ui-material-textview