May 21, 2021 ionic
The list class can also be used for input elements. The item-input and item classes specify text boxes and their labels.
In the following example, the default is 100% width (there is no border on the left and right) and the placeholder property is used to set the prompt for entering the expected value of the field.
<div class="list"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> <label class="item item-input"> <textarea placeholder="Comments"></textarea> </label> </div>
Use input-label to place the label on the left side of the input box input.
<div class="list"> <label class="item item-input"> <span class="input-label">用户名:</span> <input type="text"> </label> <label class="item item-input"> <span class="input-label">密码:</span> <input type="password"> </label> </div>
Stacked labels are usually located at the head of the input box. E ach option is specified using the item-stacked-label class. E ach input box needs to specify input-label. The following example also uses the placeholder property to set the information input prompt.
<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>
Floating labels are similar to stacked labels, but floating labels have an animated effect, with each option specifying the item-floating-label class, and entering labels requiring an 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> <label class="item item-input item-floating-label"> <span class="input-label">Email</span> <input type="text" placeholder="Email"> </label> </div>
By default, each input field is 100% wide, but we can use the list-inset or card class to set the form's padding, with the card class shaded.
<div class="list list-inset"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> </div>
Use list-inset to set up a list of embedded entities. Use the item-input-inset style to inline a button.
<div class="list"> <div class="item item-input-inset"> <label class="item-input-wrapper"> <input type="text" placeholder="Email"> </label> <button class="button button-small"> Submit </button> </div> </div>
The item-input input box can simply add icons. Icons can be added before the .
<div class="list list-inset"> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search"> </label> </div>
The input box can be placed on the head 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" placeholder="搜索"> </label> <button class="button button-clear"> 取消 </button> </div>