¿Necesitas poner, personalizar o saber cuando se ha pulsado un boton en Ionic y no sabes bien cómo funcionan los ion-button?
O, tal vez, lo que quieres es conocer más información sobre cualquier de los campos, funciones o cómo puedes sacarle más partido a estos botones ¿verdad? Si es así, quizás esto sea para ti.
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te enseñaré cómo puedes mostrar los ion-button a tu usuario, cómo puedes personalizarlos y conocer cuando el usuario ha pulsado sobre él.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
¿Cómo se construye un Ion Button?
Para poder utilizar este componente no es necesario que hagas uso de imports, includes, ni nada por el estilo.
Los Buttons ionic son componentes, que como son necesarios en cualquier aplicación, ya vienen integrados en el core del sistema.
Para poder utilizarlo tienes que usar la siguiente etiqueta:
...
<button ion-button>Default</button>
...
Hostia, ¿qué sencillo no? Pues sí, es así de fácil mostrarlo en nuestra pantalla. Valeeee Aitor, ¿pero qué más?
¡Pues nada más, hasta el próximo artículo lector...!
Naaaaaa, que era coña. Va, continuemos.
¿Cómo le pongo colores a los botones?
Mira,
antes de continuar me gustaría que conocieras un poco más sobre los estilos (o themes) en este Framework. Te explico, la plantilla de la aplicación lleva unos colores predeterminados que podrás ver si entras en el archivo:
- src/theme/variables.scss
A parte de encontrar más cosillas que ahora no vienen a cuento, en la parte de abajo del archivo tenemos esto:
...
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
...
Imagino que viendo esto ya sabes por dónde van los tiros ¿verdad? Pues sí, estas variables las podemos usar de la siguiente manera dentro de nuestros botones:
...
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
...
¿A qué es sencillo?
A parte de esto vas a ver una cosa más que tiene que ver con los colores, vamos con ello.
Cómo usar colores personalizados en nuestros Ionic Buttons
Bien, como dice el enunciado, te voy a explicar cuál es la mejor manera para poder incluir colores en tus botones, aunque se puede hacer para todos tus componentes.
Es una manera que te ahorrará mucho tiempo en el largo plazo y, a parte, tendrás todos los estilos centralizados y toda la aplicación con la misma estética.
Si te has dado cuenta, en el código que he puesto en la parte de arriba, los colores están como "almacenados" en variables.
Y esto, ¿cómo es posible? la respueta está en la tecnología "SASS", pero de esta te hablaré más tarde, por ahora quédate con el nombre.
Como podrás imaginar, podemos hacer nuestras propias variables de color y asignarlas directamente a nuestros componentes y a nuestros Ionic Buttons.
Para hacerlo basta con que sobrescribamos el archivo que he mencionado antes de la siguiente manera:
...
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
mi-color: #054964 //Esta es la línea que nos interesa.
);
...
Yeah! ya tienes tu variable. Ahora, para aplicársela a tu botón:
...
<button ion-button color="mi-color">Secondary</button>
<button ion-button color="mi-color">Danger</button>
...
Me gustaría que antes de seguir leyendo probases estos ejemplos, verás que es cierto y que si que mola.
Otra ventaja: Si estandarizamos el uso de colores desde el principio de la aplicación, utilizando este sistema, en el momento que queramos cambiar el diseño, modificando solo una vez una línea de código se nos aplicará sobre todos los componentes a los que tenemos asignados este color.
Vale, visto esto estás en disposición de pasar al siguiente paso. Pero antes te dejo un vídeo que ilustra perfectamente lo que has aprendido ya y lo que vamos a aprender:
Diferentes tipos de ion-button
Ahora vas a ver los diferentes tipos de botones que tienes a tu disposición de manera predeterminada.
Aclaro antes de continuar, que son simples clases predefinidas de CSS, si quisieramos construir estos botones nosotros mismos, podríamos. Pero los creadores del FW también quieren que ahorremos tiempos de desarrollo.
Botón por defecto:
Este botón es el que se agregar por defecto, tonalidad azul marca de Ionic.
...
<button ion-button>Default</button>
...
Botón de diferente color:
Similar al anterior, pero con un color diferente. Fíjate en la propiedad color.
...
<button ion-button color="secondary">Secondary</button>
...
Por cierto, aquí tienes las opciones por defecto para esta opción:
...
<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
...
Full Button o Botón de ancho completo:
Este botón ocupará el ancho completo del componente padre. Fíjate en la propiedad full.
...
<button ion-button full>Full Button</button>
...
Block Button o Botón de bloque:
Similar al anterior, pero este tiene las esquinas redondeadas. Fíjate en la propiedad block.
...
<button ion-button block>Block Button</button>
...
Round Button o botón redondeado:
Este es el botón, qué, por norma general, es el más utilizado. Es un botón normal, pero tiene los cantos completamente redondeados. Es como si le aplicásemos un border-radius de 100%.
Fíjate en la propiedad round.
...
<button ion-button round>Round Button</button>
...
Outline Buttons o botones con borde:
Este tipo de ion buttons es usado en varias aplicaciones famosas, como LinkedIn.
Son botones que tiene un borde exterior de color y las letras de color también. Pero carecen de fondo, relleno, o fondo transparente, con lo que se funden con el fondo del componente padre.
Fíjate en la propiedad outline.
...
<button ion-button full outline>Outline + Full</button>
...
Icon Button o botón con icono:
Este tipo de ion-buttons te permite poner un icono al principio, o al final, de nuestro botón. Esta técnica es muy usada por todos los programadores 2.0 para darle una estética genial a sus aplicaciones.
Fíjate en la propiedad icon-start.
...
<button ion-button icon-start>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
...
Si lo miras bien, puedes seleccionar la posición del icono en la propiedad "icon-start".
En este caso concreto aparecerá al principio. Si lo quieres al final tendrías que usar "icon-end".
Nota: Si quisieras poner solo el icono tendríamos que usar lo siguiente:
...
<button ion-button icon-only>
<ion-icon name="star"></ion-icon>
</button>
...
En esta opción, el botón carece de texto (como nosotros queríamos) y ya estaría disponible para su uso.
Button Size o tamaño de los botones
Ahora verás los tamaños predeterminados de los botones:
...
<button ion-button large>Large</button>
<button ion-button>Default</button>
<button ion-button small>Small</button>
...
Pues aquí están, el propio nombre del botón en este ejemplo te dice cual es el tamaño de cada uno.
Ionic PopUp Buttons
Bien, la construcción de este tipo de Botones, Buttons dentro de un alert, lo hablamos en otro artículo que lo puedes ver aquí: Alerts Ionic. A parte encontrarás muchas más información como la de este artículo. Pásate por él, te aseguro que no te vas a arrepentir.
Aún así, vamos a ver un ejemplo interesante de cómo puedes agregarlo:
Primero, el css:
// styles.scss
.fake-button {
background-color: var(--ion-color-primary);
color: white;
text-align: center;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}
Ahora el código TS:
import { AlertController } from 'ionic-angular';
constructor(public alertController: AlertController) {}
async presentAlertWithButtonInside() {
const alert = await this.alertController.create({
title: 'Alerta Especial',
message: 'Este es un mensaje con un botón en el interior.',
inputs: [
{
name: 'button',
type: 'button',
value: 'Haz clic aquí',
label: 'Botón Falso',
cssClass: 'fake-button',
handler: () => {
console.log('Botón falso pulsado');
// Aquí tu lógica al pulsar el botón falso
}
}
],
buttons: [
{
text: 'Cancelar',
role: 'cancel'
}
]
});
await alert.present();
}
ButtonProperties o Propiedades de los botones
Ahora que ya conocemos varios usos de los botones, vamos a ver la mayoría de las propiedades que les podemos asignar actualmente:
| Atributo | Tipo | Detalles |
|---|---|---|
| block | boolean |
Si es verdad rellena el ancho completo del contendor. |
| clear | boolean |
Si es verdad pinta el color de fondo de transparente. |
| color | string |
Nos permite asignarle un color al botón. |
| default | boolean |
Si es verdad activa el botón por defecto del theme. |
| full | boolean |
Si es verdad activará el ancho completo del botón. |
| large | boolean |
Si es verdad pondrá el estilo de botón grande. |
| mode | string |
Esta propiedad nos permite asignar el tipo de estilo dependiente de la plataforma. |
| outline | boolean |
Si es verdad pinta un botón transparente con borde y letras de color. |
| round | boolean |
Si es verdad pinta los bordes redondeados. |
| small | boolean |
Si es verdad pinta un botón pequeño. |
| solid | boolean |
Este es el modo por defecto de los botones. Es verdadero por defecto. |
| strong | boolean |
Si es verdadero aplica negrita a las letras del botón. |
¿Has llegado hasta aquí? eso es porque realmente estás interesado en aprender un poco más, no lo que todo el mundo que use el Framework sabe ya.
Adelante, vamos a ver algo un poco más avanzado. Digamos, a utilizar el componente en profundidad.
Uso avanzado de Ionic button
Muchas veces, y más que nada en tutoriales que exceden de lo corriente, como es este, te habrás encontrado con propiedades como las que hemos visto antes encerradas entre corchetes.
Esto es porque si lo construyes así puedes pasarle valores al componente en cuestión. Es más, puedes meter condicionales y más cosas interesantes.
Más fácil con un ejemplo, mira:
...
<button ion-button [color]="myColor" [round]="isRound">
Secondary (Round)
</button>
...
Si miras bien en las líneas anteriores, puedes ver que le estamos pasando una variable TypeScript como parámetro.
Cuando esa variable cambie de estado nuestro botón también cambiará. Es interesante.
Ahora vas a verlo de una manera un poco distinta:
...
<button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
Danger (Solid)
</button>
...
En este ejemplo estás evaluando el color con un "if ternario". En caso de que isDanger sea verdad, usará danger a tu botón como color. En el caso contrario lo pondrá en primary. Flipante...
Ionic Buttons Group o botones agrupados (Segmentos)
Este componente es chulísimo, heredado de Bootstrap, te permite hacer botones de conjunto. Pero primero mira como se construye:
...
<ion-content>
<!-- Segment in content -->
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
</ion-content>
...
Como ves, la construcción es muy sencilla. Me gustaría que abrieses tu editor y lo usases antes de seguir.
Sencillamente, Impresionante...
Buttons Align (right, left, top and bottom) o alineación de botones
Como todo en este Framework, puedes alinear las cosas sobre la pantalla o el componente padre.
Si sabes un poco de CSS lo sabrás. Esto no es diferente, sigue siendo una web incrustada sobre un navegador a la que le podemos meter el CSS que queramos.
Vale, pongamos la situación de que quieres colocar el botón fijo en la parte inferior derecha de la pantalla. De acuerdo, pues hazlo con CSS.
Lo primer que tienes que hacer es asignarle una clase, o id, a tu botón para poder referenciarlo desde CSS.
...
<button ion-button class="my-button">Este es mi botón</button>
...
Como ves, le hemos asignado la clase "my-button". Ahora puedes manejarlo desde nuestra hoja de estilos.
...
.my-button{
position: fixed;
right: 0;
bottom: 0;
margin:10px;
}
...
Listo, ya está. Ahora solo tienes que probarlo y ver como correctamente tu botón está situado en la parte inferior derecha de tu pantalla.
Así de sencillo.
Si quieres ponerlo en otro lado, nada más que tenemos que cambiar right o bottom por lo que tu quieras.
Otro ejemplo, lo queremos en la parte superior izquierda:
...
.my-button{
position: fixed;
left: 0;
top: 0;
margin:10px;
}
...
Sencillo, ¿verdad? ¿Y si quieres alinear solo el texto que contiene?
Haces lo mismo, pero con la propiedad "text-align". Supón que quieres un "ionic button align center"
...
.my-button{
position: fixed;
left: 0;
top: 0;
margin:10px;
text-align: center; //Esta es la línea importante.
}
...
Y, para terminar este punto, si lo que quieres es centrar un botón en Ionic, lo que tienes que hacer es lo siguiente:
En primer lugar crearás una clase CSS que se llame "centrar boton ionic" así:
...
.centrar-boton-ionic{
text-align: center;
}
...
Y después introducirás el botón dentro de un div propio al que asignarás nuestra clase recien creada:
...
<div class="centrar-boton-ionic">
<button class="button button-block button-positive" ng-click="facebookLogin()" style="width:300px;">
<i class="icon ion-social-facebook"></i>
Continuar con facebook
</button>
</div>
...
Si quieres, haz la prueba ahora y verás lo bien que queda.
Algo más que quizás te interese
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Ahora geniete, me despido ya. Espero haberte ayudad y nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!