¿Interesado en aprende cómo se usa, correctamente, los ion-button? o, quizás, lo que quieres es aprende/conocer más información sobre cualquier de sus campos, funciones o cómo puedes sacarle más partido. Si es afirmativa cualquierda de estas cuestiones, o alguna similar, decirte que no estás solo. Es totalmente normal, incluso hasta en los más experimentados programadores seguimos buscando esta información.
Por si no me conoces, mi nombre es Aitor Sánchez Gonzalez y soy desarrollador de software desde el año 2014. Me especializo en apps móviles, y sus servicios de back end, y en el artículo de hoy te explicaré, y comentaré, todas las posibilidades que tenemos al usar los botones en Ionic.
Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.
P.D: Darse de alta es gratis y de baja, también.
Consultar estructura del artículo
- 1 ¿Cómo se construye un Ion Button?
- 2 ¿Cómo le pongo colores a los botones?
- 3 Cómo usar colores personalizados en nuestros Ionic Buttons
- 4 Diferentes tipos de ion-button
- 5 Input Properties o Propiedades de los botones
- 6 Uso avanzado de Ionic button
- 7 Ionic Buttons Group o botones agrupados (Segmentos)
- 8 Buttons Align (right, left, top and bottom) o alineación de botones
- 9 Más contenido del curso
¿Cómo se construye un Ion Button?
Para poder utilizar este componente no es necesario que hagamos uso de imports, includes, ni nada por el estilo. Buttons ionic son componentes, que como son necesarios en cualquier aplicación, ya vienen integrados en el core del sistema.
Para poder utilizarlo tenemos 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?
Veamos, 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 podremos ver yendo a nuestro 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 vamos 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, os voy a explicar cuál es la mejor manera para poder incluir colores en nuestros botones, aunque se puede hacer para todos los componentes. Es una manera, aunque no la más rápida a bote pronto, que ahorrará mucho tiempo a la larga y tendremos toda la aplicación con la misma Skin que nosotros queramos.
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. Pues sí, así es, están almacenados en variables. Y esto, ¿cómo es posible? Pues muy fácil respuesta, haciendo uso de la tecnología «SASS», pero de esta hablaremos 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 tenemos nuestra variable, ahora vamos a aplicársela a nuestro botón:
... <button ion-button color="mi-color">Secondary</button> <button ion-button color="mi-color">Danger</button> ...
Hostia Aitor, que guay ¿no? Pues si amigo, así de fácil y para toda la familia 🙂
Me gustaría que antes de seguir leyendo lo probases estos ejemplos, verás que es cierto y que si que mola. Y lo mejor de todo, es qué 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 estamos en disposición de pasar al siguiente paso. Pero antes, para hacer un poco más amena la charla, te dejo un vídeo que ilustra perfectamente lo que hemos aprendido ya y lo que vamos a aprender:
En esta sección vamos a ver los diferentes tipos de botones que tenemos a nuestra 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. Fijémonos 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. Fijémonos 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. Fijémonos 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%. Fijémonos 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, o fondo transparente, con lo que se funden con el fondo del componente padre. Fijémonos en la propiedad outline.
... <button ion-button full outline>Outline + Full</button> ...
Icon Button o botón con icono:
Este tipo de ion-buttons nos 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. Fijémonos 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 queremos al final tendríamos que usar «icon-end». Fácil ¿verdad?
Nota: Si quisiéramos 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
Veamos 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.
Input Properties 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.
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 construimos así podemos pasarle valores al componente en cuestión. Es más, podemos meter condicionales y más cosillas chungas. 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. Con lo cual, cuando esa variable cambie de estado nuestro botón también cambiará. ¿A qué mola?
Pensamiento: ¡Dios, esto es genial!
Ahora vamos a verlo de una manera un poco distinta:
... <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline"> Danger (Solid) </button> ...
En este ejemplo estamos evaluando el color con un «if ternario». En caso de que isDanger sea verdad, aplicará danger a nuestro botón como color. En el caso contrario lo pondrá en primary. Flipante…
Ionic Buttons Group o botones agrupados (Segmentos)
Sé que se está haciendo un poco pesado el tuto, ya estamos acabando no te preocupes. Te prometo que, si quieres aprender sobre esto, habrá momentos en los que quizás te sientas un poco agobiado de tanto estudiar. Pero es así, lo tomas o lo dejas. Es un mundo complejo en un inicio y hay mucho que tragar. Pero si estás aquí es porque lo entiendes, y quieres continuar. Así que, ¡adelante!
Este componente es chulísimo, heredado de Bootstrap, nos permite hacer botones de conjunto. Pero primero vamos a ver 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 podéis ver, 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, podemos alinear las cosas sobre la pantalla o el componente padre. Quien sepa un poco de CSS lo sabrá. Pues 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 hagámoslo con CSS.
Lo primer que tenemos que hacer es asignarle una clase, o id, a nuestro botón para poder referenciarlo desde CSS.
... <button ion-button class="my-button">Este es mi botón</button> ...
Como puedes ver, le hemos asignado la clase «my-button». Ahora podemos manejarlo desde nuestra hoja de estilos.
...
.my-button{
position: fixed;
right: 0;
bottom: 0;
margin:10px;
}
...
Listo, ya está. Ahora solo tendríamos que probarlo y ver como correctamente nuestro botón está situado en la parte inferior derecha de nuestra pantalla. Así de sencillo.
Si queremos ponerlo en otro lado nada más que tenemos que cambiar right o bottom por lo que nosotros queramos.
Pongamos otro ejemplo, lo queremos en la parte superior izquierda:
...
.my-button{
position: fixed;
left: 0;
top: 0;
margin:10px;
}
...
Sencillo, ¿verdad? ¿Y si queremos alinear solo el texto que contiene?
Hacemos lo mismo, pero con la propiedad «text-align». Pongamos el caso de que queremos 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 queremos es centrar un botón en Ionic, lo que debemos de hacer es lo siguiente:
En primer lugar crearemos una clase CSS que se llame «centrar boton ionic» así:
...
.centrar-boton-ionic{
text-align: center;
}
...
Y, posteriormete, introduciremos el botón dentro de un div propio al que asignaremos 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.
Más contenido del curso
IBeacon Ionic – Así es cómo se usan
Ionic Camera – Cómo usarla con ejemplos incluidos
Call Directory Ionic – ¡Qué es y cómo se usa!
¡Notificaciones Push Ionic! de 0 a 100 Úsalas como un pro
Ion-radio (Ionic radio button) de 0 a 100
SearchBar en Ionic – Qué es y cómo lo podemos usar
Ionic Slider con ejemplos claros y prácticos
Checkbox Ionic – De principiante a avanzado
Firebase en Ionic – ¿Qué es y cómo se utiliza? con Ejemplos / Examples
Action Sheet Ionic – Ejemplos / Examples y más información avanzada
Bueno compañero, pues creo que ya va siendo hora de que me despida. No quería que este artñiculo se hiciera tan largo, pero no hay otra manera. E intento hacer que la lectura se haga lo más amena posible… Pero bueno, ya sabemos en lo que nos hemos metido tanto tú, cómo yo.
También espero que te haya sido útil, pero útil de verdad, y si ha sido así agradecería que lo compartieras con tus amigos de las redes. O con tus amigos de la calle, que también son importantes. Y ya, si les hablas un poco de lo que has encontrado por aquí, más agradecido te estaría.
Nos vemos en el siguiente tuto lector, un saludo y gracias una vez más por estar aquí.