Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Aplicación de temas y estilo Ionic 5: ejemplo de barra de herramientas y menú

 En este tutorial, veremos cómo cambiar el tema y el estilo de las aplicaciones Ionic 5 con el ejemplo de la barra de herramientas y el menú.

Hemos estado creando aplicaciones móviles híbridas con Ionic 5 y Angular durante un par de meses. Uno de los trucos de Ionic 5 es el estilo y la temática.

En este artículo, le mostraremos algunos consejos sobre cómo diseñar y tematizar la última versión de Ionic 5.

Ionic 5 proporciona un sistema de tematización simple que utiliza variables Sass y clases / estilos CSS para cambiar el estilo de los componentes.

Cambiar los colores del tema de Ionic 5

Puede cambiar los colores predeterminados de Ionic 5 yendo a src/theme/variables.scssy proporciona muchas variables predefinidas de Ionic 5 Sass, como:

    $colors: (
    primary:    #387ef5,
    secondary:  #32db64,
    danger:     #f53d3d,
    light:      #f4f4f4,
    dark:       #222,
    customColor: #009688

    );

A continuación, para utilizar cualquier color en el interior $colors, utilice el atributo de color del componente con el nombre de la variable. Por ejemplo:

    <ion-navbar color="primary">
        <ion-title>Title</ion-title>
    </ion-navbar>

También puede proporcionar sus propios nombres de colores personalizados.

Variables Sass predefinidas de Ionic 5 para tematizar la barra de herramientas

Ionic 5 también proporciona un conjunto de otras variables Sass predefinidas para diseñar la barra de herramientas como:

    $toolbar-background: #123456;
    $toolbar-border-color: #123456;
    $toolbar-text-color: #123456;
    $toolbar-active-color: #123456;
    $toolbar-inactive-color: #123456;
    $toolbar-title-color : #000;

Para aplicar estilos SCSS personalizados, tiene dos opciones:

  • Para estilos globales puedes usar src/app/app.scss
  • Para estilos específicos de página, puede utilizar src/pages/xxxx/xxxx.scssarchivos.

¿Cómo ocultar o deshabilitar la ion-contentbarra de desplazamiento?

Para versiones anteriores de Ionic 5, puede usar el método setScrollDisabled para deshabilitar la barra de desplazamiento, pero desafortunadamente a partir de Ionic 2.0.0-rc.6 ya no está disponible (público), entonces, ¿cómo deshabilitar la ion-contentbarra de desplazamiento?

Puede usar el nombre de clase directo. Por ejemplo:

   .no-scroll .scroll-content{
         overflow: hidden;
    }

O incluso mejor para ocultar la barra de desplazamiento pero mostrarla cuando hay mucho contenido:

    .scroll-content {
            overflow-y: auto !important;
    }    

Asegúrese de agregar estos estilos CSS en el src/app/app.scssarchivo.

Cómo aplicar estilos personalizados a los menús laterales (menú de iones)

Los menús laterales de Ionic 5 se pueden crear usando la <ion-menu>directiva. A continuación se muestra un ejemplo de un menú de Ionic 5:

    <ion-menu [content]="content">
        <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content >
        <ion-list>
            <ion-item (click)="openMain()" >Main</ion-item>
            <ion-item  (click)="openAbout()">About</ion-item>
            <ion-item (click)="openHelp()">Help</ion-item>
            <ion-item (click)="openContact()">Contact</ion-item>

        </ion-list>
        </ion-content>    
    </ion-menu>

    .menu-inner .item {
        background-color: #387ef5;
    }


    .menu-inner > ion-header, 
    .menu-inner > ion-content, 
    .menu-inner > ion-footer {
        background-color: #123456; 
    }

    .toolbar-title {
        color : #fff;
    }

Aplicar estilo a la barra de herramientas de Ionic 5 ( ion-toolbar)

Para diseñar la barra de herramientas o la barra superior de Ionic 5, tiene un montón de variables scss que son:

    $toolbar-background: #123456;
    $toolbar-border-color: #123456;
    $toolbar-text-color: #123456;
    $toolbar-active-color: #123456;
    $toolbar-inactive-color: #123456;    

Simplemente colóquelos en el variables.scssarchivo y cambie sus valores a los colores que desee.

ion-headerion-contention-footerion-toolbarhacen parte de cada página 5 jónico por lo que puede:

  • Agregue estilos globales a estos elementos. En este caso, debe ponerlos ensrc/app/app.scss
  • o agregue estilos de página específicos, por ejemplo, para diseñar solo la página principal, simplemente agregue estilos dentro src/pages/main/main.scss
    page-main {

        .content{
            background: #fff;
        }
        .toolbar-title {
            color : #fff;
        }    
    }

Conclusión

En este tutorial rápido, hemos visto muchos trucos para agregar estilo y temas a la barra de herramientas y componentes del menú de Ionic 5 y cómo cambiar los colores predeterminados de su tema.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas