Blazor Grid Customize Icons

Los iconos de Ignite UI for BlazorIgbGrid pueden personalizarse para usar iconos personalizados de un conjunto de colecciones diferente usando los métodos de API expuestos:

• registerIconFromText
• registerIcon
• setIconRef

Al registrar un icono, se almacena en caché localmente, de modo que se pueda reutilizar entre componentes, que hacen referencia a ese icono por nombre y nombre de colección. Al establecer una referencia, se cambia qué icono, de qué colección, se utilizará al hacer referencia a ese icono por su nombre.

@code {
    private IgbIcon icon;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (this.icon != null && firstRender)
        {
            this.icon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                // Add a new 'material' icon called 'filter_list' from string
                this.icon.RegisterIconFromText("filter_list", '<svg>...</svg>', "material");

                // Add a new 'material' icon called 'filter_list' from svg url
                this.icon.RegisterIcon("filter_list", "url" , "material")

                // Sets the icon reference to the new registered icon.
                this.icon.SetIconRef("filter_list", "default", new IgbIconMeta()
                {
                    Name = "filter_list",
                    Collection = "material",
                });
            }));
        }
    }
}

Blazor Customize Icons Example

En el siguiente ejemplo se muestra cómo cambiar de los iconos de material originales a iconos svg impresionantes de fuentes personalizadas y volver al material.

Internal Icons

A continuación se enumeran todos los iconos internos. Alias es el nombre del icono por el que se puede hacer referencia. Icono de destino es el nombre del icono interno y Colección de destino es la colección en la que se registra internamente el icono.

Alias	Icono de objetivo	Colección de destino
**añadir*-	add	material
**add_child*-	agregar-niño	imx-icons
**add_row*-	fila de adición	imx-icons
**arrow_back*-	arrow_back	material
**arrow_drop_down*-	arrow_drop_up	material
**arrow_forward*-	flecha_adelante	material
**arrow_next*-	chevron_right	material
**arrow_prev*-	chevron_izquierda	material
**case_sensitive*-	case-sensitive	imx-icons
**carousel_next*-	flecha_adelante	material
**carousel_prev*-	arrow_back	material
**chevron_left*-	chevron_izquierda	material
**chevron_right*-	chevron_right	material
**reloj*-	access_time	material
**cerca*-	cerca	material
**colapso*-	expand_less	material
**confirmar*-	controlar	material
**date_range*-	date_range	material
**eliminar*-	delete	material
**drag_indicator*-	drag_indicator	material
**edit*-	editar	material
**error*-	error	material
**expandir*-	expand_more	material
**expand_more*-	expand_more	material
**file_download*-	file_download	material
**filter_all*-	Seleccionar-todo	imx-icons
**filter_before*-	es-antes	imx-icons
**filter_contains*-	Contiene	imx-icons
**filter_does_not_contain*-	no-contiene-	imx-icons
**filter_empty*-	está-vacío	imx-icons
**filter_equal*-	Iguales	imx-icons
**filter_false*-	es-falso	imx-icons
**filter_greater_than*-	mayor que	imx-icons
filter_greater_than_or_equal	mayor o igual que	imx-icons
**filter_in*-	está-en	imx-icons
**filter_last_month*-	último mes	imx-icons
**filter_last_year*-	El año pasado	imx-icons
**filter_less_than*-	menos de	imx-icons
**filter_less_than_or_equal*-	menor o igual	imx-icons
**filter_next_month*-	El mes que viene	imx-icons
**filter_next_year*-	El año que viene	imx-icons
**filter_not_empty*-	no-vacío	imx-icons
**filter_not_equal*-	no igual	imx-icons
**filter_not_null*-	es-no-nulo	imx-icons
**filter_null*-	es-nulo	imx-icons
**filter_starts_with*-	comienza-con	imx-icons
**filter_this_month*-	este mes	imx-icons
**filter_this_year*-	Este año	imx-icons
**filter_today*-	Hoy	imx-icons
**filter_true*-	es-verdad	imx-icons
**filter_yesterday*-	Ayer	imx-icons
**first_page*-	primera página	material
**group_work*-	trabajo en equipo	material
**esconderse*-	visibilidad_desactivada	material
**import_export*-	importación y exportación	material
**input_collapse*-	arrow_drop_up	material
**input_clear*-	claro	material
**input_expand*-	flecha_drop_abajo	material
**jump_down*-	Salto hacia abajo	imx-icons
**jump_up*-	Saltar	imx-icons
**last_page*-	última página	material
**more_vert*-	more_vert	material
**próximo*-	navigate_next	material
**anclar*-	pin a la izquierda	imx-icons
**prev*-	navigate_before	material
**actualizar*-	actualizar	material
**eliminar*-	Cancelar	material
**buscar*-	buscar	material
**seleccionado*-	hecho	material
**show*-	visibilidad	material
**sort_asc*-	flecha_hacia arriba	material
**sort_desc*-	flecha_hacia abajo	material
**funciones*-	Funciones	material
**table_rows*-	table_rows	material
**Hoy*-	calendar_today	material
**tree_collapse*-	expand_more	material
**tree_expand*-	chevron_right	material
**unfold_less*-	desplegar_menos	material
**unfold_more*-	unfold_more	material
**desabrochando*-	desanclar a la izquierda	imx-icons
**view_column*-	view_column	material

A continuación, se muestra un desglose de todos los iconos utilizados por componente:

Red

Icono	Descripción
**añadir*-	Se utiliza en el menú de filtro de Excel para agregar una entrada de filtro.
**arrow_back*-	Se utiliza en varios elementos de la interfaz de usuario para mover una columna hacia atrás.
**arrow_drop_down*-	Se utiliza en varios botones para indicar menús alternables.
**arrow_forward*-	Se utiliza en varios elementos de la interfaz de usuario para mover una columna hacia adelante.
**Cancelar*-	Se utiliza en varios elementos de la interfaz de usuario para cancelar operaciones.
**chevron_right*-	Se utiliza para indicar menús expandibles, como en el filtrado de estilo de Excel.
**cerca*-	Se utiliza para cerrar un menú expandido.
**confirmar*-	Se utiliza para confirmar una operación.
**drag_indicator*-	Se utiliza para mostrar un controlador para indicar que se puede arrastrar un elemento.
**error*-	Se utiliza en celdas editables para indicar la entrada de datos errónea.
**expand_more*-	Utilizado por el menú de filtrado de Excel para indicar la adición de más filtros.
**file_download*-	Utilizado por el exportador de filtros de Excel.
**filter_*-	Se utiliza para varios operandos de filtrado.
**group_work*-	Utilizado por el área de colocación agrupar por.
**esconderse*-	Lo usan varios elementos de la interfaz de usuario para ocultar columnas.
**import_export*-	Utilizado por el selector de datos de pivote para mover.
**input_clear*-	Utilizado por los campos de entrada para borrar los datos de entrada.
**próximo*-	Utilizado por el menú de filas de filtrado para navegar entre fichas.
**anclar*-	Lo usan varios elementos de la interfaz de usuario para el anclaje de columnas.
**prev*-	Utilizado por el menú de filas de filtrado para navegar entre fichas.
**eliminar*-	Utilizado por varios elementos de la interfaz de usuario como indicador de eliminación.
**actualizar*-	Utilizado por el menú de la fila de filtrado para volver a cargar los filtros.
**seleccionado*-	Utilizado por varios elementos de la interfaz de usuario para indicar la selección activa.
**show*-	Lo usan varios elementos de la interfaz de usuario para mostrar columnas.
**sort_asc*-	Lo utilizan varios elementos de la interfaz de usuario para indicar la dirección de clasificación.
**sort_desc*-	Lo utilizan varios elementos de la interfaz de usuario para indicar la dirección de clasificación.
**funciones*-	Utilizado por la cuadrícula pivotante y los selectores de datos.
**table_rows*-	Utilizado por el selector de datos de la cuadrícula dinámica.
**tree_collapse*-	Utilizado por la estructura en forma de árbol para mostrar menos detalles.
**tree_expand*-	Utilizado por la estructura en forma de árbol para mostrar más detalles.
**desabrochando*-	Lo usan varios elementos de la interfaz de usuario para el anclaje de columnas.
**unfold_less*-	Utilizado por la cuadrícula jerárquica para contraer todas las filas.
**unfold_more*-	Utilizado por la cuadrícula jerárquica para expandir todas las filas.
**view_column*-	Utilizado por el selector de datos dinámicos.

Paginator

Icono	Descripción
first_page	Utilizado por el botón utilizado para navegar a la primera página.
**last_page*-	Utilizado por el botón utilizado para navegar a la última página.
**prev*-	Utilizado por el botón utilizado para navegar a la página anterior.
**próximo*-	Utilizado por el botón utilizado para navegar a la página siguiente.

Action Strip

Icono	Descripción
add_child	Utilizado por el menú emergente.
**add_row*-	Utilizado por el menú emergente.
more_vert	Utilizado por el menú emergente.

API References

• IgbGrid

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub