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

    7.0.24 • Public • Published

    NativeScript Material Text field

    Material Design's Text field 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-textfield

    For NativeScript 6.x

    • tns plugin add nativescript-material-textfield

    If using tns-core-modules

    • tns plugin add nativescript-material-textfield@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-textfield" on the Page element.

    XML

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

    CSS

    mdtextfield {
        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 { NativeScriptMaterialTextFieldModule } from "@nativescript-community/ui-material-textfield/angular";
    
    @NgModule({
        imports: [
            NativeScriptMaterialTextFieldModule,
            ...
        ],
        ...
    })
    <MDTextField  helper="example helper" placeholderColor="green" keyboardType="datetime"
            hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
            (textChange)="onTextChange($event)"></MDTextField>

    NativeScript + Vue

    import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';
    
    Vue.use(TextFieldPlugin);
    <MDTextField 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:

    <MDTextField v-model="value" />

    API

    Attributes

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

    • variant optional

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

    • errorColor optional

    An attribute to set the error color of the textfield.

    • helper optional

    An attribute to set the helper text of the textfield.

    • floating optional

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

    Install

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

    DownloadsWeekly Downloads

    385

    Version

    7.0.24

    License

    Apache-2.0

    Unpacked Size

    202 kB

    Total Files

    41

    Last publish

    Collaborators

    • sebjean
    • cjohn001
    • edusperoni
    • asharghi
    • farfromrefuge
    • triniwiz
    • eddyverbruggen
    • rigor789
    • nathanaela
    • walkerrunpdx
    • dnr
    • keerl
    • cvietor
    • bradmartin
    • rdlabo
    • tralves