Modelos de Componentes

    A tabela a seguir fornece uma lista dos componentes Angular Ignite UI que podem ser gerados usando os comandos Ignite UI Angular Schematics ou Ignite UI CLI. Além disso, você pode encontrar links para as demos disponíveis em nossa documentação, mas observe que elas não são exatamente idênticas às geradas pelo CLI.

    Modelo Código e descrição Demo
    Grades & Listas
    grade Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid newGrid
    Ignite UI CLI:
    ig add grid newGrid
    Modelo básico para IgxGrid.
    		 Componente IgxGrid com colunas geradas automaticamente
    edição em lote de grade Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
    Ignite UI CLI:
    ig add grid-batch-editing newGridBatchEditing
    Exemplo de IgxGrid com edição em lote.
    		 IgxGrid que usa serviço de transação para edição em lote
    grade personalizada Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
    Ignite UI CLI:
    ig add custom-grid newCustomGrid
    IgxGrid com recursos opcionais como classificação, filtragem, edição, etc.
    		 IgxGrid com recursos opcionais como classificação, filtragem, edição de células, edição de linhas, agrupamento por, redimensionamento, seleção, paginação, fixação de colunas, movimentação de colunas, ocultação de colunas
    resumos de grade Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
    Ignite UI CLI:
    ig add grid-summaries newGridSummaries
    IgxGrid com recurso de resumos.
    		 IgxGrid com recurso de resumos.
    cabeçalhos-de-colunas-multi-grade Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
    Ignite UI CLI:
    ig add grid-multi-column-headers newGridMultiColumnHeaders
    IgxGrid com múltiplas colunas de cabeçalho.
    		 IgxGrid com cabeçalhos multicolunas
    grade de árvore Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
    Ignite UI CLI:
    ig add custom-tree-grid newCustomTreeGrid
    IgxTreeGrid com recursos opcionais como classificação, filtragem, edição de linhas, etc.
    		 IgxTreeGrid com recursos opcionais como classificação, filtragem, edição de células, edição de linhas, redimensionamento, seleção de linhas, paginação, fixação de colunas, movimentação de colunas, ocultação de colunas
    lista Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c list newList
    Ignite UI CLI:
    ig add list newList
    IgxList básico.
    		 IgxList com lógica de busca e filtragem.
    combinação Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c combo newCombo
    Ignite UI CLI:
    ig add combo newCombo
    IgxCombo básico com modelos.
    		 IgxCombo com modelos personalizados.
    Gráficos
    tabela de categorias Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c category-chart newCategoryChart
    Ignite UI CLI:
    ig add category-chart newCategoryChart
    Gráfico de categoria básico com seletor de tipo de gráfico.
    		 ​Gráfico de categoria básico com seletor de tipo de gráfico.
    gráfico financeiro Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
    Ignite UI CLI:
    ig add financial-chart newFinancialChart
    Gráfico financeiro básico com barra de ferramentas automática e seleção de tipo.
    		 ​Gráfico financeiro básico com barra de ferramentas automática e seleção de tipo.
    Medidores
    gráfico de marcadores Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
    Ignite UI CLI:
    ig add bullet-graph newBulletGraph
    IgxBulletGraph com diferentes animações.
    		 IgxBulletGraph com diferentes animações.
    calibre linear Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
    Ignite UI CLI:
    ig add linear-gauge newLinearGauge
    IgxLinearGauge com diferentes animações.
    		 IgxLinearGauge com diferentes animações.
    calibre radial Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
    Ignite UI CLI:
    ig add radial-gauge newRadialGauge
    IgxRadialGauge com diferentes animações.
    		 IgxRadialGauge com diferentes animações.
    Layouts
    gerente de doca Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dock-manager newDockManager
    Ignite UI CLI:
    ig add dock-manager newDockManager
    IgcDockManager básico.
    		 IgcDockManager com nove slots de conteúdo.
    carrossel Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c carousel newCarousel
    Ignite UI CLI:
    ig add carousel newCarousel
    IgxCarousel básico.
    		 IgxCarousel percorrendo uma série de imagens.
    abas Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tabs newTabs
    Ignite UI CLI:
    ig add tabs newTabs
    IgxTabs básicos.
    		 Componente IgxTabs que inclui três grupos de guias personalizados.
    navegação inferior Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
    Ignite UI CLI:
    ig add bottom-nav newBottomNav
    Modelo de navegação inferior com três itens.
    		 Modelo de barra de navegação inferior com três itens.
    Entrada e exibição de dados
    lasca Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c chip newChip
    Ignite UI CLI:
    ig add chip newChip
    IgxChip básico.
    		 Componentes IgxChip dentro da área igx-chips.
    suspenso Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dropdown newDropDown
    Ignite UI CLI:
    ig add dropdown newDropDown
    IgxDropDown básico.
    		 ​IgxDropDown básico que exibe uma lista de itens.
    selecionar (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select newSelect
    Ignite UI CLI:
    ig add select newSelect
    IgxSelect básico.
    		 ​IgxSelect simples que exibe uma lista de itens.
    selecionar (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
    Ignite UI CLI:
    ig add select-groups newGroupsSelect
    Selecione Com grupos.
    		 IgxSelect exibindo itens agrupados.
    selecionar (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select-in-form newFormSelect
    Ignite UI CLI:
    ig add select-in-form newFormSelect
    IgxSelect em um formulário.
    		 Uso do componente IgxSelect em um formulário.
    grupo de entrada Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c input-group newInputGroup
    Ignite UI CLI:
    ig add input-group newInputGroup
    Visualização básica do formulário IgxInputGroup.
    		 Visualização de formulário criada com IgxInputGroup.
    Interações
    diálogo Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dialog newDialog
    Ignite UI CLI:
    ig add dialog newDialog
    IgxDialog básico.
    		 Exemplo do IgxDialog usado como um diálogo de confirmação padrão.
    dica de ferramenta Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tooltip newTooltip
    Ignite UI CLI:
    ig add tooltip newTooltip
    Uma dica de ferramenta totalmente personalizável.
    		 Dica de ferramenta básica criada com o IgxTooltip.
    Agendamento
    selecionador de data Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c date-picker newDatePicker
    Ignite UI CLI:
    ig add date-picker newDatePicker
    IgxDatePicker básico.
    		 ​IgxDatePicker básico com vinculação de dados unidirecional.
    selecionador de tempo Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c time-picker newTimePicker
    Ignite UI CLI:
    ig add time-picker newTimePicker
    IgxTimePicker básico.
    		 ​IgxTimePicker básico com conjunto de valores iniciais e vinculação de dados unidirecional.
    calendário Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c calendar newCalendar
    Ignite UI CLI:
    ig add calendar newCalendar
    IgxCalendar com seleção única.
    		 ​IgxDatePicker básico com vinculação de dados unidirecional.

    Scenario templates

    Modelo Código e descrição Demo
    grade-incrível Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
    Ignite UI CLI:
    ig add awesome-grid newAwesomeGrid
    IgxGrid com modelos de células personalizados.
    		 IgxGrid com modelos de células e controles incorporados nas células.
    grade crm Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
    Ignite UI CLI:
    ig add crm-grid newCrmGrid
    IgxGrid com implementação de pesquisa personalizada.
    		 IgxGrid com implementação de pesquisa personalizada.
    fintech-grade Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
    Ignite UI CLI:
    ig add fintech-grid newFinTechGrid
    IgxGrid processa milhares de atualizações ao vivo por segundo.
    		 Demonstração de atualização ao vivo do IgxGrid que processa milhares de atualizações por segundo.
    grade-de-árvore-de-fintech Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
    Ignite UI CLI:
    ig add fintech-tree-grid newFinTechTreeGrid
    IgxGrid processa milhares de atualizações ao vivo por segundo.
    		 Demonstração de atualização ao vivo do IgxTreeGrid, processando milhares de atualizações por segundo.
    Conecte-se Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c login newLogin
    Ignite UI CLI:
    ig add login newLogin
    Formulários de registro e login criados com IgxInputGroup.
    		 Formulários de registro e login criados com IgxInputGroup.
    previsão do tempo Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
    Ignite UI CLI:
    ig add weather-forecast newWeatherForecast
    Modelo com igxExpansionPanel.
    		 O modelo usa o IgxExpansionPanel para exibir detalhes da previsão do tempo diária.