input-materialdesign-widget, Appcelerator文本字段概念材料设计

分享于 

7分钟阅读

GitHub

  繁體 雙語
Appcelerator Text Field concept Material Design
  • 源代码名称:input-materialdesign-widget
  • 源代码网址:http://www.github.com/NadsonFernando/input-materialdesign-widget
  • input-materialdesign-widget源代码文档
  • input-materialdesign-widget源代码下载
  • Git URL:
    git://www.github.com/NadsonFernando/input-materialdesign-widget.git
    Git Clone代码到本地:
    git clone http://www.github.com/NadsonFernando/input-materialdesign-widget
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/NadsonFernando/input-materialdesign-widget
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    input-materialdesign-widget

    Gittio

    Appcelerator TextField材质设计概念 !

    这是基于材料设计( )的小部件,它适用于 iphone。ipad和安卓,甚至是安卓。

    安装

    使用 Gittio插件安装:

    $ gittio install input-materialdesign@version

    用法

    创建小部件非常简单,只需在xml中声明你的小部件,只有一个名为'titlehint'的属性,并且。 你选择在'xml'文件中或者'tss'文件( 推荐推荐) 中配置属性,以保持每个层的聚合和责任。

    这个组件是很好的分解的,能够以下面的方式进行化建和交互,你将看到一些例子。

    简单输入

    <Widgetsrc="input-materialdesign"id="textfieldTest"/>
    
    "#textfieldTest": {
    
    
     titleHint:"Username"
    
    
    }
    
    
    
    
    带字符计数器的输入

    输入字符计数器,设置最大字符数,当组件超出时,组件显示错误通知。

    <Widgetsrc="input-materialdesign"id="textfieldTest"/>
    
    "#textfieldTest": {
    
    
     titleHint:"Username",
    
    
     maxLength: 10
    
    
    }
    
    
    
    

    输入所需字段

    当字段处于轨道上时。

    
    "#textfieldTest": {
    
    
     required:"Required field"
    
    
    }
    
    
    
    

    带有验证电子邮件和数字的电子邮件输入

    如果键入的字段是电子邮件或者通过'分隔符'属性( 电子邮件,号码)的有效数字,则可以验证该字段。

    email
    
    "#textfieldTest": {
    
    
     maskType:"email"
    
    
    }
    
    
    
    

    number
    
    "#textfieldTest": {
    
    
     maskType:"number"
    
    
    }
    
    
    
    
    输入密码

    通过设置'密码'属性,组件已经隐藏了字符。

    <Widgetsrc="input-materialdesign"id="textfieldTest"/>
    
    "#textfieldTest": {
    
    
     titleHint:"Password",
    
    
     password: true
    
    
    }
    
    
    
    

    也可以在组件中添加操作 icon,只是通过在文件和'tss'中设置'iconaction'属性,并为回调函数创建控制器:

    The code passed in the 'iconAction' attribute is some 'Fontawesome' unicode, you can use any icon in the link below, just pass the unicode correctly.

    fontawesome。io/icon

    <Widgetsrc="input-materialdesign"id="textfieldTest"/>
    
    "#textfieldTest": {
    
    
     titleHint:"Password",
    
    
     password: true,
    
    
     iconAction: 'uf070', 
    
    
    }
    
    
    
    
    var _toFlag =false;$.textfieldTest.clickIconAction(function(e) {
     $.textfieldTest.setValue('');
     $.textfieldTest.setIconAction('');
     if(!_toFlag) {
     $.textfieldTest.setPasswordMask(false);
     $.textfieldTest.setIconAction('uf06e');
     _toFlag =true; 
     } else { 
     $.textfieldTest.setPasswordMask(true); 
     $.textfieldTest.setIconAction('uf070');
     _toFlag =false;
     }
    });

    另一个例子

    现在,除了默认的[leftToRight, leftToRightToRightOut, expand ] 之外,还可以选择 3类型的动画

    leftToRight

    leftToRightToRightOut

    expand

    <Widgetsrc="input-materialdesign"id="textfieldTest"/>
    
    "#textfieldTest": {
    
    
     titleHint:"Company User",
    
    
     animationType: 'leftToRight'//or leftToRightToRightOut or expand, When you do not add anything, it's standard animation.
    
    
    }
    
    
    
    

    方法

    有可以从 .js 文件访问的方法。

    函数说明
    getValue返回输入的值
    setValue为输入指定值
    setEditable输入块
    focus将焦点放在字段上
    blur把焦点从镜头中去掉
    ANIMATION_UP动画上升
    ANIMATION_DOWN动画下降
    listener(event, callback)为输入指定事件,侦听回调
    clickIconAction(callback)单击iconaction返回函数
    setPasswordMask(value)定义字段是否将显示或者隐藏字符
    setIconAction(value)定义操作 icon
    setEditable(value)确定是使用显式高度还是测量高度的一种简便方法

    属性

    这里部件支持所有属性。

    属性类型说明
    animationDuration号码持续时间动画
    width字符串,数字设置宽度
    colorFocus字符串设置聚焦字段时的颜色
    colorDefault字符串当字段开始时设置标准颜色
    colorFont字符串设置字体颜色
    titleHint字符串设置标题
    top字符串,数字定义顶部
    bottom字符串,数字定义底部
    left字符串,数字定义左边
    right字符串,数字定义正确
    keyboardType字符串定义 keyboardType
    returnKey字符串从键盘定义 returnKey
    password字符串定义TextField是否应具有 passwordMask
    editable布尔型定义输入是否已经被阻止
    maxLength号码定义最大字符数
    minLength号码定义最小字符数
    exceedingColor字符串设置超过报告数量的颜色时的颜色
    toUpperCase布尔型设置该字段以获得我的高框
    maskType ['number' or 'email']字符串确定是使用显式高度还是测量高度的一种简便方法。
    maskTypeDescription字符串警报的说明
    required字符串定义是否需要字段,将消息传递为参数

    文本  DES  MAT  设计  Material  MATE  
    相关文章