@gasco/core
Gasco es un Framework que facilita la creación de aplicaciones web nativas y progresivas de alta calidad con tecnologías web.
El paquete @gasco/core
contiene los componentes web que conforman los componentes básicos de la interfaz de usuario reutilizables de Gasco Framework. Estos componentes están diseñados para usarse en bibliotecas/Frameworks (como Stencil, React, Angular o Vue), o solos a través de JavaScript tradicional en el navegador.
Características
- Representación asíncrona
- No se requiere construir o compilar
- Componentes con carga diferida sin configuración
- Simplemente agregue los archivos estáticos a cualquier proyecto
- Componentes diminutos y altamente optimizados creados con Stencil
Cómo utilizarlos
Vanilla HTML
La forma más fácil de comenzar a usar @gasco/core
es agregar una etiqueta de secuencia de comandos a la CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/@gasco/core/dist/gasco/gasco.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@gasco/core/dist/gasco/gasco.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@gasco/core/css/gasco.bundle.css" rel="stylesheet">
Cualquier componente Gasco agregado a la página web se cargará automáticamente. Esto incluye escribir la etiqueta del componente directamente en HTML o usar JavaScript como document.createElement('gasco-button')
.
Además, dentro de este paquete hay un archivo dist/gasco.js
y el directorio adjunto dist/gasco/
. Estos son los mismos archivos que usa la CDN y están disponibles en este paquete para que puedan ser parte del desarrollo local de una aplicación.
Framework Bindings
El paquete @gasco/core
se puede usar en HTML simple o JavaScript estándar sin ningún marco. Gasco también tiene paquetes que facilitan la integración de Gasco en el ecosistema y los patrones tradicionales de un Framework. (Sin embargo, en el marco de trabajo de nivel más bajo, los enlaces aún usan @gasco/core
y Web Components).
Uso de controladores superpuestos
Al usar un controlador de superposición, los desarrolladores deberán definir el componente de superposición antes de poder usarlo. A continuación se muestra un ejemplo del uso de toastController
:
import { defineCustomElement } from '@gasco/core/components/gasco-toast.js';
import { toastController } from '@gasco/core/components';
defineCustomElement();
const showToast = async () => {
const modal = await toastController.create({ ... });
...
}