¿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 Botón!</ion-button>
- ion-button es el nombre de la etiqueta.
- fill y color son propiedades.
- Mi Botón! 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 Botón!</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>Botón 1</ion-button>
</ion-col>
<ion-col>
<ion-button>Botón 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>
