Plantillas de componentes

    La siguiente tabla proporciona una lista de los componentes de Ignite UI Angular que se pueden generar mediante los comandos de Ignite UI Angular Schematics o Ignite UI CLI. Además, puede encontrar enlaces a las demostraciones disponibles en nuestra documentación, pero tenga en cuenta que no son exactamente idénticas a las generadas por la CLI.

    Plantilla Código y descripción Manifestación
    Cuadrículas y listas
    red Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid newGrid
    Ignite UI CLI:
    ig add grid newGrid
    Plantilla básica para IgxGrid.
    		 Componente IgxGrid con columnas generadas automáticamente
    edición por lotes de cuadrícula Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
    Ignite UI CLI:
    ig add grid-batch-editing newGridBatchEditing
    Muestra IgxGrid con edición por lotes.
    		 IgxGrid que utiliza el servicio Transaction para edición por lotes
    cuadrícula personalizada Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
    Ignite UI CLI:
    ig add custom-grid newCustomGrid
    IgxGrid con funciones opcionales como ordenar, filtrar, editar, etc.
    		 IgxGrid con funciones opcionales como ordenar, filtrar, editar celdas, editar filas, agrupar por, cambiar tamaño, seleccionar, paginar, fijar columnas, mover columnas, ocultar columnas
    resúmenes de cuadrícula Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
    Ignite UI CLI:
    ig add grid-summaries newGridSummaries
    IgxGrid con función de resúmenes.
    		 IgxGrid con función de resúmenes.
    encabezados-de-varias-columnas de cuadrícula 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 con múltiples columnas de encabezado.
    		 IgxGrid con encabezados de varias columnas
    rejilla de árbol Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
    Ignite UI CLI:
    ig add custom-tree-grid newCustomTreeGrid
    IgxTreeGrid con funciones opcionales como ordenar, filtrar, editar filas, etc.
    		 IgxTreeGrid con funciones opcionales como clasificación, filtrado, edición de celdas, edición de filas, cambio de tamaño, selección de filas, paginación, fijación de columnas, movimiento de columnas, ocultación de columnas
    lista Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c list newList
    Ignite UI CLI:
    ig add list newList
    Lista Igx básica.
    		 IgxList con lógica de búsqueda y filtrado.
    combinación Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c combo newCombo
    Ignite UI CLI:
    ig add combo newCombo
    IgxCombo básico con plantillas.
    		 IgxCombo con plantillas personalizadas.
    Gráficos
    tabla de categorías Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c category-chart newCategoryChart
    Ignite UI CLI:
    ig add category-chart newCategoryChart
    Gráfico de categorías básico con selector de tipo de gráfico.
    		 ​Gráfico de categorías básico con selector de tipo de gráfico.
    cuadro financiero Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
    Ignite UI CLI:
    ig add financial-chart newFinancialChart
    Cuadro financiero básico con barra de herramientas automática y selección de tipo.
    		 ​Cuadro financiero básico con barra de herramientas automática y selección de tipo.
    medidores
    gráfico de viñetas Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
    Ignite UI CLI:
    ig add bullet-graph newBulletGraph
    IgxBulletGraph con diferentes animaciones.
    		 IgxBulletGraph con diferentes animaciones.
    calibre lineal Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
    Ignite UI CLI:
    ig add linear-gauge newLinearGauge
    IgxLinearGauge con diferentes animaciones.
    		 IgxLinearGauge con diferentes animaciones.
    calibre radial Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
    Ignite UI CLI:
    ig add radial-gauge newRadialGauge
    IgxRadialGauge con diferentes animaciones.
    		 IgxRadialGauge con diferentes animaciones.
    Diseños
    gerente de muelle 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 con nueve espacios de contenido.
    carrusel Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c carousel newCarousel
    Ignite UI CLI:
    ig add carousel newCarousel
    Carrusel Igx Básico.
    		 IgxCarousel recorriendo una serie de imágenes.
    pestañas 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 incluye tres grupos de pestañas personalizados.
    navegación inferior Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
    Ignite UI CLI:
    ig add bottom-nav newBottomNav
    Plantilla de navegación inferior de tres elementos.
    		 Plantilla de barra de navegación inferior de tres elementos.
    Entrada y visualización de datos
    chip 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 del área-igx-chips.
    desplegable 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 muestra una lista de elementos.
    seleccionar (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 simple que muestra una lista de elementos.
    seleccionar (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
    Ignite UI CLI:
    ig add select-groups newGroupsSelect
    Seleccione Con grupos.
    		 IgxSelect muestra elementos agrupados.
    seleccionar (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 en un formulario.
    		 Uso del componente IgxSelect en un formulario.
    grupo de entrada Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c input-group newInputGroup
    Ignite UI CLI:
    ig add input-group newInputGroup
    Vista de formulario básico de IgxInputGroup.
    		 Vista de formulario creada con IgxInputGroup.
    Interacciones
    diálogo Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dialog newDialog
    Ignite UI CLI:
    ig add dialog newDialog
    Diálogo Igx básico.
    		 Muestra de IgxDialog utilizado como diálogo de confirmación estándar.
    información sobre herramientas Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tooltip newTooltip
    Ignite UI CLI:
    ig add tooltip newTooltip
    Una información sobre herramientas totalmente personalizable.
    		 Información sobre herramientas básica creada con IgxTooltip.
    Planificación
    selector de fechas 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 con enlace de datos unidireccional.
    selector de tiempo 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 con conjunto de valores iniciales y enlace de datos unidireccional.
    calendario Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c calendar newCalendar
    Ignite UI CLI:
    ig add calendar newCalendar
    IgxCalendar con selección única.
    		 ​IgxDatePicker básico con enlace de datos unidireccional.

    Scenario templates

    Plantilla Código y descripción Manifestación
    impresionante-cuadrícula Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
    Ignite UI CLI:
    ig add awesome-grid newAwesomeGrid
    IgxGrid con plantillas de celdas personalizadas.
    		 IgxGrid con plantillas de celda y controles integrados en las celdas.
    rejilla-crm Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
    Ignite UI CLI:
    ig add crm-grid newCrmGrid
    IgxGrid con implementación de búsqueda personalizada.
    		 IgxGrid con implementación de búsqueda personalizada.
    red-fintech Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
    Ignite UI CLI:
    ig add fintech-grid newFinTechGrid
    IgxGrid maneja miles de actualizaciones en vivo por segundo.
    		 Demostración de IgxGrid Live Updating que maneja miles de actualizaciones por segundo.
    red-de-árbol-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 maneja miles de actualizaciones en vivo por segundo.
    		 Demostración de IgxTreeGrid Live Updating que maneja miles de actualizaciones por segundo.
    acceso Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c login newLogin
    Ignite UI CLI:
    ig add login newLogin
    Formularios de registro e inicio de sesión creados con IgxInputGroup.
    		 Formularios de registro e inicio de sesión creados con IgxInputGroup..
    pronóstico del tiempo Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
    Ignite UI CLI:
    ig add weather-forecast newWeatherForecast
    Plantilla con igxExpansionPanel.
    		 La plantilla utiliza IgxExpansionPanel para mostrar detalles del pronóstico del tiempo diario.