Fab Ionic | El contenedor de los botones molones

¿Buscando incluir en tu aplicación algún FAB (floating action button)? O, quizás ya sabes cómo se utiliza el componente Fab Ionic, pero te falta conocer alguna cositas más para hacerlo funcionar cómo quieres ¿me equivoco? Espero que no.

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a mostrar un FAB a tu usuario en Ionic y trabajar la interacción de este botón de una manera eficaz.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas 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.

Y ahora si, comenzamos. Let´s go!

Instalación de Fab en Ionic

Al tratarse de un componente que está acoplado al core, no necesita instalación.

Configuración del componente

Similar al punto anterior, es algo que no necesita configuración. A excepción de la que nosotros le queramos dar.

Cómo usar FAB en Ionic con ejemplo / example

Nota: En el artículo vamos a ver la etiqueta “ion-fab” y posteriormente en otro artículo veremos “ion-fab-button”.

<ion-content>
  <!-- Anclado a la parte superior derecha -->
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!—Anclado a la parte inferior derecha -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!-- Anclado a la parte superior izquierda -->
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropright"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!-- Anclado a la parte inferior izquierda -->
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!-- Anclado verticalmente en el centro y a la izquierda -->
  <ion-fab vertical="center" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!-- Anclado al centro verticalmente y a la derecha-->
  <ion-fab vertical="center" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!-- fab colocado en la parte superior y final y en el borde superior del encabezado superpuesto de contenido -->
  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="person"></ion-icon>
    </ion-fab-button>
  </ion-fab>


  <!-- fab colocado en la parte inferior e inicio y en el borde inferior del pie de página superpuesto de contenido con una lista a la derecha -->
  <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="settings"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
    </ion-fab-list>
  </ion-fab>


  <!-- fab colocado en el centro del contenido con una lista a cada lado -->
  <ion-fab vertical="center" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="bottom">
      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="start">
      <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

No es necesario que nos extendamos fuera del ejemplo. La verdad que lo he intentado dejarlo lo mejor posible para que se entienda en comentarios sobre el mismo código.

Ahora vamos a ver el resto de propiedades que no he metido aquí.

Propiedades de Fab en Ionic

Ahora vamos a ver las propiedades que tenemos disponibles para tocar el componente.

Nota importante: Estas propiedades se usan sobre el HTML.

Activated

• Atributo: activated.
• Tipo: booleano.
• Descripción: Si es verdadero, tanto el “ion-fab-button” cómo la “ion-fab-list” se podrán pulsar y tomarán un más propio de un botón activado.
• Por defecto: false.

Edge

• Atributo: edge.
• Tipo: booleano.
• Descripción: Si es verdadero se mostrará en la parte superior de la pantalla en lugar del contenido si es “top”. En caso de que sea “bottom” se ajustará justo al borde inferior y siempre debe usarse como “fixed”.
• Por defecto: false.

Horizontal

• Atributo: horizontal
• Tipo: string | enum
  • “center”
  • “end”
  • “start”
  • Undefined
• Descripción: Nos permite alinear, de manera horizontal, el fab en el ancho del viewport.

Vertical

• Atributo: vertical
• Tipo: string | enum
  • “bottom”
  • “center”
  • “top”
  • Undefined
• Descripción: Esta propiedad es muy similar a la anterior, pero para el vertical en lugar del horizontal.

Pues con esto ya hemos terminado de tratar las propiedades. Continuemos…

Funciones y métodos de Fab en Ionic

Vale, ahora vamos a ir al TypeScript. Recuerda de sacar una referencia con un decorador @ViewChild.

En realidad, al tratarse en si de un contendor, solo tiene una función:

close()

• Fuerza al fab a que cierre la lista en caso de que la tenga.
• Retorna una promesa que hay que controlar, en caso de que se resuelva es que todo ha ido bien. De lo contrario habrá fallado y saldrá por el catch.

Tutorial en video por si no te gusta leer

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.

Bueno geniete, espero haberte ayudado a mostrar el FAB y a que controles el imput del usuario. Nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!