Botones y enlaces

Los botones y enlaces son uno de los componentes más utilizados en la programación de cualquier aplicación para un dispositivo móvil. Para utilizarlos simplemente tenemos que añadir el atributo "ion-button" a un elemento tipo "button" o a un enlace tipo "a" (ambos casos se mostrarán visualmente de la misma forma), por ejemplo:

<button ion-button>Apriétame!</button>
<a href="http://google.es" ion-button>Apriétame!</a>

Adoptando en ambos casos la misma apariencia:

Ionic también incluye una serie de estilos que nos permitirán cambiar su color. Para esto simplemente tenemos que añadir el atributo "color" y elegir uno de los colores: light, secondary, danger o dark. Por ejemplo para aplicar el color light escribiríamos <button ion-button color="light">Light</button>. A continuación se incluye un ejemplo del resultado obtenido al aplicar los diferentes colores:

A continuación se van a explicar algunas opciones de configuración más que podemos usar con los botones.

Estilo del botón

Podemos modificar la apariencia de los botones añadiendo diferentes atributos al mismo. Por ejemplo, con el atributo "outline" obtendremos un botón en el que se dibuja solamente el borde (en el color indicado), con "round" obtendremos un botón con los bordes redondeados, y con "clear" indicaremos que no se dibuje el borde:

<button ion-button color="danger" outline>Outline</button>
<button ion-button color="secondary" round>Round</button>
<button ion-button clear>Clear</button>
<!-- También podemos combinarlos... -->
<button ion-button color="dark" round outline>Round</button>

Obteniendo:

Ancho de los botones

Mediante los atributos "block" y "full" podemos modificar el ancho de los botones para que ocupen todo el ancho disponible. La diferencia entre estas dos opciones es que con "block" se respectarán los márgenes y con "full" se forzará a que llegue hasta el borde de la pantalla. En el siguiente ejemplo se puede ver claramente la difenrencia:

Para lo que tendríamos que escribir el siguiente código:

<button ion-button block>Block Button</button>
<button ion-button full>Full Button</button>

Tamaño de los botones

También podemos modificar el tamaño de los botones añadiendo los atributos "small" o "large", para crear botones más pequeños o más grandes, respectivamente:

<button ion-button small>Small button</button>
<button ion-button large>Large button</button>

Botones con iconos

Podemos añadir imágenes a los botones de forma muy sencilla usando los iconos incluidos con Ionic. Para incluir un icono a un botón simplemente tendremos que utilizar la etiqueta "ion-icon" que hemos visto en la sección anterior, e insertarla en la sección de contenido (junto al texto). Además tendremos que añadir un atributo al botón para indicar la posición, pudiendo utilizar "icon-left" (para colocar el icono a la izquierda), "icon-right" (a la derecha) o "icon-only" (en caso de que el botón solo contenga el icono). A continuación se incluye un ejemplo de cada caso:

<button ion-button icon-left>
  <ion-icon name="home"></ion-icon> Left Icon
</button>

<button ion-button icon-right>
  Right Icon <ion-icon name="home"></ion-icon>
</button>

<button ion-button icon-only>
  <ion-icon name="home"></ion-icon>
</button>

Con lo que obtendríamos:

Además podemos combinar estas etiquetas con las que ya hemos visto antes, para crear botones redondeados, con el borde o sin borde, de diferetes tamaños, etc.

Botones en cabeceras

Para poner botones en una cabecera o pie de página simplemente tenemos que añadirlos dentro de esta sección usando la etiqueta "<ion-buttons>". Dentro de esta etiqueta colocaremos los botones de forma normal. Además tenemos que utilizar un atributo sobre la etiqueta "ion-buttons" para indicar la posición de los iconos en la barra. Como esta posición depente de la plataforma, Ionic provee los atributos "start" y "end" para indicar que los iconos se coloquen al inicio de la zona de iconos o al final, respectivamente. Si queremos podemos forzar la alineación usando los atributos "left" y "right", aunque se recomienda usar los otros para que adopten la apariencia de la plataforma destino. A continuación se incluye un ejemplo de uso:

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title> Ejemplo </ion-title>
  </ion-navbar>
</ion-header>

La apariencia de los botones y la disposición en la barra dependerá de la plataforma que lo visualice (ver siguiente figura). En el caso de Android el título se alineará a la izquierda y los botones a la derecha, y se usarán los iconos del tema Material Design. Y en el caso de iOS el título aparecerá centrado y los iconos se distribuirán a los lados, además los iconos serán también los correspondientes a esta plataforma. Para Windows Phone se adoptará una apariencia similar a la de Android, pero con el título en mayúsculas y el color de los iconos más oscuro.