nativescript-nbmaterial-textinput
An implementation of material Text Input with animation effect (float text). For iOS and Android.
npm i --save nativescript-nbmaterial-textinput
  • Version: 1.0.1
  • GitHub:
  • Downloads:
    • Last Day:   3
    • Last Week:  7
    • Last Month: 30

Nativescript implementation of the Material TextInput

The module implement Material calendar on both platforms iOS and Android. The calendar implements slide transition effects. The pager lets you change months using a swipe.

The module provide some css class:

  • fullwidth : a full width text input (no margin, no borders...)
  • dense: a smell input
  • error: display text in red (add this class when the field is on error)

This module provide animation effect for float labels.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:ti="nativescript-nbmaterial-textinput">
<ti:TextLayout rows="auto,auto" id="textinput" class="fullwidth dense">
<ti:TextPlaceholder text="TopFix Height"></ti:TextPlaceholder>
<ti:MultiLine hint="" text="{{textInput}}" editable="true" maxHeight="100"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="textinput1" class="fullwidth dense error">
<ti:TextPlaceholder text="Middle0"></ti:TextPlaceholder>
<TextField hint="" text="{{textInput1}}"/>
<Label text="Erreur de saisie" textWrap="true" class="error" />
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="textinput2" class="fullwidth dense">
<ti:TextPlaceholder text="Middle1"></ti:TextPlaceholder>
<TextField hint="Saisis" text="{{textInput2}}"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="textinput3" class="fullwidth dense">
<ti:TextPlaceholder text="Middle2"></ti:TextPlaceholder>
<TextField hint="Saisis" text="{{textInput3}}"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="textinput4" class="fullwidth dense">
<ti:TextPlaceholder text="Middle3"></ti:TextPlaceholder>
<TextField hint="Saisis" text="{{textInput4}}"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="autogrow" class="fullwidth dense">
<ti:TextPlaceholder text="Top Autogrow"></ti:TextPlaceholder>
<ti:MultiLine hint="" text="{{autogrow}}" editable="true"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="visible" class="fullwidth dense">
<ti:TextPlaceholder text="Visible"></ti:TextPlaceholder>
<TextField hint="Saisis gros" text="{{visible}}"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="textinput5" class="fullwidth dense">
<ti:TextPlaceholder text="Bottom"></ti:TextPlaceholder>
<TextField hint="Saisis gros" text="{{textInput5}}"/>
</ti:TextLayout>
<ti:TextLayout rows="auto,auto" id="autogrowb" class="fullwidth dense">
<ti:TextPlaceholder text="Bottom AutoGrow"></ti:TextPlaceholder>
<ti:MultiLine hint="Saisis gros" text="{{autogrowb}}"/>
</ti:TextLayout>
</Page>

}

The TextLayout has this interface:

export declare class TextLayout extends LayoutBase {
focused: boolean;
hasText: boolean;
}
export declare class SingleLine extends TextField {
}
export declare class MultiLine extends TextView {
}

See all modules here