Web Components Cuadrícula Personalizar iconos

Los iconos de Ignite UI for Web Components IgcGridComponent se pueden personalizar para usar iconos personalizados de un conjunto de colecciones diferente mediante 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.

// Add a new 'material' icon called 'filter_list' from string
registerIconFromText("filter_list", '<svg>...</svg>', "material");

// Add a new 'material' icon called 'my-filter_list' from svg url
registerIcon("filter_list", "url" , "material")

// Sets the icon reference to the new registered icon.
setIconRef('filter_list', 'default', {
            name: 'filter_list',
            collection: 'material',
});

Web Components 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
add	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
cerrar	cerca	material
colapso	expand_less	material
confirmar	controlar	material
date_range	date_range	material
borrar	delete	material
drag_indicator	drag_indicator	material
editar	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
esconder	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
mostrar	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
Desanclar	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
add	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.
cerrar	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_dowload	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.
esconder	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.
mostrar	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.
Desanclar	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.

Paginador

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.

Tira de acción

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

IgcGridComponent

Additional Resources

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