Theme React Grid

    Com o css React Theming, o Ignite UI for React Grid pode ser facilmente personalizado para corresponder à identidade da sua marca. Além de temas e paletas predefinidos, você pode personalizar ainda mais a aparência da grade de dados usando um conjunto alternativo de propriedades personalizadas CSS.

    Available Theming Properties

    Nome da propriedade Tipo Descrição
    --elevação da grade número entre 0-24 O nível de elevação a ser usado para a grade
    --arrastar-elevação número entre 0-24 O nível de elevação, a ser usado para elementos móveis (ex. cabeçalho de coluna)
    --área-de-grupo-cor cor Cor do texto da área do grupo de grade
    --grupo-área-fundo cor Cor do texto da área do grupo de grade
    --soltar-área-texto-cor cor A cor do texto da área de soltar
    --drop-area-ícone-cor cor A cor do ícone da área de soltar
    --drop-area-fundo cor Cor de fundo da área de queda
    --área-de-soltar-em-fundo-de-soltar cor O fundo da área de queda na cor da queda
    --cabeçalho-fundo cor Cor de fundo do cabeçalho da grade
    --cabeçalho-texto-cor cor Cor do texto do cabeçalho da grade
    --cabeçalho-selecionado-fundo cor A cor de fundo do cabeçalho da grade quando selecionado (por exemplo, seleção de coluna).
    --cabeçalho-cor-do-texto-selecionado cor A cor do texto do cabeçalho da grade quando selecionado (por exemplo, seleção de coluna).
    --ícone-de-cabeçalho-classificável-cor-de-hover cor A cor do ícone ao passar o mouse no cabeçalho da grade quando a coluna é classificável.
    --cor-do-ícone-do-cabeçalho-classificado cor A cor do ícone do cabeçalho da tabela classificada
    --largura-da-borda-do-cabeçalho largura da borda A largura da borda usada para bordas de cabeçalho.
    --estilo-de-borda-do-cabeçalho estilo de borda O estilo de borda usado para bordas de cabeçalho. Pode ser 'pontilhado', 'tracejado' ou 'sólido'
    --cor-da-borda-do-cabeçalho cor A cor usada para bordas de cabeçalho.
    --fundo-do-cabeçalho-fantasma cor A cor de fundo do cabeçalho arrastado.
    --ghost-cabeçalho-texto-cor cor A cor do texto do cabeçalho arrastado.
    --ghost-cabeçalho-ícone-cor cor A cor do ícone do cabeçalho arrastado.
    --filtragem-de-fundo-e cor A cor de fundo da condição "E" da filtragem avançada.
    --filtragem-de-fundo-ou cor A cor de fundo no foco/selecionado da condição "E" de filtragem avançada.
    --filtragem-de-fundo-e-foco cor A cor de fundo da condição "OU" de filtragem avançada.
    --filtragem-de-fundo-ou--foco cor A cor de fundo no foco/selecionado da condição "OU" de filtragem avançada.
    --cor-da-borda-da-grade cor A cor da borda ao redor da grade.
    --conteúdo-fundo cor A cor de fundo do corpo da grade.
    --conteúdo-texto-cor cor A cor do texto do corpo da grade.
    --linha-fundo-estranho cor A cor de fundo das linhas ímpares.
    --linha-par-fundo cor A cor de fundo de linhas pares.
    --linha-ímpar-texto-cor cor A cor do texto das linhas ímpares.
    --linha-par-texto-cor cor A cor do texto das linhas pares.
    --linha-selecionada-fundo cor A cor de fundo da linha selecionada.
    --árvore-selecionada-filtered-linha-texto-cor cor A cor do texto da linha selecionada/filtrada
    --linha-selecionada-cor-do-texto cor A cor do texto da linha selecionada.
    --célula-selecionada-dentro-do-fundo cor O plano de fundo da célula selecionada dentro de uma linha/coluna selecionada.
    --célula-selecionada-dentro-da-cor-do-texto cor A cor da célula selecionada dentro de uma linha/coluna selecionada.
    --linha-selecionada-hover-fundo cor O plano de fundo da linha selecionada.
    --linha-selecionada-hover-texto-cor cor O hover text da linha selecionada
    --linha-hover-fundo cor A cor de fundo da linha de foco.
    --linha-hover-texto-cor cor A cor do texto da linha de foco.
    --linha-borda-cor cor A cor da borda entre as linhas do corpo da grade.
    --largura-da-borda-fixada largura da borda A largura da borda das linhas/colunas fixadas.
    --estilo-de-borda-fixada estilo de borda O estilo de borda das linhas/colunas fixadas. Pode ser 'pontilhado', 'tracejado' ou 'sólido'
    --cor-da-borda-fixada cor A cor da borda das linhas/colunas fixadas.
    --célula-ativa-cor-da-borda cor A cor da borda da célula ativa (focada).
    --célula-selecionada-fundo cor A cor de fundo da célula selecionada.
    --árvore-selecionada-filtrada-célula-texto-cor cor A cor do texto da célula selecionada/filtrada
    --célula-selecionada-cor-do-texto cor A cor do texto da célula selecionada.
    --edição-de-células-fundo cor A cor de fundo de uma célula no modo de edição.
    --modo-de-edição-cor cor A cor do texto no modo de edição
    --indicador-de-linha-editada cor A cor do indicador da linha editada.
    --célula-nova-cor cor A cor do texto de uma célula nova e não editada. Usado ao adicionar uma nova linha em uma grade.
    --valor-editado-da-célula-cor cor A cor do valor editado da célula.
    --célula-desativada-cor cor A cor do texto de uma célula desabilitada.
    --redimensionar-linha-cor cor Cor da linha de redimensionamento do cabeçalho da grade.
    --cor-do-indicador-de-queda cor A cor do indicador de queda.
    --grupo-rótulo-coluna-nome-texto cor Cor do texto do nome da coluna da linha do grupo de grade.
    --ícone-de-rótulo-de-grupo cor A cor do ícone da linha do grupo de grade.
    --grupo-rótulo-texto cor A cor do texto da linha do grupo de grade.
    --expandir-todos-ícone-cor cor O cabeçalho da grade expande todas as linhas do grupo com a cor do ícone.
    --expandir-todos-ícone-hover-cor cor O cabeçalho da grade expande todas as linhas do grupo com o ícone de cor flutuante.
    --expandir-ícone-cor cor A cor do ícone de expansão da linha da grade.
    --expandir-ícone-hover-cor cor A cor do ícone de expansão da linha da grade.
    --ativo-expandir-ícone-cor cor O plano de fundo da área de queda na cor da queda.
    --ativo-expandir-ícone-passar-cor cor O plano de fundo da área de queda na cor da queda.
    --grupo-contagem-fundo cor A linha do grupo de grade contém a cor de fundo do emblema.
    --grupo-contagem-texto-cor cor A cor do texto do emblema de contagem de linhas do grupo de grade.
    --grupo-linha-fundo cor Cor de fundo da linha do grupo de grade.
    --grupo-linha-fundo-selecionado cor O plano de fundo da área de queda na cor da queda.
    --filtragem-cabeçalho-fundo cor A cor de fundo do cabeçalho da coluna filtrada.
    --filtragem-cabeçalho-texto-cor cor A cor do texto do cabeçalho da coluna filtrada.
    --filtragem-linha-fundo cor A cor de fundo da linha de filtragem.
    --filtragem-linha-texto-cor cor A cor do texto da linha de filtragem.
    --árvore-filtrada-texto-cor cor A cor de fundo da linha de agrupamento em foco.
    --corpo-resumos-fundo cor A cor de fundo dos grupos de resumo localizava o corpo.
    --corpo-resumos-texto-cor cor A cor do texto dos grupos de resumo localizava o corpo.
    --root-resumos-fundo cor A cor de fundo dos grupos de resumo localizava o rodapé.
    --root-resumos-texto-cor cor A cor do texto dos grupos de resumo localizava o rodapé.
    --destaque-de-linha cor A cor de destaque da linha da grade.
    --linha-fantasma-fundo cor A cor de fundo da linha arrastada.
    --linha-arrastar-cor cor A cor da alça de arrasto.
    --soltar-área-borda-raio número entre 0 e 1 O raio da borda usado para drop-area. Pode ser uma fração entre 0 e 1, pixels ou porcentagem.

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.