Descripción general Ignite UI for Web Components

    Ignite UI for Web Components es un conjunto completo de widgets, componentes y kits de interfaz de usuario para herramientas de diseño y servicios de soporte para Web Components. Diseñado para permitir a los desarrolladores crear las aplicaciones HTML5 y JavaScript más modernas y de alto rendimiento para navegadores de escritorio modernos, experiencias móviles y aplicaciones web progresivas (PWA) dirigidas a las API de componentes web de los navegadores.

    Charts & Graphs

    Ignite UI for Web Components contiene una biblioteca de tablas y gráficos que le permite visualizar cualquier tipo de datos a través de sus 65+ tipos de series de gráficos y combinaciones en gráficos y paneles impresionantes e interactivos. Construido para la velocidad y la belleza, diseñado para funcionar en todos los navegadores modernos y con un toque e interactividad completos, puede crear rápidamente imágenes receptivas en cualquier dispositivo.

    Calibres

    Ignite UI for Web Components proporciona componentes Medidor radial, Medidor lineal y Bullet Graph que se utilizan para ilustrar datos de una manera fácil e intuitiva. El Medidor radial tiene una variedad de opciones de personalización para crear una forma y escala predefinidas. El Medidor lineal proporciona una vista simple de un valor comparado con una escala y uno o más rangos. Admite una escala, un conjunto de marcas de graduación y un conjunto de etiquetas. El componente Bullet Graph que permite crear visualizaciones de datos, reemplazando los medidores y medidores que se utilizan en los paneles de control por gráficos de barras simples.

    mapas

    Ignite UI for Web Components Geographic Maps ofrece la capacidad de visualizar datos geográficos en su aplicación. Puede representar conjuntos de datos que constan de muchas ubicaciones geográficas en forma de marcadores, líneas, polígonos o incluso mapas de bits interactivos. Le permite superponer varias capas de mapa con datos geográficos, marcar ubicaciones geográficas específicas y mostrar información mediante marcadores y colores personalizados.

    Grids & Inputs

    Ignite UI for Web Components proporciona varios componentes de cuadrículas que le permiten vincular y mostrar datos con poca configuración en forma de cuadrícula de datos, lista, árbol e incluso hoja de cálculo. También proporciona funciones como filtrado, clasificación, agrupación, fijación y más.

    Buttons, Inputs, Layouts & Menus

    Ignite UI for Web Components proporciona varios tipos de botones, entradas, menús y diseños que le brindan la capacidad de crear aplicaciones web modernas mediante encapsulación y el concepto de componentes reutilizables en un enfoque sin dependencias. Vea el libro de cuentos aquí. Estos componentes se basan en el Design System Indigo, son totalmente compatibles con App Builder y están respaldados por kits de interfaz de usuario listos para usar para Sketch, Adobe XD y Figma.

    Introducción a Ignite UI for Web Components

    En esta sección se proporcionan instrucciones paso a paso para crear Web Components aplicación con Ignite UI for Web Components.

    Install IgniteUI CLI

    Para crear una aplicación desde cero y configurarla para usar los Web Components Ignite UI, puede usar la CLI Ignite UI. El primer paso es instalar el paquete respectivo globalmente de la siguiente manera:

    npm install -g igniteui-cli

    Si deseas obtener una experiencia guiada a través de las opciones disponibles, puedes inicializar el modo paso a paso que te ayudará a crear y configurar tu nueva aplicación. Para iniciar la guía, simplemente ejecute el comando ig:

    ig

    Luego elija Web Components como marco, seleccione Plantilla de proyecto Base, agregue un componente/vista específico o seleccione Complete & Run. Además, puede leer más sobre la CLI Ignite UI aquí.

    Install Polyfills

    Ejecute este comando para instalar el componente web polyfills:

    Luego importe los polyfills del componente web a index.js:

    import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';

    Install Ignite UI for Web Components

    Para utilizar los Web Components Ignite UI en su aplicación, debe instalar el paquete igniteui-webcomponents:

    npm install igniteui-webcomponents

    A continuación, deberá importar los componentes que desea utilizar en su archivo index.ts. Puede importar uno o más componentes usando la función defineComponents de esta manera:

    import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent, IgcBadgeComponent);

    También puedes importar todos los componentes usando la función defineAllComponents:

    import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

    [!Note] Importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.

    El último paso es importar el CSS necesario para nuestros componentes para que tengan el estilo adecuado:

    import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Después de importar los componentes, puede usarlos en su html:

    <igc-avatar initials="AZ"></igc-avatar>
<igc-badge></igc-badge>

    Install Charts and Map Packages

    Step 1 - Create the Web Component Project

    1 - Abra una línea de comando y cree un directorio llamado wc-html

    mkdir wc-html

    2 - Cambie la ruta de la línea de comando al directorio recién creado

    cd wc-html

    3 - Inicializa npm en el directorio

    npm init -y

    4 - Instale el paquete webpack y la CLI del paquete web como dependencia del desarrollador

    npm install webpack webpack-cli --save-dev

    [!Note] Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

    5 - Abra el proyecto en VS Code

    code .

    6 - Crea un nuevo archivo llamado index.html con este código:

    7 - Cree una nueva carpeta llamada src y dentro de esa carpeta cree un nuevo archivo llamado index.js. La estructura de su proyecto debería verse así:

    8 - Actualice el archivo package.json para incluir un script de compilación usando webpack

      "scripts": {
    "build": "webpack ./src/index.js -o ./dist/ --output-filename index.bundle.js"
  },

    [!Note] This script will use webpack to bundle the index.js file into another file called index.bundle.js and place it into a folder named dist.

    If a javaScript heap out of memory issue occurs while building you can increase the heap size by using this build command instead:

    "scripts": {
    "build": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack src/index.js -o dist/index.bundle.js"
},

    Step 2 - Install Polyfills

    1 - Abra una terminal en VS Code (Ver-> menú Terminal o presione las teclas CTRL + `)

    2 - Escriba este comando para instalar el componente web polyfills:

    npm install @webcomponents/custom-elements

    3 - Importe los polyfills del componente web a index.js

    import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';

    Step 3 - Install Ignite UI for Web Components and lit-html

    1 - Instale la Ignite UI para el componente web usando npm. En este ejemplo, instalaremos el componente web Map:

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts
npm install --save igniteui-webcomponents-maps
npm install lit-html

    2 - Importe los módulos del mapa geográfico y ModuleManager en el archivo index.js:

    import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// module manager for registering the modules
import { ModuleManager } from 'igniteui-webcomponents-core';

    3 - Registre los módulos del Mapa Geográfico usando el ModuleManager

    ModuleManager.register(
    IgcGeographicMapModule,
    IgcDataChartInteractivityModule
);

    4 - Agregue el componente web Mapa geográfico al cuerpo del archivo index.html​

    <body>
    <igc-geographic-map id="map" height="500px" width="100%">
    </igc-geographic-map>
</body>

    Step 4 - Build and Run the Web Component Project

    1 - Abra una terminal en VS Code y ejecute el script de compilación​

    npm run build

    [!Note] This command will run the build script we created earlier. The build script will generate a file named index.bundle.js in a folder named dist

    2: agregue el script index.bundle.js al final del elemento del cuerpo en el archivo index.html.

    <body>
    <igc-geographic-map id="map" height="500px" width="100%">
    </igc-geographic-map>

    <script src="dist/index.bundle.js"></script>
</body>

    3 - Para ejecutar el proyecto, inicie un servidor de desarrollo local. En este ejemplo, estamos usando Live Server. Haga clic derecho dentro del editor de index.html y seleccione Abrir con Live Server

    [!Note] Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the Visual Studio Marketplace.

    4 - Navegue hasta el índice .html usando un navegador web en su servidor local. El resultado final debería mostrar un mapa interactivo del mundo: