• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

nadsonfernando/input-materialdesign-widget: Appcelerator Text Field concept Mate ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

nadsonfernando/input-materialdesign-widget

开源软件地址(OpenSource Url):

https://github.com/nadsonfernando/input-materialdesign-widget

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

input-materialdesign-widget

Gittio

Appcelerator TextField Material Design concept!

This is a widget based on Material Design concept, which works for iphone, ipad and android, even Android.

Installation

Use Gittio to install:

$ gittio install input-materialdesign@version

Usage

It is quite simple to create a widget, just declare your widget in the xml, with only a property called 'titleHint' and is ready to use. You choose to collocate the attributes either in the 'xml' file in question or in the 'tss' file (recommended) to maintain a cohesion and responsibility for each layer.

This component is well decoupled, being able to stylize and interact with it Below you will see some examples.

Simple input

<Widget src="input-materialdesign" id="textfieldTest"/>
"#textfieldTest": {
    titleHint: "Username"
}

Input with character counter

Input with character counter, the maximum number of characters is set, when the component exceeds, the component shows an error notification.

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

Input with required fields

When a field is orbit.

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

Input with validation email and number

It is possible to validate if the field typed is an email or a valid number through the 'maskType' attribute (email, number).

email

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

number

"#textfieldTest": {
    maskType: "number"
}

Input with password

Just by setting the 'password' property the component already hides the characters.

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

It is also possible to add an action icon in the component, just by setting the 'iconAction' property in the file and 'tss' and creating a controller file for a callback function, see:

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

<Widget src="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;
	}
});

another examples

Now it is possible to choose 3 types of animation besides the default [leftToRight, leftToRightToRightOut, expand]

leftToRight

leftToRightToRightOut

expand

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

Methods

There are the methods available to access from .js files.

Functions Description
getValue Returns the value of input
setValue Assigns value to input
setEditable The input block
focus Gives focus on field
blur Take the focus away from the camera
ANIMATION_UP Animation rise
ANIMATION_DOWN Animation descent
listener(event, callback) Assigns event for input , listening to a callback
clickIconAction(callback) IconAction's click return function
setPasswordMask(value) Defines whether the field will show or hide the characters
setIconAction(value) Defines action icon
setEditable(value) Defines whether the component will be locked or not

Attributes

There are all attributes supporting by this widget.

Attributes type Description
animationDuration Number Duration animation
width String, Number Sets the width
colorFocus String Sets the color when the focused field
colorDefault String Sets the standard color when the field started
colorFont String Sets the font color
titleHint String Sets title
top String, Number Defines the top
bottom String, Number Defines the bottom
left String, Number Defines the left
right String, Number Defines the right
keyboardType String Defines the keyboardType
returnKey String Defines the returnKey from keyboard
password String Defines if TextField should have passwordMask
editable Boolean Defines whether the input starts blocked
maxLength Number Defines the maximum number of characters
minLength Number Defines the minimum number of characters
exceedingColor String Set the color when it exceeds the reported number of characters
toUpperCase Boolean Sets the field to get me high box
maskType ['number' or 'email'] String Defines whether some shade to the field, as there is no default , but can be defined as numeric, accepting only numbers, or you can spend a regular expression whatsoever.
maskTypeDescription String Description of the alert
required String Defines whether the field is required , passing a message as parameter



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
CaiJimmy/card: 发布时间:2022-08-18
下一篇:
HBM/md-components: Material Design React Components发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap