ionic Формы и поля ввода
Класс list также можно использовать для элементов ввода. Классы item-input и item задают текстовое поле и его метку.
Свойство поля ввода: placeholder
В следующем примере ширина по умолчанию составляет 100% (без границ слева и справа), а атрибут placeholder используется для установки подсказки об ожидаемом значении поля ввода.
<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>
Свойство поля ввода: input-label
Используйте input-label, чтобы разместить метку слева от поля ввода.
<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>
Метки, расположенные друг над другом
Стек-метки обычно размещаются в верхней части поля ввода. Каждый элемент задаётся классом item-stacked-label. Каждому полю ввода требуется input-label. В следующем примере также используется атрибут placeholder для задания подсказок ввода.
<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>
Плавающие метки
Плавающие метки похожи на стек-метки, но у плавающих меток есть эффект анимации. Каждому элементу нужен класс item-floating-label, а меткам ввода нужен 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>
Формы с отступами
По умолчанию каждое поле ввода имеет ширину 100%, но мы можем использовать классы list, list-inset или card, чтобы задать отступы формы. Класс card включает тень.
<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>
Поля ввода с отступами
Используйте list-inset, чтобы задать список с отступами. Используйте стиль item-input-inset, чтобы встроить кнопку.
<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>
Поля ввода с иконками
Иконки можно легко добавить к полям ввода item-input. Иконки можно разместить перед <input>.
<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>
Поля ввода в заголовке
Поле ввода можно разместить в заголовке, а также добавить кнопку отправки или отмены.
<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>
Другие расширения