Plantillas de componentes
La siguiente tabla proporciona una lista de los componentes Ignite UI Angular que se pueden generar usando los comandos 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. |
Ver página en
GitHub