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 oigx-avatar componente. Essas novas variáveis CSS sobrescrevem as regras padrão do avatar. Da mesma forma, se você incluircss-vars o mixin mais adiante no arquivo globalscss, o mixin novamente sobrescreverá quaisquer temas previamente definidos.

    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 é o$avatar-royalblue-theme pois ele sobrescrive quaisquer mixins previamente incluídoscss-vars.

    Isso nos leva ao próximo ponto.

    Scoping Themes

    Como vimos no exemplo anterior, ao adicionar múltiplos temas que têm como alvo o mesmo componente no mesmo nível, a última mistura de temas tem prioridade. Isso se deve à forma como a cascata CSS funciona. Se você quiser ter dois ou mais temas direcionados ao mesmo tipo de componente, terá que escopá-los para um seletor. Por exemplo, podemos criar múltiplosigx-avatar temas e escopá-los para seletores CSS específicos que poderemos usar depois na marcação de componentes.

    // ...
// 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 significaEmulated Encapsulamento de Visualização, afinal? Esse tipo de Encapsulamento de Visualização não aproveita a especificação Shadow DOM, em vez disso emprega uma forma de vincular estilos para um componente e seus filhos usando um identificador de atributo único aplicado ao 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::ng-deep pseudo-seletor. Com o código acima, criamos variáveis CSS para oigx-avatar, que sempre terãoroyalblue como cor de fundo. O tema do nosso avatar personalizado não 'vaza' para outrasigx-avatar instâncias de componentes, permanecendo assim encapsulado dentro do nosso componente personalizadoapp-avatar.

    A instância acima também poderia ser alcançada sem usar nenhum Sass. Tudo o que precisamos fazer é definir o valor da--igx-avatar-background variável CSS 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.