Formularios

En Ionic, para crear la disposición de los elementos de un formulario, vamos a utilizar también un elemento lista en el que cada fila será un input del formulario. Esto nos permitirá además aprovechar todas las opciones que vimos para las listas, como por ejemplo añadir cabeceras de secciones para agrupar contenidos.

Both item-input and item is then used to designate each individual input field and it's associated label.

Ionic prefers to create the item-input out of the element so that when any part of the row is tapped then the underlying input receives focus.

Additionally, developers should be aware of the various HTML5 Input types so users will be presented with the appropriate virtual keyboard.

http://ionicframework.com/html5-input-types/

Text Input: Placeholder Labels

In the example, it'll default to 100% width (no borders on the left and right), and uses the placeholder attribute to simulate the input's label. Then the user begins to enter text into the input the placeholder label will be hidden. Notice how can also be used as a multi-line text input.

<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>

Text Input: Inline Labels

Use input-label to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too.

<div class="list">
  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Password</span>
    <input type="password">
  </label>
</div>

Checkbox

Checkboxes allow the user to select a number of items in a set of choices. A good use for a checkbox list would be a filter list to apply multiple filters to a search.

Checkboxes can also have colors assigned to them, such as checkbox-assertive to assign the assertive color.

<ion-list>
  <ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
  <ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
  <ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>
</ion-list>

Radio buttons

Radio buttons let the user select one option in a set of options, unlike a checkbox which allows for multiple selections.

<ion-list>
  <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
  <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
</ion-list>

Botones de activación (toggle)

A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the in order to make the entire toggle easy to tap or drag.

Toggles can also have colors assigned to them, such as toggle-assertive to assign the assertive color.

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

This is an example of multiple toggles within a list. Note the item-toggle class was added along side item for each item.

<ul class="list">
  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>
  ...
</ul>

Select o Desplegables

Ionic's select is styled so its appearance is prettied up relative to the browser's default style. However, when the select elements is opened, the default behavior on how to select one of the options is still managed by the browser.

Each platform's user-interface will be different as the user is selecting an option. For example, on a desktop browser you'll see the traditional drop down interface, whereas Android often has a radio-button list popup, and iOS has a custom scroller covering the bottom half of the window.

<div class="list">
  <label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>
</div>

Selectores de rango

This is a Range. Ranges can be themed to any default Ionic color, and used in various other elements such as a list item or card.

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

<div class="list">
  <div class="item range range-positive">
    <i class="icon ion-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-ios-sunny"></i>
  </div>
</div>

Más información

PreviousTarjetasNextIconos

Last updated