La Ignite UI for Blazor IgbGrid se puede personalizar para usar íconos 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.
@code {private IgbIcon icon;
protectedoverrideasync 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 stringthis.icon.RegisterIconFromText("filter_list", '<svg>...</svg>', "material");
// Add a new 'material' icon called 'filter_list' from svg urlthis.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",
});
}));
}
}
}razor
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.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Iconos internos
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.