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
As elevações em 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 3box-shadow declarações. Nós permitimos que você gere novos conjuntos de elevações onde pode definir a cor das sombras. Além disso, expomos funções para recuperar um nível específico de elevação a partir do mapa de elevações. Expomos uma variável$elevations global que é usada entre os componentes por padrão. Se você não leu a documentação de variáveis CSS relacionada a Elevations, 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 sombras de caixa do mapa de elevações, você pode passar até dois argumentos para aelevation função - um mapa de elevação e o nível de elevação desejado. Ele retorna uma lista de 3 sombras de caixa para o nível em questão.
Se quiser recuperar a elevação do mapa padrão$elevations, 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árias misturas temáticas permitem que você passe por um mapa de elevações. Mais notavelmente, eletheme tem um parâmetro chamado$elevations que permite atualizar as elevações de 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 aelevation função retorna uma lista de sombras de caixa, você pode usar o valor de retorno dessa função para modificar apenas certas elevações nos seus temas componentes.
$card-theme: card-theme(
$resting-shadow: elevation(10)
);
@include css-vars($card-theme);
Você também pode passar sombras simples de caixas sem aproveitar aelevation função:
$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 siga as Diretrizes de Design de Materiais geradas pelaelevations função. Certifique-se de que seus mapas personalizados de elevação 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