ūüĒ• Vista general de Ionic

‚ėÜ ¬ŅCu√°les son los bloques que constituyen el Core de Ionic?

El core de Ionic esta compuesto por:

  • Los componentes web de interfaz de usuario (UI) de Ionic como ion-card y ion-input.
  • Los temas y estilos que utilizan CSS y variables CSS.
  • La navegaci√≥n, que permite al usuario moverse a trav√©s de la aplicaci√≥n (router, Tabs, etc).
  • El control de estados, que permite enviar datos a trav√©s de la aplicaci√≥n (eventos, atributos, etc).
  • Funcionalidades de los dispositivos via capacitor (c√°mara, geolocalizaci√≥n, etc).
  • Administraci√≥n del proyecto y publicaci√≥n de la aplicaci√≥n (ionic cli y configuraci√≥n).

‚ėÜ Componentes de Ionic

Un componente muy básico de ionic es el botón,

<ion-button fill="outline" color="primary">Mi Boton!</ion-button>
  • ion-button es el nombre de la etiqueta.
  • fill y color son propiedades.
  • Mi Botton! es el texto que despliega el componente bot√≥n.

‚ėÜ ¬ŅC√≥mo utilizar Ionic desde el CDN (Content Distribution Network)?

Para empezar a trabajar con ionic de forma directa podemos echar mano del CDN, para ello creamos un nuevo documento html y dentro de el agregamos las referencias al CDN.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Uso del CDN</title>

        <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
        <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

    </head>
    <body>

        <ion-button>Mi Boton!</ion-button>

        <script charset="utf-8">
            var btn = document.querySelector("ion-button");
            btn.addEventListener("click", function(){
                alert("Me has pinchado");
            });
        </script>

    </body>
</html>

Al abrir la página podemos ver que el botón puede ser controlado como cualquier otra etiqueta html. Esto se debe a que es un componente html.

‚ėÜ ¬ŅCu√°l es la estructura b√°sica de una p√°gina en Ionic?

La siguiente es la estructura b√°sica de una p√°gina con componentes en Ionic.

<ion-app>
    <ion-header>
        <ion-toolbar>
            <ion-title>Titulo</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
    </ion-content>
</ion-app>

Una p√°gina Ionic usa por lo general tres componentes…

  • ionic-app : componente de la aplicaci√≥n.
  • ionic-header : componente de la cabecera.
  • ionic-content : componente del contenido.

En el ejemplo se han agregado adicionalmente otros como…

  • ionic-toolbar : componente para la barra de herramientas.
  • ionic-title : componente para el √°rea del t√≠tulo.

‚ėÜ Ejemplo para capturar e imprimir la altura

Ahora vamos a utilizar nuevamente el CDN de Ionic para trabajar, en este caso vamos a utilizar un campo también para capturar la altura.

Creamos el archivo index.html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>IMC</title>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
        <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
        <script src="app.js" defer></script>
    </head>
    <body>
        <ion-app>
            <ion-toolbar color="primary">
                <ion-title>Impresión de Altura</ion-title>
            </ion-toolbar>
            <ion-content>
                <ion-item>
                    <ion-label position="floating">Altura</ion-label>
                    <ion-input id="altura"></ion-input>
                </ion-item>
                <ion-button>Calcular</ion-button>
            </ion-content>
        </ion-app>
    </body>
</html>

Creamos ademas el archivo app.js.

var btn = document.querySelector("ion-button");

btn.addEventListener("click", () => {
    var altura = +document.querySelector("#altura").value;
    alert("La altura es " + altura);
});

En este caso hemos utilizado el componente ion-input que nos permite crear campos de texto bastante atractivos. Al igual que lo hacemos con la etiqueta input de html, podemos acceder a esta mediante su propiedad value.

‚ėÜ ¬ŅC√≥mo funcionan los componentes de Ionic?

Como comentamos los componentes de Ionic funcionan en las diferentes plataformas utilizando JavaScript, CSS y HTML. Estos realizan la misma funcionalidad pero adaptan su dise√Īo dependiendo de la plataforma en la que se utilicen.

Si analizamos por ejemplo el componente ion-button, este esta compuesto de 3 partes.

  • El HTML
<button>
    <span>...</span>
</button>
  • El CSS
.button-native {
    color: var(--color);
}
  • Los eventos en JavaScript
onClick(){
    ...
}

Ionic se encarga de empaquetar estas piezas de forma conjunta de forma que se pueda utilizar directamente como una etiqueta (en este caso ionic-button).

Uno de los conceptos en los que Ionic se apoya para construir estos componentes web es el Shadow DOM, este puede ser explorado mediante la herramienta de inspección de Chrome.

‚ėÜ Estilos y manejo del grid

Es posible agregar nuestro propio código css a las etiquetas de ionic de la misma manera que lo hacemos con cualquier etiqueta html sin embargo ionic tiene una serie de clases para su uso que nos evitan tener que repetir tareas comunes a la hora de aplicar estilo.

Una de estas opciones es el uso de un grid. Ionic utiliza un sistema de columnas similares al que utilizan frameworks como bootstrap. En este ejemplo vamos a alinear el contenido de 2 botones en donde cada uno de ellos utiliza el 50% del espacio total.

<ion-grid>
    <ion-row>
        <ion-col>
            <ion-button>Boton 1</ion-button>
        </ion-col>
        <ion-col>
            <ion-button>Boton 2</ion-button>
        </ion-col>
    </ion-row>
</ion-grid>

Para construir un grid con filas y columnas Ionic provee los componentes:

  • ion-grid : crea un √°rea de grid para mostrar el contenido.
  • ion-row : define el √°rea de una fila.
  • ion-col : define el espacio de una columna dentro de una fila.

‚ėÜ ¬ŅC√≥mo se utilizan los √≠conos dentro de Ionic?

Ionic ofrece una gama de iconos que se pueden incorporar en los proyectos, e incluso una herramienta para la b√ļsqueda y copia de estos. Para ver la herramienta de b√ļsqueda de iconos podemos ver el sitio https://ionicons.com/ que funciona como un proyecto independiente.

Si deseamos agregar un icono a un botón, podemos hacerlo de la siguiente forma.

<ion-button>
    <ion-icon slot="start" name="calculator-outline"></ion-icon>
    Calcular
</ion-button>