Botones y enlaces
Last updated
Last updated
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:
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:
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 continuación se van a explicar algunas opciones de configuración más que podemos usar con los botones.
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:
Podemos usar las clases button-small o button-large para crear botones más pequeños o más grandes, respectivamente:
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:
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.
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:
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:
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:
Los botones se puede agrupar de forma muy sencilla simplemente metiéndolos dentro de un <div> con la clase button-bar, por ejemplo:
Con lo que obtendríamos:
Estas barras de botones se puede utilizar también en cabeceras y en pies de página.
