nativescript-material-textview
TypeScript icon, indicating that this package has built-in type declarations

3.3.2 • Public • Published

npm npm GitHub forks GitHub stars

Installation

If using @nativescript :

  • 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-material-textview" on the Page element

XML

<Page xmlns:mdt="nativescript-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-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-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.

Package Sidebar

Install

npm i nativescript-material-textview

Weekly Downloads

0

Version

3.3.2

License

Apache-2.0

Unpacked Size

159 kB

Total Files

42

Last publish

Collaborators

  • farfromrefuge