React Ícones de personalização de grade

The Ignite UI for React IgrGrid icons can be customized to use custom icons from a different collection set using the exposed API methods:

• 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.

// 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',
});

React 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
**adicionar*-	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
**perto*-	fechar	material
**colapso*-	expand_less	material
**confirmar*-	verificar	material
**date_range*-	date_range	material
**delete*-	delete	material
**drag_indicator*-	drag_indicator	material
**edit*-	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
**pin*-	pino à esquerda	imx-icons
**prévio*-	navigate_before	material
**atualizar*-	atualizar	material
**remover*-	cancelar	material
**pesquisar*-	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
**desalfinete*-	desafixar à esquerda	imx-icons
**view_column*-	view_column	material

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

Grade

Ícone	Descrição
**adicionar*-	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.
**perto*-	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_download*-	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.
**pin*-	Usado por vários elementos da interface do usuário para fixação de coluna.
**prévio*-	Usado pelo menu de linha de filtragem para navegar entre as fichas.
**remover*-	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.
**desalfinete*-	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.

Paginator

Í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.
**prévio*-	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.

Action Strip

Í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

• IgrGrid

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for React Forums
• Ignite UI for React GitHub