Elevações em Ignite UI for Web Components

A implementação das Elevações em Ignite UI for Web Components é modelada após as Elevações no Material Design. Eles são usados para estabelecer e manter limites funcionais entre as árvores do Document Object Model para permitir um melhor encapsulamento funcional.

Visão geral

Ignite UI for Web Components sombras seguem de perto as diretrizes do Material Design para estabelecer a hierarquia de profundidade com base em 25 níveis de elevação. O tamanho da projeção de sombra está relacionado ao número do nível de elevação. Quanto maior o número do nível de elevação, maior será a sombra. As elevações em Ignite UI for Web Components são expostas como variáveis CSS. Cada variável armazena um conjunto de 3 box-shadows. Estes box-shadows representam os elementos umbra, penumbra e antumbra que são as propriedades das sombras observadas no mundo real.

Aqui está uma lista de elevações em repouso usadas em vários componentes em Ignite UI for Web Components no Tema do Bootstrap e seus nomes de variáveis CSS correspondentes:

Componente	Nível de elevação padrão	Variável CSS
Botão	0	--ig-elevação-0
Cartão elevado	2	--ig-elevação-2
Toast, Snackbar	10	--ig-elevation-10
Navdrawer	16	--ig-elevação-16

Como você pode ver na coluna Variável CSS, todas as elevações são definidas no seguinte formato--ig-elevation-[level]. Como mencionado, o número do nível de elevação vai de 0 a 24 (inclusive).

Usage

Para começar a usar elevações em seus próprios componentes, tudo o que você precisa é fazer referência ao nome da variável do nível desejado:

.custom-element {
  box-shadow: var(--ig-elevation-6);
}

Alterar a elevação em um tema de componente existente funciona de maneira semelhante:

igc-navbar {
  box-shadow: var(--ig-elevation-8);
}

Defining Elevations

A atualização das elevações padrão funciona de maneira semelhante à atualização das cores da paleta. Você simplesmente precisa reatribuir a variável a um valor diferente. Com elevações, certifique-se de que o valor seja box-shadow.

Exemplo:

:root {
  --ig-elevation-1: 0 2px 6px 0 rgba(0, 0, 0, .18);
  --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

Agora, todos os componentes que usam os níveis de elevação 1 e 2 terão suas sombras atualizadas.

Shadowing

Você pode sombrear as elevações definidas globalmente somente para um escopo específico. Já vimos que o Snackbar e o componente Toast usam o nível de elevação 10. Para alterar as sombras de ambos, tudo o que você precisa fazer é:

igc-snackbar,
igc-toast {
  --ig-elevation-10: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

Isso definirá a notificação do sistema e as sombras da barra de lanches para o valor atribuído a--ig-elevation-10.

Using Elevation Factor

Além dos níveis de elevação, Ignite UI for Web Components expõe uma variável CSS que facilita o controle do fator de elevação global. O valor padrão é definido como 1, o que significa que todas as sombras do componente serão as mesmas definidas em seus temas de componente. Se você deseja remover todas as sombras, basta alterar o valor da propriedade para 0:

:root {
  --ig-elevation-factor: 0;
}

O--ig-elevation-factor também pode ser definido como um valor decimal ou um valor maior que 1. Quanto maior o valor, maior será a sombra.

API References

• Elevations