Introdução ao Ignite UI for Web Components

    Ignite UI for Web Componentsé um conjunto completo de widgets de UI, componentes e kits de interface Sketch para Web Components por Infragistics. Ele permite que desenvolvedores criem aplicativos modernos e de alto desempenho em HTML5 e JavaScript para navegadores desktop, experiências móveis e aplicativos web progressivos (PWAs).

    Ignite UI for Web Components compreende vários pacotes disponíveis sob licença MIT ou comercial, dependendo dos componentes e serviços que contêm. Para uma lista detalhada de componentes e suas licenças, consulte as perguntas frequentes e instalações de licenças e os tópicos Open Source vs Premium.

    Install Ignite UI 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 uma experiência guiada pelas opções disponíveis, pode inicializar o modo passo a passo que vai te ajudar a criar e configurar sua nova aplicação. Para começar o guia, basta executar oig comando:

    ig

    Depois, escolha Web Components como framework, selecioneBase o modelo de projeto, adicione um componente/visualização específica ou selecioneComplete & Run. Além disso, você pode ler mais sobre a Ignite UI CLI neste tópico.

    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 a Ignite UI Web Components no seu aplicativo, você deve instalar oigniteui-webcomponents pacote:

    npm install igniteui-webcomponents

    Em seguida, você precisará importar os componentes que deseja usar no seuindex.ts arquivo. Você poderia importar um ou mais componentes usando adefineComponents função assim:

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

defineComponents(IgcAvatarComponent, IgcBadgeComponent);

    Você também poderia importar todos os componentes usando adefineAllComponents função:

    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:

    projeto WC

    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:

    Visão geral dos pacotes Ignite UI for Web Components

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

    Charts & Graphs

    Ignite UI for Web Components contém uma biblioteca de Charts & Graphs que permite visualizar qualquer tipo de dado por meio de suas 65+ séries e combinações de gráficos para criar gráficos e dashboards impressionantes e interativos. Feito para velocidade e beleza, projetado para funcionar em qualquer navegador moderno e com toque e interatividade completos, você pode criar visuais responsivos rapidamente em qualquer dispositivo.

    Medidores

    Ignite UI for Web Components fornece componentes de Radial Gauge, Linear Gauge e Bullet Graph usados para ilustrar dados de forma fácil e intuitiva. O Medidor Radial oferece várias opções de personalização para criar uma forma e escala pré-definidas. A Bitola Linear oferece uma visão simples de um valor comparada a uma escala e uma ou mais faixas. Ele suporta uma escala, um conjunto de marcas de marca e um conjunto de etiquetas. O componente Gráfico de Pontos permite criar visualizações de dados, substituindo medidores e medidores usados em dashboards por gráficos de barras simples.

    Mapas

    O componente Ignite UI for Web Components Geographic Map traz a capacidade de visualizar dados geográficos na sua aplicação. Ele pode renderizar conjuntos de dados compostos por muitas localizações geográficas em formas de marcadores, linhas, polígonos ou até bitmaps interativos. Ele permite sobrepor múltiplas camadas de mapas com dados geográficos, marcar locais específicos e exibir informações usando marcadores e cores personalizados.

    Grids & Inputs

    Ignite UI for Web Components oferece vários componentes de Grid que permitem vincular e exibir dados com pouca configuração, na forma de Grid Lite– um componente de grade leve sob licença do MIT, Data Grid– um componente de grade rico em recursos sob licença comercial, List, Tree e até mesmo Planilha.

    Buttons, Inputs, Layouts, and Menus

    Ignite UI for Web Components oferece vários tipos de Botões, Entradas, Menus e Layouts que permitem construir aplicações web modernas usando encapsulamento e o conceito de componentes reutilizáveis em uma abordagem sem dependências. Veja o Livro de Fadas aqui. Esses componentes são baseados no Indigo Design System, são totalmente suportados pela App Builder e contam com kits de interface prontos para uso para Sketch, Adobe XD e Figma.