开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

input-materialdesign-widget

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.

Attributes

There are all attributes supporting by this widget.