Nondeterministic Postrequisite Metaprotocol
    Wondering what’s next for npm?Check out our public roadmap! »

    nativescript-material-textfield
    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-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.


    Material Design Spec

    Usage

    Plain NativeScript

    IMPORTANT: Make sure you include xmlns:mdt="nativescript-material-textfield" on the Page element

    XML

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

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

    Attributes

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

    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-material-textfield

    DownloadsWeekly Downloads

    94

    Version

    3.3.2

    License

    Apache-2.0

    Unpacked Size

    176 kB

    Total Files

    52

    Last publish

    Collaborators

    • avatar