🥇 Vista general de Ionic

🍿 Bloques que constituyen el Core de Ionic.

El core de Ionic esta compuesto por:

🍿 Componentes de Ionic

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

<ion-button fill="outline" color="primary">Mi Boton!</ion-button>

🍿 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.

🍿 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…

En el ejemplo se han agregado adicionalmente otros como…

🍿 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.

<button>
    <span>...</span>
</button>
.button-native {
    color: var(--color);
}
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:

🍿 Uso de iconos

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>
Introducción Utilizar Ionic y React
comments powered by Disqus