Popover Ionic | Aprende cómo mostrar contenido flotante aquí

¿Quieres saber cómo mostrar esos mensajitos que aparecen al lado de nuestros componentes cuando realizamos acciones cómo, por ejemplo, pasar el ratón por encima?

O, quizás ya sabes cómo se hace, y lo que estás buscando es saber cómo funciona alguno de los métodos o el valor de alguno de los campos de Popover Ionic ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo encontrarás la manera de hacer funcionar a tu Popover de una manera sencilla y 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.

Pero ¿Qué es un Popover Ionic?

Si ya saber lo que es, no es necesario que leas este punto, pasa al siguiente sin problema. Para los demás, master card, una explicación rápida.

Un Popover es un modal, o cuadro de diálogo, que aparecerá encima de todo el contenido de la página de la aplicación en la que estamos.

Esto puede ser utilizado en cualquier situación, pero generalmente se usa para mostrar opciones que no pueden estar situadas en un menú o en la barra de navegación.

Tenemos dos opciones para poder utilizar dichos Popovers:

1. Mediante código HTML en nuestras plantillas.
2. Mediante la clase PopoverController.

No te preocupes que veremos las dos a continuación. Sigamos...

Popover, instalación y configuración

Al ser un componente de sistema no es necesario realizar ningún tipo de acción previa para poder utilizarlo. Al igual, que tampoco tendremos que configurar absolutamente nada.

Como se usa Popover en Ionic a través de PopoverController

Bueno, aquí hay un poco más de complicación que usar un simple alert. Pero antes de continuar explicando veamos un ejemplo práctico que todo se ve mejor.

import { PopoverController } from 'ionic-angular';

@Component({})
class MyPage {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover() {
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present();
  }

}

Genial, comencemos por lo básico. En primer lugar, tenemos que realizar una importación del componente “PopoverController” en nuestra clase. Este componente pertenece al paquete “Ionic-angular”. Es un paquete de angular heredado, así que, si queremos, también lo podríamos usar en la web sin ningún problema.

Posteriormente vamos a realizar una inyección del componente en nuestro constructor para que así podamos controlarlo desde código TS.

Ahora que ya tenemos todo preparado para poder empezar a trabajar, vamos a llamar al método “créate” similar al de cualquier tipo de alert que ya vimos antes en este enlace. Pero vemos que hay una diferencia, es el parámetro que recibe. A diferencia de una AlertOptions ¿qué carajo está recibiendo este?

Pues muy sencillo, al tratarse de un componente que se pone encima de nuestra interfaz, necesita de un componente que es el que va a mostrar ¿entiendes? Espero que sí. Puedes, por ejemplo, hacer un componente que en el HTML solo contenga los datos legales de uso y pasarle ese módulo de la aplicación.

Ahora que ya sabemos cómo funciona todo, vamos a seguir…

Cómo usar Popover Ionic desde plantilla HTML

Primero veamos el código que he utilizado para realizar el video que hemos visto en la parte de la presentación del componente:

<ion-button id="click-trigger">Left-Click Me</ion-button>
<ion-popover trigger="click-trigger" triggerAction="click">
  <ng-template>
    <ion-content class="ion-padding">Hello World!</ion-content>
  </ng-template>
</ion-popover>

<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
<ion-popover trigger="context-menu-trigger" triggerAction="context-menu">
  <ng-template>
    <ion-content class="ion-padding">Hello World!</ion-content>
  </ng-template>
</ion-popover>

<ion-button id="hover-trigger">Hover Over Me</ion-button>
<ion-popover trigger="hover-trigger" triggerAction="hover">
  <ng-template>
    <ion-content class="ion-padding">Hello World!</ion-content>
  </ng-template>
</ion-popover>

No tiene mucha más explicación ¿verdad? Viendo el código podemos intuir cómo funciona todo.

1. Creamos un ion-button con un ID específico.
2. Creamos un objecto ion-popover y en la propiedad trigger le asignamos el ID del punto 1.
3. En la propiedad triggerAction le asignamos que tipo de disparados queremos: click, context-menu y hover

Y listo, ya lo tendríamos para comenzar a funcionar ellos.

La propiedad isOpen

Ahora vamos a ver un pequeño truco para controlar el Popover desde código cuando utilizamos la versión HTML.

El objeto ion-popover tiene esta propiedad. Dicha propiedad, recibirá un valor booleano que al cambiar de true a false, o al contrario, esconderá o mostrará el Popover asociado a la variable desde nuestro código TS.

Veamos el ejemplo:

<ion-button (click)="presentPopover($event)">Click Me</ion-button>
<ion-popover #popover [isOpen]="isOpen" (didDismiss)="isOpen = false">
  <ng-template>
    <ion-content class="ion-padding">Hello World!</ion-content>
  </ng-template>
</ion-popover>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  @ViewChild('popover') popover;
  constructor() {}

  isOpen = false;

  presentPopover(e: Event) {
    this.popover.event = e;
    this.isOpen = true;
  }
}

Funciones de Popover en Ionic mediante PopoverController

En este caso, como pasa con un alert cualquiera, tenemos 3 funciones disponibles. Solo con estas 3 funciones están todas las necesidades cubiertas, créeme…

create(Component, data, options);

Nos permite construir el componente antes de ser mostrado.

• Component -> object -> Será el componente que queremos que muestre nuestra ventana modal.
• Data -> object -> En caso de que queramos pasar parámetros al componente, para eso sirve este parámetro.
• Options -> PopoverOptions -> Las opciones de construcción del Popover que vamos a ver más abajo.

present();

Hace que el popover se muestre al usuario. Recuerda que este componente tapa toda la parte visible de la aplicación y el sistema. No se verá la barra superior ni el menú inferior.

dismiss():

Como su nombre indica, nos permite disposear el Popover de la pantalla. Así permitir que el usuario siga utilizándola.

PopoverOptions

Estas serán las opciones que nos permiten definir el comportamiento del componente. No son muchas:

• cssClass -> string -> En caso de que queramos asignar una clase CSS a nuestra vista, esta es la opción.
• showBackdrop -> boolean -> Si es verdadero se mostrará el botón “atrás”.
• enableBackdropDismiss -> boolean -> En caso de que sea verdadero la venta se cerrará al pulsar sobre el botón “atrás”.

Ves, te dije que no eran muchas.

Cómo dar estilo al modal

Aquí no nos vamos a enrollar. Podemos modificar el archivo styles.scss de la aplicación para poder cambiar el diseño de este. Sería algo así:

/* Core CSS required for Ionic components to work properly */
@import '~@ionic/angular/css/core.css';
/* Basic CSS for apps built with Ionic */
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
/* Optional CSS utils that can be commented out */
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

ion-popover {
  --background: rgba(40, 173, 218, 0.6);
  --backdrop-opacity: 0.6;
  --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
  --color: white;
  --width: 300px;
}

ion-popover ion-content {
  --background: rgba(40, 173, 218, 0.6);
}

ion-popover::part(backdrop) {
  background-color: rgb(6, 14, 106);
}

Cómo posicionar el Popover en la pantalla

Llegamos a casi el final, y a una parte muy importante de este tutorial. Aitor ¿cómo posicionamos el Popover en la pantalla?

Reference

Pues bien, el primer paso que tenemos que dar es asociar el Popover con el componente que lo va a disparar mediante la propiedad "reference" del objeto ion-popover. A dicha propiedad le pasamos el ID del componente que lo va a disparar.

• reference="el-id-de-mi-boton"

Side

Esta será la propiedad encargada de controlar la zona, alrededor del componente al que apunta, donde será mostrado. A la izquierda, derecha, arriba o debajo de este.

• side="top"
  • Tenemos disponibles las siguientes opciones: top, bottom, left, right, start, end

Alignment

Por último, tenemos la propiedad de alineación. Por ejemplo, si tenemos el valor de "Side" asignado a "top" y aligment lo tenemos en "start" el inicio del bocadillo desde el que sale el diálogo aparecerá al principio del componente. Con un video se verá mejor:

Cómo modificar el tamaño de un Popover en Ionic

Para terminar el tutorial, vamos a hablar de los dos posibles tamaños a los que nos podemos ajustar cuando utilizamos esto.

La propiedad para poder modificar el tamaño, cómo sabrás o intuirás, es "Size" y tiene dos posibles valores:

• "auto" => El dialogo se ajustará al contenido de este.
• "cover" => El dialogo se ajustará al ancho, o alto, que tiene el componente asociado.

Así que si queréis hacerlo muy grande, setear en auto y meterle mucho padding al child de este. De lo contrario, setear en cover para que se vea simétrico.

Tutorial en video por si no te gusta leer

Algo más que quizás te interese

En el momento que tu mejoras el logo de una aplicación que tengas publicada, vas a notar cambios en la cantidad de descargas que tu aplicación recibe y en los ingresos que genera. A más descargas, más dinero ganas.

Hasta ahí bien. Pues hemos creado esta herramienta para que puedas evaluar, optimizar y mejorar tu logo basándonos en la información de TODOS los logos de las aplicaciones que hay publicadas en Google Play. No te quiero espoilear, entra en el enlace, quizás te interese.

Y hasta aquí por hoy. Espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!