Ionic-css:ionic Forms and Input boxes

Ylbtech-ionic-css:ionic Forms and Input boxes

1. back to top

1. Ionic form and input box

The list class can also be used with input elements. The Item-input and item classes Specify a text box and its label.

Input Box Properties: Placeholder

In the following instance, the default is 100% width (no borders on the left and right sides), and the placeholder property is used to set the prompt for the expected value of the input field.

<div Class="List"> <label Class="Item Item-input"> <input Type="Text" Placeholder="First Name"> </label> <label Class="Item Item-input"> <input type< Span class= "pun" >= "text"  placeholder=< Span class= "ATV" > "last Name" > </label>  <label class= "item Item-input" > <textarea  placeholder= "Comments" ></textarea> </label>< span class= "tag" ></DIV>             

Try it?

Input Box Properties: Input-label

Use Input-label to place the label on the left side of the input box.

<div Class="List"> <label Class="Item Item-input"> <span Class="Input-label">User name:</span> <input type= "text" > </label> <label  Class= "item Item-input" > <span class= " Input-label "> password: </span> <input type= "password" span class= "tag" >> </label>< /div>                

Try it?

Stacking labels

Stacked labels are usually located in the header of the input box. Each option is specified using the Item-stacked-label class. Each input box needs to specify Input-label. The following example also uses the placeholder property to set the information entry hint.

<div Class="List"> <label Class="Item Item-input Item-stacked-label"> <span Class="Input-label">First Name</span> <input Type="Text" Placeholder="John"> </label> <label Class="Item Item-input Item-stacked-label"> <span Class="Input-label">Last Name</span> <input Type="Text" Placeholder="Suhr"> </label> <label class="Item item-input item-stacked-label"> <span  Class="Input-label">Email</span> <input type=  "Text" placeholder="[email protected]"> </label></div>  

Try it?

Floating label

Floating labels are similar to stacked labels, but floating labels have an animated effect, each option needs to specify the Item-floating-label class, and the input label needs to specify Input-label.

<div Class="List"> <label Class="Item Item-input Item-floating-label"> <span Class="Input-label">First Name</span> <input Type="Text" Placeholder="First Name"> </label> <label Class="Item Item-input Item-floating-label"> <span Class="Input-label">Last Name</span> <input Type="Text" Placeholder="Last Name"> </label> <labelclass= "item Item-input Item-floating-label" > <span class< Span class= "pun" >= "Input-label" >email </span> <inputtype= "text"  = "Email" ></label></DIV>       

Try it?

Inline forms

The width of each input field is 100% by default, but we can use the list list-inset or the card class to set the form's padding (padding) and the card class has a shadow.

<div Class="List List-inset"> <label Class="Item Item-input"> <input type= "text" placeholder= "first Name" >  </label> <label  class= "item Item-input" > <input type< Span class= "pun" >= "text"  placeholder=< Span class= "ATV" > "last Name" > </label> </DIV>            

Try it?

Inline input fields

Use List-inset to set up an inline entity list. Use the Item-input-inset style to embed a button.

<div Class="List"> <div Class="Item Item-input-inset"> <label class= " Item-input-wrapper "> <input type= "text"  placeholder< Span class= "pun" >= "Email" > </label > <button class=  "button Button-small" > Submit </ Button> </div></div>  

Try it?

An input box with an icon

The Item-input input box makes it easy to add icons. Icons can be added before <input>.

<div Class= "list List-inset" > <label class= "item Item-input "> <i  Class= "icon Ion-search Placeholder-icon" ></i>< Span class= "PLN" > <input type= "text"  placeholder= "Search" > </label> </div>                

Try it?

Header input Box

The input box can be placed in the header, and the Submit or Cancel button can be added.

<div Class="Bar Bar-header Item-input-inset"> <label Class="Item-input-wrapper"> <i class=  "icon Ion-ios-search Placeholder-icon" ></i> <input type= "search" Span class= "PLN" > placeholder= "search" >< Span class= "PLN" > </label> <button  class= "button Button-clear" > cancel </button> </DIV>               

Try it?

2.

2. back to top

3. back to top

4. back to top

5. back to top

1, HTTP://WWW.RUNOOB.COM/IONIC/IONIC-FORM-INPUT.HTML2,

6. back to top

Ylbtech Source: http://ylbtech.cnblogs.com/ This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

Ionic-css:ionic Forms and Input boxes