Tema Web Components Data Grid

Com o mecanismo de Temas Web Components, a Ignite UI for Web Components Grid pode ser facilmente personalizada para corresponder à identidade da sua marca. Além de temas e paletas predefinidos, você pode personalizar ainda mais a aparência da sua grade de dados usando um conjunto 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.

How to use

Conforme mencionado acima, usar as variáveis CSS da tabela nos permite estilizar nossa grade. Digamos que queremos alterar a grade para usar um Tema Escuro, alterando o seguinte plano de fundo do cabeçalho e cores de texto etc., podemos fazer isso assim em um arquivo opcionalmente chamado dark-theme.css.

importar "./dark-theme.css";

.ig-data-grid {
  /* shared variables used in custom properties */
  --cell-text-color:#58258b;
  --cell-background:#191919;
  --cell-selected-background: #58258b;
  --cell-selected-within-text-color: #191919;
  --cell-selected-within-background: #58258b;

  --row-selected-background:var(--cell-selected-background);
  --row-hover-background:var(--cell-selected-background);
  --row-hover-text-color:var(--cell-background);

  --header-background: #58258b;
  --header-text-color: #191919;
  --header-separator-background: #58258b;
  --header-separator-width: 5px;

  --section-header-background: #191919;
  --section-header-text-color: #58258b;
  --section-header-selected-background: #58258b;
  --section-header-selected-text-color: #191919;

  --row-separator-background: #191919;
  --row-separator-last-sticky-row-background: #191919;
  --row-separator-pinned-row-background: #58258b;
  --row-separator-sticky-row-background: #58258b;

  --column-resizing-separator-background: #58258b;
  --column-moving-separator-background: #58258b;


  --filtering-header-background: #272727;
  --filtering-header-text-color: #ffffff;
  --filtering-row-background: #272727;
  --filtering-row-text-color: #ffffff;
  --tree-filtered-text-color: #ffffff;

  --summary-root-background: #7446b9;
  --summary-root-label-text-color: #191919;
  --summary-root-value-text-color: #191919;
}

.ig-grid-column-options {
  --background-color: black;
  --text-color: #7446b9;
  --summary-list-text-color: #7446b9;
  --summary-list-background: #191919;
}

.ig-data-grid-toolbar {
  --background-color: #191919;
  --text-color: #58258b;
  --dialog-background-color: #191919;
}

.ig-column-chooser {
  --background-color: #191919;
  --title-color: green;
  --select-all-caption-text-color: #58258b;
  --search-icon-color: #58258b;
  --search-text-color: #58258b;
  --search-background-color: #191919;
  --search-border-color: #58258b;
  --search-text-style: 12px 'Courier';
}

.ig-column-pinning {
  --background-color: white;
  --text-color: #7446b9;
  --select-all-caption-text-color: #58258b;
  --search-icon-color: #58258b;
  --search-text-color: #58258b;
  --search-background-color: #191919;
  --search-border-color: #58258b;
  --search-text-style: 12px 'Courier';
}