Elevações

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

    Visão geral

    As sombras no Ignite UI for Angular seguem de perto as diretrizes do Material Design para estabelecer 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 no Ignite UI for Angular são expostas como variáveis CSS. Cada variável armazena um conjunto de 3 box-shadows. Essas box-shadows representam os elementos umbra, penumbra e antumbra que são as propriedades das sombras conforme observadas no mundo real.

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

    Componente Nível de elevação padrão Variável CSS
    banner, botão, brinde 0 --ig-elevação-0
    emblema, botões de carrossel, entrada de pesquisa 1 --ig-elevação-1
    grupo de botões, botão contido, cartão, grade, interruptor 2 --ig-elevação-2
    barra de navegação, barra de lanches 4 --ig-elevação-4
    botão de ação flutuante, 6 --ig-elevação-6
    navegação inferior, chip fantasma, menu suspenso 8 --ig-elevação-8
    gaveta de navegação 16 --ig-elevação-16
    diálogo 24 --ig-elevação-24

    Como você pode ver na coluna CSS Variable, 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 é referenciar o nome da variável do nível desejado.

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

    Alterar a elevação em um tema de componente existente funciona de forma semelhante.

    [igxButton="contained"] {
  --resting-shadow: var(--ig-elevation-4);
  --hover-shadow: var(--ig-elevation-12);
  --focus-shadow: var(--ig-elevation-12);
}

    A documentação para cada tema de componente lista a elevação padrão usada em cada um de seus estados. Se a elevação não estiver listada, o componente não usa nenhum dos níveis de elevação predefinidos.

    Defining Elevations

    Atualizar as elevações padrão funciona de forma semelhante à forma como as cores da paleta são atualizadas. Você simplesmente precisa reatribuir a variável a um valor diferente. Com elevações, certifique-se de que o valor seja um box-shadow.

    Exemplo:

    /* styles.css */
: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 para um escopo específico apenas. Já vimos que o componente de botão usa o nível de elevação 2 para seu estado de repouso. O nível 2 também é usado pelos componentes de cartão e grade. Então, para alterar as sombras para todos os três, tudo o que você precisa fazer é:

    [igxButton="contained"],
igx-grid,
igx-card {
    --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

    Isso definirá--resting-shadow no botão e cartão contidos, e--grid-shadow na grade, para o valor atribuído a--ig-elevation-2;

    Elevações podem ser criadas e consumidas de uma forma mais poderosa usando Sass também. Confira os tópicos relacionados abaixo para saber mais.

    Additional Resources

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.