Nativescript 的 Material TextInput 实现

该模块在 iOS 和 Android 两个平台上实现了 Material 日历。日历实现了滑动过渡效果。翻页器允许你通过滑动来改变月份。

该模块提供了一些 CSS 类

• fullwidth：全宽度文本输入（无边距，无边框...）
• dense：紧凑型输入
• error：以红色显示文本（当字段处于错误状态时添加此类）

此模块为浮动标签提供动画效果。

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

}

TextLayout 具有以下接口

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

查看所有模块在这里