Botones y enlaces

Los botones y enlaces son uno de los componentes más utilizados e incluso se podría decir que fundamentales en la programación de cualquier aplicación para un dispositivo móvil. Para utilizarlos simplemente tenemos que añadir la clase CSS button a un elemento tipo button o a un enlace tipo a normal (ambos casos se mostrarán visualmente de la misma forma), por ejemplo:

<button class="button">Apriétame!</button>
<a href="index.html" class="button">Apriétame!</a>

Los botones también tienen una serie de estilos CSS que nos permitirán cambiar su color. Los colores incluidos son los mismos que para las cabeceras y pies de página pero con el prefijo "button". Estos son:

Para usarlos simplemente tenemos que añadir la clase CSS deseada de la forma:

<button class="button button-positive">Apriétame!</button>
<a href="index.html" class="button button-dark">Apriétame!</a>

Para crear un enlace que cargue una página distinta de la actual podemos hacerlo de forma normal, poniendo la dirección de la nueva página en el campo href, por ejemplo:

<a href="bibliografia.html" class="button">Ir a la bibliografía</a>

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

Ancho del botón

Podemos variar el ancho del botón para que ocupe todo el ancho posible pero respetando el margen o padding definido (usando la clase button-block) o para que llegue hasta el borde de la pantalla eliminando los posibles márgenes (mediante la clase button-full). En el siguiente ejemplo se puede ver claramente la difenrencia:

Para conseguir estos botones tendríamos que escribir el siguiente código:

<button class="button button-block button-positive">
  button-block
</button>

<button class="button button-full button-positive">
  button-full
</button>

Tamaño del botón

Podemos usar las clases button-small o button-large para crear botones más pequeños o más grandes, respectivamente:

<button class="button button-small button-assertive">
  Small Button
</button>
<button class="button button-large button-positive">
  Large Button
</button>

Botones con iconos

Podemos añadir imágenes a los botones de forma muy sencilla usando los iconos incluidos con Ionic (llamados Ionicons, ver sección de Iconos), o también podemos añadir iconos usando otra librería. Para añadir un icono a un botón se puede realizar de distintas formas:

• Dentro del propio botón o enlace añadiendo primero una de las siguientes clases: icon, icon-left o icon-right, para indicar la posición del icono, y después la clase que define el icono a utilizar (ver sección Iconos).

• También podemos añadir el icono añadiendo una etiqueta hija, dentro del botón o enlace. Esta opción es la recomendada si se usa una librería externa de iconos, como FontAwesome por ejemplo.

A continuación se incluyen algunos ejemplos de como añadir iconos:

<button class="button">
  <i class="icon ion-home"></i> Home
</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a"></button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

Con lo que obtendríamos el siguiente resultado:

Al aplicar la clase button-clear sobre el botón hacemos que se muestr únicamente el texto y el icono, quitando el borde y el fondo. Si el botón únicamente tuviera icono entonces tenemos que usar la clase button-icon para que solo se vea el icono.

Botones en cabeceras o en pies de página

Para poner botones en una cabecera o pie de página simplemente tenemos que añadirlos antes o después del título, con lo cual provocaremos que el botón se coloque a la izquierda o a la derecha del título respectivamente, por ejemplo:

<ion-header-bar>
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</ion-header-bar>

Con lo que obtendríamos:

Si no hubiera título podemos usar la clase CSS pull-right para alinear el botón a la derecha de la barra:

<ion-footer-bar>
  <button class="button button-clear pull-right">Right</button>
</ion-footer-bar>

Al poner un botón en una cabecera o pie de página este tomará el estilo aplicado a la barra por defecto, por lo que no es necesario añadir ningún estilo más. Sin embargo si queremos le podemos aplicar algunas de las clases que hemos visto para colorear los botones.

También podemos borrar el borde y fondo del botón para que solamente se vea el icono del mismo. Para esto tenemos que añadir la clase button-icon en caso de que el botón solo tenga un icono o button-clear si tuviera texto, por ejemplo:

<ion-header-bar>
  <button class="button button-icon icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button button-clear button-positive">Edit</button>
</ion-header-bar>

Barra de botones

Los botones se puede agrupar de forma muy sencilla simplemente metiéndolos dentro de un <div> con la clase button-bar, por ejemplo:

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

Con lo que obtendríamos:

Estas barras de botones se puede utilizar también en cabeceras y en pies de página.