Buttons Ionic – De 0 a 100

Buttons Ionic – De 0 a 100
5 (100%) 2 votes

En el capítulo de hoy vamos a hablar un poco sobre un componente que toda aplicación, ya sea de Ionic o de lo que sea, necesita para poder interactuar con el usuario. Estoy hablando de los botones, y más concretamente de los Ionic Buttons. Vamos a ver como se usan y aprenderemos a tocarlos un poquito más en profundidad.

Ionic Button

Eyyy! Que pasa lector/a, otra vez me coloco a los mandos, o mejor dicho al teclado, del blog para darte un poquito más de mi conocimiento de esta plataforma. ¿Sabes? Me alegra mucho que estés aquí, eso significa que estoy haciendo bien mi trabajo, que no te creas que es poco eh!. Hoy vamos a hablar sobre uno de los componentes imprescindibles en la construcción de software Front End, los botones Ionic. ¿Te quedas conmigo y ves cómo podemos darles un buen uso? Apuesto a que sí. Es más, si te quedas hasta el final, aunque ya sepas usarlos, seguro que aprendes algo nuevo. Comenzamos.

¿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. Button ionic es un componente, que como es necesario en cualquier aplicación, ya viene integrado 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. 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 vas a aprender hoy:

 

Diferentes tipos de Buttons en Ionic

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>

 

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 botón 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 botón 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.

Uso avanzado de botones en Ionic

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.
}

 

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í.

 

 

Comparte esto en: