Búsqueda de sitios web

angular - ¿Es posible cambiar el diseño para teléfonos y tabletas usando Ionic 2?

Veo que hay un sistema de cuadrícula responsiva para Ionic 2, pero parece que solo te permite crear un diseño estilo cuadrícula.

Estoy buscando algo que me permita mostrar la vista de una manera en una tableta y de otra en un teléfono. En este caso específico, tengo una lista de trabajos. Si es una tableta, también quiero mostrar un mapa a la derecha de la lista y trazarlos. Cómo hacer el mapa lo entiendo, pero ¿cómo puedo saber qué están usando y mostrar la interfaz de usuario correcta?

Respuesta #1

Podrías decidir cómo se va a mostrar el diseño utilizando la información de platform:

Platform Name   Description
android on a device running Android.
cordova on a device running Cordova.
core    on a desktop device.
ios on a device running iOS.
ipad    on an iPad device.
iphone  on an iPhone device.
mobile  on a mobile device.
mobileweb   in a browser on a mobile device.
phablet on a phablet device.
tablet  on a tablet device.
windows on a device running Windows.

Al usar la información subyacente de la plataforma podrías mostrar u ocultar cosas si es una tablet (o un ipad) simplemente haciendo:

this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad');

Y luego, usando *ngIf o lo que necesites en tus vistas, o usando esa propiedad isTabletOrIpad para decidir si inicializar el mapa o no.

Respuesta #2

Similar a @sebaferreras, puedes usar los nombres listados en Nombre de Plataforma, pero sugeriría usarlo junto con el atributo showWhen.

El atributo showWhen toma una cadena que representa una plataforma o la orientación de la pantalla. El elemento al que se le agrega el atributo solo se mostrará cuando esa plataforma o la orientación de la pantalla esté activa.

Este enfoque encapsula la lógica de la clase Platform, lo que significa que no necesitas hacer nada en el archivo Page.ts, el único código del que necesitas preocuparte estará en el HTML.

Ejemplo

Si quieres que cierto código solo sea visible en una pantalla de tableta

<div showWhen="tablet">
    All content inside here will be visible on tablet devices
</div>

Consulte la documentación de ShowWhen para obtener más información. También ofrecen un atributo HideWhen.

Nota

Como se mencionó en los comentarios de abajo

  • El enfoque showWhen simplemente aplicará la propiedad display: none; al elemento, lo que significa que tu HTML seguirá siendo renderizado sin importar el tipo de dispositivo.
  • Si usas el enfoque *ngIf, solo cargará el contenido HTML si cumple las reglas.

En términos de rendimiento, *ngIf puede ser la mejor opción para ti, sin embargo, en otros escenarios showWhen puede ser más favorable (estoy tratando de mantener esto genérico para otros lectores).

Artículos relacionados