Temas de componentes

    Os temas de componentes permitem que você altere os estilos de instâncias de componentes específicos substituindo o tema definido globalmente.

    Visão geral

    Antes de nos aprofundarmos em como você pode criar temas de nível de componente, vamos tirar alguns momentos para falar sobre como Ignite UI for Angular aborda a temática de componentes. Como queremos ser capazes de oferecer suporte a navegadores mais antigos, como o IE11, temos duas abordagens completamente diferentes para a temática de componentes.

    • A primeira abordagem é estilizar instâncias de componentes usando variáveis CSS. Ao usar variáveis CSS, ganhamos a capacidade de criar temas de componentes sem replicar seus estilos repetidamente. Além disso, essa abordagem nos permite modificar o valor das variáveis CSS em tempo de execução.
    • A segunda abordagem é criar um novo conjunto de regras CSS que sobrescrevam quaisquer regras CSS declaradas anteriormente para um componente específico. Essa abordagem é bem direta e é a única maneira de fornecermos suporte de tema sensato para navegadores mais antigos, embora não seja o ideal, pois adiciona muitas regras CSS adicionais ao tema CSS gerado.

    Veremos como essas abordagens funcionam na prática e como usar uma em vez da outra ao gerar temas em nível de componente.

    Creating Themes

    Há várias partes em um tema de componente:

    • A função de tema do componente- Uma função Sass que normaliza os argumentos passados e produz um tema a ser consumido por um mixin de componente.
    • O mixin de variáveis CSS- Um mixin Sass que consome um tema de componente e produz variáveis CSS usadas para estilizar um componente específico.
    • O mixin de componentes- Um mixin Sass que consome um tema de componente e produz regras CSS usadas para estilizar um componente específico.

    Digamos que você queira criar um novo tema de avatar global que tenha uma cor de fundo diferente daquela que definimos no tema padrão do avatar. Conforme mencionado na seção de visão geral, há 2 abordagens gerais para criar um tema de componente. Há ainda mais maneiras de organizar e definir o escopo dos seus temas de componente. A maneira mais direta de fazer isso é no mesmo arquivo em que você definiu seu tema global.

    Definindo um tema de avatar:

    // Some place after @include theme(...);

// Change the background of the avatar to purple.
$avatar-purple-theme: avatar-theme(
  $background: purple,
);

// Pass the css-vars to the `css-vars` mixin
@include css-vars($avatar-purple-theme);

    O código acima produz variáveis CSS para o componente igx-avatar. Essas novas variáveis CSS substituem as regras de avatar padrão. Da mesma forma, se você incluísse o mixin css-vars mais tarde no arquivo scss global, o mixin substituiria novamente quaisquer temas definidos anteriormente.

    Por exemplo:

    // ...
@include css-vars($avatar-purple-theme);

// Later
$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

@include css-vars($avatar-royalblue-theme);

    No código acima, o tema global de fato agora é $avatar-royalblue-theme, pois ele substitui quaisquer mixins css-vars incluídos anteriormente.

    Isso nos leva ao próximo ponto.

    Scoping Themes

    Como vimos no exemplo anterior, ao adicionar vários temas visando o mesmo componente no mesmo nível, o último mixin de tema tem precedência. Isso se deve à maneira como a cascata CSS funciona. Se você quiser ter dois ou mais temas visando o mesmo tipo de componente, você terá que escopo deles para um seletor. Por exemplo, podemos criar vários temas igx-avatar e escopo deles para seletores CSS específicos que podemos usar mais tarde em nossa marcação de componente.

    // ...
// CSS class selectors
.avatar-royalblue {
  @include css-vars($avatar-royalblue-theme);
}

.avatar-purple {
  @include css-vars($avatar-purple-theme);
}

    Em um modelo de componente:

    <div class="avatar-royalblue">
  <igx-avatar initials="AZ"></igx-avatar>
</div>

<div class="avatar-purple">
  <igx-avatar icon="home"></igx-avatar>
</div>

    View Encapsulation

    Até agora, exploramos maneiras de criar temas com escopo global e incluídos em um único arquivo Sass. No entanto, isso nem sempre é desejável e, em alguns casos, você desejará que o arquivo Sass seja vinculado a um componente específico. Nesses casos, temos que levar em consideração o View Encapsulation e, especificamente, como ele é emulado no Angular.

    A equipe Angular adotou 3 estratégias para View Encapsulation - Emulated(default), ShadowDom e None. Para saber mais sobre cada uma dessas estratégias, dê uma olhada na Angular Documentation. Daremos uma olhada mais de perto em como lidar com temas do Ignite UI for Angular que fazem parte dos componentes pai View Encapsulated.

    O que exatamente significa Emulated View Encapsulation, afinal? Esse tipo de View Encapsulation não tira vantagem da especificação Shadow DOM, em vez disso, ele emprega uma maneira de vincular estilos para um componente e seus filhos usando um identificador de atributo exclusivo aplicado no elemento host.

    Vamos dar uma olhada em um exemplo usando variáveis CSS. Vamos criar um tema de avatar que é vinculado a um componente pai específico.

    Aqui está nosso componente simples:

    import { Component, Input } from "@angular/core";

@Component({
  selector: "app-avatar",
  styleUrls: ["./app-avatar.component.scss"],
  template: `<igx-avatar [initials]="initials"></igx-avatar>`,
})
export class AvatarComponent extends Component {
  @Input() public initials = "AZ";
}

    E é assim que nossa folha de estilo Sass se parece:

    // app-avatar.component.scss

// Import the theming module
@use "igniteui-angular/theming" as *;

// !IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

:host {
  @include css-vars($avatar-royalblue-theme);
}

    Ao usar variáveis CSS, não precisamos usar o pseudo-seletor::ng-deep. Com o código acima, criamos variáveis CSS para o igx-avatar, que sempre terá royalblue como cor de fundo. O tema para nosso avatar personalizado não "vazará" para outras instâncias do componente igx-avatar, permanecendo encapsulado em nosso componente app-avatar personalizado.

    A instância acima também pode ser alcançada sem usar nenhum Sass. Tudo o que precisamos fazer é definir o valor da variável CSS--igx-avatar-background para a cor desejada:

    /* app-avatar.component.css */
:host {
  --igx-avatar-background: royalblue;
}

    API Overview

    Additional Resources

    Aprenda a configurar um tema global:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.