Blazor Grid Customize Icons

Os ícones Ignite UI for Blazor IgbGrid podem ser personalizados para usar ícones personalizados de um conjunto de coleta diferente usando os métodos de API expostos:

registerIconFromText
registerIcon
setIconRef

O registro de um ícone o armazena em cache localmente, para que ele possa ser reutilizado entre componentes, que fazem referência a esse ícone por nome e nome de coleção. Definir uma referência altera qual ícone, de qual coleção, será usado ao fazer referência a esse ícone pelo nome.

@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

O exemplo a seguir demonstra como alternar dos ícones originais do material para ícones svg incríveis de fonte personalizada e voltar para o material.

Internal Icons

A seguir, listamos todos os ícones internos. Alias é o nome do ícone pelo qual ele pode ser referenciado. Ícone de Destino é o nome do ícone interno e Coleção de Destino é a coleção na qual o ícone é registrado internamente.

Cognome	Ícone de destino	Coleção de Alvos
add	add	material
add_child	adicionar filho	imx-icons
add_row	adicionar linha	imx-icons
arrow_back	arrow_back	material
arrow_drop_down	arrow_drop_up	material
arrow_forward	seta_para_frente	material
arrow_next	chevron_right	material
arrow_prev	chevron_left	material
case_sensitive	case-sensitive	imx-icons
carousel_next	seta_para_frente	material
carousel_prev	arrow_back	material
chevron_left	chevron_left	material
chevron_right	chevron_right	material
relógio	access_time	material
fechar	fechar	material
colapso	expand_less	material
confirmar	verificar	material
date_range	date_range	material
excluir	delete	material
drag_indicator	drag_indicator	material
editar	editar	material
erro	erro	material
expandir	expandir_mais	material
expand_more	expandir_mais	material
file_download	arquivo_download	material
filter_all	selecionar tudo	imx-icons
filter_before	é antes	imx-icons
filter_contains	Contém	imx-icons
filter_does_not_contain	não-contém-	imx-icons
filter_empty	está vazio	imx-icons
filter_equal	Equals	imx-icons
filter_false	é-falso	imx-icons
filter_greater_than	maior que	imx-icons
filter_greater_than_or_equal	maior ou igual	imx-icons
filter_in	está na	imx-icons
filter_last_month	último mês	imx-icons
filter_last_year	último ano	imx-icons
filter_less_than	menor que	imx-icons
filter_less_than_or_equal	menor que ou igual	imx-icons
filter_next_month	próximo mês	imx-icons
filter_next_year	próximo ano	imx-icons
filter_not_empty	não vazio	imx-icons
filter_not_equal	não igual	imx-icons
filter_not_null	não é nulo	imx-icons
filter_null	é-nulo	imx-icons
filter_starts_with	começa com	imx-icons
filter_this_month	este mês	imx-icons
filter_this_year	este ano	imx-icons
filter_today	Hoje	imx-icons
filter_true	é-verdade	imx-icons
filter_yesterday	Ontem	imx-icons
first_page	first_page	material
group_work	trabalho em grupo	material
esconder	visibilidade_desligada	material
import_export	import_export	material
input_collapse	arrow_drop_up	material
input_clear	claro	material
input_expand	arrow_drop_down	material
jump_down	pular para baixo	imx-icons
jump_up	pular para cima	imx-icons
last_page	last_page	material
more_vert	more_vert	material
próximo	navigate_next	material
alfinete	pino à esquerda	imx-icons
Prev	navigate_before	material
atualizar	atualizar	material
retirar	cancelar	material
procurar	procurar	material
selecionado	terminado	material
programa	visibilidade	material
sort_asc	arrow_upward	material
sort_desc	seta_para_baixo	material
Funções	Funções	material
table_rows	table_rows	material
Hoje	calendar_today	material
tree_collapse	expandir_mais	material
tree_expand	chevron_right	material
unfold_less	desdobrar_menos	material
unfold_more	unfold_more	material
Desafixar	desafixar à esquerda	imx-icons
view_column	view_column	material

Aqui está um detalhamento de todos os ícones usados por componente:

Grade

Ícone	Descrição
add	Usado no menu de filtro do Excel para adicionar entrada de filtro.
arrow_back	Usado em vários elementos da interface do usuário para mover uma coluna para trás.
arrow_drop_down	Usado em vários botões para indicar menus alternáveis.
arrow_forward	Usado em vários elementos da interface do usuário para mover uma coluna para frente.
Cancelar	Usado em vários elementos da interface do usuário para cancelar operações.
chevron_right	Usado para indicar menus expansíveis, como na filtragem de estilo do Excel.
fechar	Usado para fechar um menu expandido.
confirmar	Usado para confirmar uma operação.
drag_indicator	Usado para mostrar uma alça para indicar que um item pode ser arrastado.
erro	Usado em células editáveis para indicar entrada de dados incorreta.
expand_more	Usado pelo menu de filtragem do Excel para indicar a adição de mais filtros.
file_dowload	Usado pelo exportador de filtros do Excel.
filter_*	Usado para vários operandos de filtragem.
group_work	Usado pela área de soltar agrupar por.
esconder	Usado por vários elementos da interface do usuário para ocultar colunas.
import_export	Usado pelo seletor de dados de pivô para movimentação.
input_clear	Usado por campos de entrada para limpar dados de entrada.
próximo	Usado pelo menu de linha de filtragem para navegar entre as fichas.
alfinete	Usado por vários elementos da interface do usuário para fixação de coluna.
Prev	Usado pelo menu de linha de filtragem para navegar entre as fichas.
retirar	Usado por vários elementos da interface do usuário como um indicador de remoção.
atualizar	Usado pelo menu de linha de filtragem para recarregar os filtros.
selecionado	Usado por vários elementos da interface do usuário para indicar a seleção ativa.
programa	Usado por vários elementos da interface do usuário para mostrar colunas.
sort_asc	Usado por vários elementos da interface do usuário para indicar a direção da classificação.
sort_desc	Usado por vários elementos da interface do usuário para indicar a direção da classificação.
Funções	Usado pela grade dinâmica e pelos seletores de dados.
table_rows	Usado pelo seletor de dados da grade dinâmica.
tree_collapse	Usado por estrutura semelhante a uma árvore para mostrar menos detalhes.
tree_expand	Usado por estrutura semelhante a árvore para mostrar mais detalhes.
Desafixar	Usado por vários elementos da interface do usuário para fixação de coluna.
unfold_less	Usado pela grade hierárquica para recolher todas as linhas.
unfold_more	Usado pela grade hierárquica para expandir todas as linhas.
view_column	Usado pelo seletor de dados dinâmicos.

Paginador

Ícone	Descrição
first_page	Usado pelo botão usado para navegar até a primeira página.
last_page	Usado pelo botão usado para navegar até a última página.
Prev	Usado pelo botão usado para navegar para a página anterior.
próximo	Usado pelo botão usado para navegar para a próxima página.

Faixa de ação

Ícone	Descrição
add_child	Usado pelo menu pop-up.
add_row	Usado pelo menu pop-up.
more_vert	Usado pelo menu pop-up.

API References

IgbGrid

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.