Visão geral dos pacotes Ignite UI for Web Components

    Ignite UI for Web Components é um conjunto completo de widgets de UI, componentes, kits de UI para ferramentas de design e serviços de suporte para Web Components. Projetado para permitir que os desenvolvedores criem os aplicativos HTML5 e JavaScript mais modernos e de alto desempenho para navegadores de desktop modernos, experiências móveis e aplicativos da web progressivos (PWAs) direcionados às APIs de componentes da web dos navegadores.

    Charts & Graphs

    Ignite UI for Web Components contém uma biblioteca de gráficos e tabelas que permite que você visualize qualquer tipo de dado por meio de seus mais de 65 tipos de séries de gráficos e combinações em gráficos e painéis impressionantes e interativos. Construído para velocidade e beleza, projetado para funcionar em todos os navegadores modernos e com toque e interatividade completos, você pode criar rapidamente visuais responsivos em qualquer dispositivo.

    Medidores

    Ignite UI for Web Components fornece componentes Radial Gauge, Linear Gauge e Bullet Graph usados para ilustrar dados de forma fácil e intuitiva. O Radial Gauge tem uma variedade de opções de personalização para criar uma forma e escala predefinidas. O Linear Gauge fornece uma visualização simples de um valor comparado a uma escala e um ou mais intervalos. Ele suporta uma escala, um conjunto de marcas de escala e um conjunto de rótulos. O componente Bullet Graph que permite criar visualizações de dados, substituindo medidores e medidores que são usados em painéis por gráficos de barras simples.

    Mapas

    Ignite UI for Web Components Geographic Maps traz a capacidade de visualizar dados geográficos em seu aplicativo. Ele pode renderizar conjuntos de dados consistindo de muitas localizações geográficas em formas de marcadores, linhas, polígonos ou até mesmo bitmaps interativos. Ele permite que você sobreponha várias camadas de mapa com dados geográficos, marque localizações geográficas específicas e exiba informações usando marcadores e cores personalizados.

    Grids & Inputs

    Ignite UI for Web Components fornece vários componentes Grids que permitem que você vincule e exiba dados com pouca configuração na forma de Data Grid, List, Tree e até mesmo Spreadsheet. Ele também fornece recursos como filtragem, classificação, agrupamento, fixação e muito mais.

    Buttons, Inputs, Layouts & Menus

    Ignite UI for Web Components fornece vários tipos de Buttons, Inputs, Menus e Layouts que lhe dão a capacidade de construir aplicativos web modernos usando encapsulamento e o conceito de componentes reutilizáveis em uma abordagem sem dependências. Veja o Storybook aqui. Esses componentes são baseados no Indigo Design System, são totalmente suportados pelo App Builder e são apoiados por kits de UI prontos para uso para Sketch, Adobe XD e Figma.

    Introdução ao Ignite UI for Web Components

    Esta seção fornece instruções passo a passo para criar aplicativos Web Components com Ignite UI for Web Components.

    Install IgniteUI CLI

    Para criar um aplicativo do zero e configurá-lo para usar os Ignite UI Web Components, você pode usar o Ignite UI CLI. O primeiro passo é instalar o respectivo pacote globalmente da seguinte forma:

    npm install -g igniteui-cli

    Se você quiser ter uma experiência guiada pelas opções disponíveis, você pode inicializar o modo passo a passo que ajudará você a criar e configurar seu novo aplicativo. Para iniciar o guia, basta executar o comando ig:

    ig

    Em seguida, escolha Web Components como framework, selecione Base project template, adicione um componente/view específico ou selecione Complete & Run. Além disso, você pode ler mais sobre o Ignite UI CLI aqui.

    Install Polyfills

    Execute este comando para instalar o componente web polyfills:

    Em seguida, importe os polyfills do componente da web para index.js:

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

    Install Ignite UI for Web Components

    Para usar os Web Components Ignite UI em seu aplicativo, você deve instalar o pacote igniteui-webcomponents:

    npm install igniteui-webcomponents

    Em seguida, você precisará importar os componentes que deseja usar no seu arquivo index.ts. Você pode importar um ou mais componentes usando a função defineComponents assim:

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

defineComponents(IgcAvatarComponent, IgcBadgeComponent);

    Você também pode importar todos os componentes usando a função 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.

    O último passo é importar o CSS necessário para nossos componentes para que eles sejam estilizados corretamente:

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

    Depois que os componentes forem importados, você pode usá-los em seu 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 uma linha de comando e crie um diretório chamado wc-html

    mkdir wc-html

    2 - Altere o caminho da linha de comando para o diretório recém-criado

    cd wc-html

    3 - Inicializar o npm no diretório

    npm init -y

    4 - Instale o webpack bundler e o webpack cli como uma dependência do desenvolvedor

    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 o projeto no VS Code

    code .

    6 - Crie um novo arquivo chamado index.html com este código:

    7 - Crie uma nova pasta chamada src, e dentro dessa pasta crie um novo arquivo chamado index.js. A estrutura do seu projeto deve ficar assim:

    8 - Atualize o arquivo package.json para incluir um script de construção 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 um terminal no VS Code (menu Exibir-> Terminal ou pressione as teclas CTRL + `)

    2 - Digite este comando para instalar o componente web polyfills:

    npm install @webcomponents/custom-elements

    3 - Importe os polyfills do componente web para 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 o Ignite UI for Web Component usando npm. Neste exemplo, instalaremos o Map web component:

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

    2 - Importe os módulos do Mapa Geográfico e o ModuleManager no arquivo 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 - Cadastre os módulos do Mapa Geográfico utilizando o ModuleManager

    ModuleManager.register(
    IgcGeographicMapModule,
    IgcDataChartInteractivityModule
);

    4 - Adicione o componente web Mapa Geográfico ao corpo do arquivo 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 um terminal no VS Code e execute o script de build​

    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 - Adicione o script index.bundle.js ao final do elemento body no arquivo 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 executar o projeto, inicie um servidor de desenvolvimento local. Neste exemplo, estamos usando o Live Server. Clique com o botão direito do mouse no editor de index.html e selecione Open with 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 até o index.html usando um navegador web no seu servidor local. O resultado final deve mostrar um mapa interativo do mundo: