Elevações
Elevações são usadas para estabelecer e manter limites funcionais entre árvores do Document Object Model para permitir melhor encapsulamento funcional. Você pode criar conjuntos de elevações usando nossa biblioteca de temas Sass.
Visão geral
Elevações no Ignite UI for Angular são declaradas como um mapa de 25 elementos. Cada elemento é um par chave-valor onde a chave é o nome do nível de elevação (0..24) e o valor é uma lista de 3 declarações box-shadow. Permitimos que você gere novos conjuntos de elevações onde você pode definir a cor das sombras. Além disso, expomos funções para recuperar um nível de elevação específico do mapa de elevações. Expomos uma variável global $elevations que é usada em componentes por padrão. Se você não leu a documentação de variáveis CSS relacionada a Elevações, sugerimos que faça isso antes de continuar lendo.
Usage
A seção a seguir demonstra como criar e recuperar elevações personalizadas.
Configuring Elevations
Para alterar as cores usadas pelas predefinições de elevação padrão, você precisa configurar o módulo de predefinições de elevação.
// Define the 3 elevation colors
@use 'igniteui-theming/sass/elevations/presets' as * with(
$color-1: rgb(153, 191, 170), // Umbra
$color-2: rgb(92, 134, 141), // Penumbra
$color-3: rgb(92, 61, 70) // Ambient
);
@include elevations($material-elevations);
Retrieving Elevations
Para recuperar um conjunto de box-shadows do mapa de elevações, você pode passar até dois argumentos para a função elevation- um mapa de elevação e o nível de elevação desejado. Ele retorna uma lista de 3 box shadows para o nível fornecido.
Se você quiser recuperar a elevação do mapa padrão $elevations, você pode omitir o primeiro argumento.
// Returns elevation 1 shadows
$elevation-1: elevation(1);
// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
Passing Elevations to Themes
Vários mixins de tema permitem que você passe um mapa de elevações. Mais notavelmente, o theme tem um parâmetro chamado $elevations que permite que você atualize as elevações para todos os temas componentes.
Forçar todos os temas de componentes a usar suas elevações personalizadas:
@include theme(
//...
$elevations: $my-elevations
);
Além disso, você pode dizer ao tema para ignorar/não usar elevações completamente:
@include theme(
//...
$elevations: $my-elevations,
$elevation: false // disables all elevations
);
Como a função elevation retorna uma lista de sombras de caixa, você pode usar o valor de retorno dessa função para modificar apenas determinadas elevações nos temas dos seus componentes.
$card-theme: card-theme(
$resting-shadow: elevation(10)
);
@include css-vars($card-theme);
Você também pode passar sombras de caixa simples sem aproveitar a função elevation:
$card-theme: card-theme(
$resting-shadow: 0 10px 10px 10px #666
);
.my-card {
@include css-vars($card-theme);
}
Custom Elevations
É possível criar um mapa de elevações que não esteja de acordo com as Diretrizes de Material Design, conforme gerado pela função elevations. Certifique-se de que seus mapas de elevação personalizados contenham pelo menos 25 níveis de elevação. Aqui está a assinatura do mapa de elevações que nossos temas esperam construir corretamente:
// Omitted levels 2 through 23 for brevity
$elevations: (
0: box-shadow(...),
1: box-shadow(...),
...
24: box-shadow(...)
);
Elevation Schema Declarations
Os níveis de elevação também são usados em declarações de esquemas temáticos. Mais sobre isso na seção Schema da documentação.
API References
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub