Action Sheet Ionic – Ejemplos / Examples y más información avanzada

Action Sheet Ionic – Ejemplos / Examples y más información avanzada
5 (100%) 1 vote

En el capítulo de hoy hablaremos un poco sobre las Action Sheet u hojas de acción que encontramos en Ionic. Es el típico menú que se despliega en una parte de nuestra pantalla que, por regla general, nos sirve para elegir alguna opciones de configuración de la aplicación. Un controlador bastante interesante que poco a poco va tomando más protagonismos con la entrada del uso de Material en nuestras apps. Visto esto, comenzamos.

ActionSheet Ionic ejemplos y más información
Imagen recogida de la página oficial de Ionic

Buenas tardes Jefazos, ¿qué tal va pasando la primera? La verdad que espero que bien, por que yo no estoy demasiado “bien”. No que esté mal ni nada, es que este tiempo (climatico) me afecta bastante negativamente a la cabeza. Y si a esto le sumamos la enorme carga de trabajo que acumulamos últimamente en mi empresa y las horas de programación adicionales al curro… vamos, para explotar. Pero bueno, ahí vamos…

Basta de presentaciones y ñoñerías y entremos en materia que es lo que nos gusta.

ActionSheetController, ¿Qué es?

Bueno, comenzamos hablando de este controlador por que es el encargado de darnos acceso a todo el componente Action Sheet desde nuestro código TypeStript.

En primer lugar, para poder utilizarlo, como es constumbre, tenemos que importarlo en nuestras dependencias como hacemos con todos los controladores. Para ello nos vamos a dirigir a nuestro “app.modules.ts” y dentro de la construcción de nuestro @NgModule insertamos lo que vamos a ver a continuación

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    ActionSheetController, //Esta es la línea importante.
    ...
  ]
})

¿Sencillo verdad? Si eres nuevo, esto te parecerá un poco raro. Pero para que los que ya tenemos un poco de camino recorrido nos resultará familiar.

Con este código ya estamos en disposición de injectar nuestro controlador ActionSheet en cualquier componente de nuestra app, sigamos.

¿Cómo se contruye?

Bien, vamos a proceder a hacer una construcción simple de este component y explico un poco de que va el tema después.

 

import { ActionSheetController } from 'ionic-angular'

export class MiClase{

 constructor(public miAc: ActionSheetController) {} //Injectamos el controlador en el consstructor

 presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({ //Llamamos a la función create para contruir nuestro componente.
     title: 'Modify your album', //El título de nuestro ActionSheet
     //Este array define los botones que van a ir dentro de nuestro contenedor
     buttons: [
       {
         text: 'Destructive',
         role: 'destructive',
         handler: () => {
           console.log('Destructive clicked');
         }
       },
       {
         text: 'Archive',
         handler: () => {
           console.log('Archive clicked');
         }
       },
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ]
   });

   actionSheet.present(); //Esta es la función que llama al ActionSheet para que sea mostrado.
 }
}

Si por algo defiendo Ionic es por la simpleza que tiene en la elaboración, escirtura y lectura de nuestro código. Cosas así programadas en Java nativo doblan, practicamente, la cantidad de código necesaria para contruirlas.

Como hemos podido ver, solo tenemos que inyectar el controlador del ActioSheet en nuestro contructor y listo, ya lo podemos usar.

La función contruct, nos permite pasarle todos los parametros a nuestro componente para que se contruya “solo”. Los componentes que contiene un ActionSheet dentro de su contenedor son todos botones, con sus respectivas reglas y demas…

A parte tiene la posibilidad de incluir en él un “title”, “subtitle” y un “icono” para que queda aún más bonito.

¿Cómo construyo los botones / buttons?

En primer lugar comentar, como hemos visto en el código, que todos los componentes internos del contenedor son botones. Esta es una regla importante de conocer.

Todos los botones tienen la propiedad “role” aunque nosotros no se la pongamos. De forma predeterminada tomarán el aspecto de la plataforma pero podemos asignarles 2 tipos más:

  • Destructive:  Se situará en la parte superior del componente sin importar el ordern en el que se hayan agregado al array.
  • Cancel: Se pondrán en la parte inferior de nuestro componente como el típico botón de cancelar sin importar el orden en nuestra matriz. Es más, si se intenta salir del ActionSheet sin usar los botones, tocando el fondo de la pantalla, se ejecutará la función que le hayamos bindeado a nuestro botón cancel.
  • Nota: Como has podido ver, lo lógico es tener uno solo de cada uno de los citados anteriormente (“cancel” y “destructive”) y dejar el resto en el orden que queramos que aparezcan con la apariencia del dispositivo. De no ser así tomará el primero que aparezca en la matriz y será el que utilizará.

Por último comentar que las opciones del componente las podemos inicializar todas en la función “Create()” o asignarlas con sus funciones “set” como por ejemplo: “setTitle()”. Y para agregar más botones: “addButton()”.

Veamos un ejemplo de la matriz de botones:

 

buttons: [
  {
    text: 'Destruir AccionSheet',
    role: 'destructive',
    handler: () => {
      console.log('Destruir clicked');
    }
  },
  {
    text: 'Información sobre la aplicación',
    handler: () => {
      console.log('Información clicked');
    }
  },
  {
    text: 'Cancelar accioones',
    role: 'cancel',
    handler: () => {
      console.log('Cancelar clicked');
    }
  }
]

Diferencias entre Android e iOS

No existe diferencia alguna entra plataformas de manera programáticas, a excepción de la capa visual. No tienen diferencia de uso sobre el código:

ActionSheet visto en dispositivo Android ActionSheet visto en dispositivo iOS

 

¿Cómo pongo iconos en los botones de un ActionSheet?

Muchos de los compañeros con los que trabajo, y hablo, me preguntan cosillas de este tipo. Así que vamos a contestarlas en un segundo:

Mirar: Cada uno de los botones que agregamos a nuestra array de botones tiene las siguientes características:

“text” -> (String) -> Es el texto del botón.

“icon” -> (icon) -> Es el icono que va alineado a la izquierda de la caja que contiene el botón. Hablaremos sobre los iconos más adelante, por que si no tendríamos que hacer otro artículo. Aún así os dejo una referencia donde podéis ver un poco mejor como se usan: https://ionicframework.com/docs/api/components/icon/Icon/

“handler” -> (any) -> La función que se ejecutará cuando el botón sea pulsado.

“cssClass” -> (string) -> Si queremos asignar alguna clase adicional al botón para cambiar el aspecto de este.

“role” -> (string) -> Esta es la zona que hemos comentado antes que tiene dos posibilidades, “cancel y desctructive”. Si queres conocer como funciona mira un poco más arriba.

 

¿Cómo cierro / close el componente?

Esta parte es muy sencilla de trabajar. Puedes cerrarlo pulsando en el botón al que le hayas asignado el “role” “cancel”. También puedes pulsar fuera de la ventana para cerrarlos sí la propiedad “enableBackdropDismiss” esta seteada a “false” (de forma predeterminada es false) o cerrarlo programáticamente cuando queramos.

 

¿Se puede hacer Scroll?

Normalmente, los botones de esta opción no suelen ser muchos, pero si tu app lo necesita se puede conseguir que haga Scroll. Cuando la ventan sobrepase un poco más de la mitad de la pantalla (2/3 más o menos) no aumentará más y se pondrá en modo Scrool automáticamente. Es así, tan sencillo que asusta.

 

¿Puedo hacer un ActionSheet Personalizada?

Llegará un punto, que si estás aquí será por que seguramente no has llegado, yo estoy llegando ahora, en el que “todo es posible de hacer”. Te explico, de una manera sencilla no se puede personalizar del todo. Quizás si que podrás tocar las CSS del componente pero poco más.

Para ello existe algo que se llama la herencia, que seguramente hayas oido hablar de ello, o sepás perfectamente lo que es. Pero para este caso no lo voy a explicar así que ilustro un poco por encima y ya veremos más adelante en el curso como lo podemos hacer “bien”.

Para solucuionar este problema tendrías que extender el AcctionSheetController con una clase propia y a partir de ahí modificar lo que veas necesario. Podríamos poner, por ejemplo, una barra de búsqueda, personalizar los eventos click, long-click, pane, etc… a placer o cambiar directivas del componente desde la misma raiz. Pero como digo, esto daría para un curso completo, así que lo veremos más adelante.

¿Not Working? ¿Not Showing? No problem

Muchos compañeros/conocidos han tenido problemas con este tipo de componentes, pero nada que no se solucione echando un ojo detallado al código y comprobando si la lógica de negocio está correcta. Estamos en una versión bastante avanzada y madura de Ionic. No tiene mucho sentido que algo así pase.

Pero para cuando sucede cada caso es un mundo. Si has tenido alguno de estos problemas mándame un mail y estaré encanto de ayudarte.

 

Regalito – Vídeo ilustrativo

 

Bueno, pues hasta aquí hemos llegado compañeros, espero que el artículo haya te alla sido de utilidad. Y si así ha sido compártelo con tus compañeros a traves de las redes con los botones que puedes ver por aquí. ¡Te estaré muy agradecido!

Un saludo y hasta la próxima.

Comparte esto en: