National Preventative Mechanism

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

    5.3.12 • Public • Published

    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

    ⚠️ Warning ⚠️

    From NativeScript 5.x using this component will break the NativeScript 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 material-tabs (clone of the NativeScript one, but with a little less features).

    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.

    Install

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

    DownloadsWeekly Downloads

    81

    Version

    5.3.12

    License

    Apache-2.0

    Unpacked Size

    170 kB

    Total Files

    38

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar