Tema de bootstrap

O motor de temas Ignite UI for Angular oferece a oportunidade de ser usado em conjunto com outras bibliotecas de componentes, como a popularNG Bootstrap baseada na marcação e CSS do Bootstrap.

Visão geral

O Ignite UI for Angular é um conjunto completo de Widgets de UI baseados em Material, kits de Componentes e Figma UI e diretrizes de suporte para Angular que permite aos desenvolvedores criar aplicativos modernos de alto desempenho. Nosso motor de tematização é fácil de usar e permite granularidade de tematização em diferentes níveis, desde um único componente, múltiplos componentes ou toda a suíte. Portanto, alguns usuários querem aproveitá-lo não apenas com Ignite UI componentes, mas também com outras bibliotecas. Neste artigo, vamos analisar o uso de Ignite UI junto com os componentes Ng Bootstrap.

Demo

Basic Usage

Add NG Bootstrap

Se você estiver usando Angular CLI e tiver um projeto Angular existente, poderá instalar o NG Bootstrap com o comando abaixo:

ng add @ng-bootstrap/ng-bootstrap

Após a instalação, você precisa importar o módulo principal do NG Bootstrap para o seu arquivo app.module.ts:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [
        ...,
        NgbModule,
        ...
    ]
)}

Neste ponto, sua aplicação está pronta para usar os componentes NG Bootstrap. Você pode encontrar mais informações sobre como usar a biblioteca Bootstrap na biblioteca delesofficial documentation.

Add Ignite UI for Angular

Para instalar o pacote Ignite UI for Angular junto com todas as suas dependências, importações de fontes e referências de estilos, execute o seguinte comando no seu projeto:

ng add igniteui-angular

Em seguida, você pode usar os componentes Ignite UI importando seus respectivos módulos no seu arquivo app.module.ts:

// manually addition of the Igx Avatar component 
import { IgxAvatarModule } from 'igniteui-angular/avatar';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...,
        IgxAvatarModule,
        ...
    ]
)}

Siga nossoGetting Started tópico para uma introdução completa sobre como usar Ignite UI for Angular em projetos existentes. Mais informações sobre como importar e usar cada um de nossos componentes, juntamente com exemplos guiados, podem ser encontradas na documentação do componente.

Components

Vamos ver como nosso sample demo é feito. É uma mistura de componentes Ignite UI e NG Bootstrap, estilizados para se encaixar bem em uma única aplicação. A navegação em nosso exemplo é criada usando o bootstrapnavbar junto comigx-buttons eigx-avatar. Odropdown botão sob o Campanhas também foi retirado da biblioteca bootstrap. Abaixo da navegação, estamos usando oigx-card componente para exibir algumas estatísticas. Dentro dos cartões, colocamos vários itens -igx-avatarseigx-icons também bootstrapbuttons engb-ratings.

Clicando nosMore botões, você verá oigx-dialog:

Em seguida, adicionamos umangb-accordion informação mostrando sobre cartões de crédito. Dentro do conteúdo, há umigx-list eigx-button.

Por fim, inserimos um Ignite UI for Angularicon button no canto superior direito, que muda o tema de todo o app:

Estilização

Para começar a usar componentes de estilização usando o motor de temas Ignite UI, crie um arquivo scss com o nome de sua escolha, que será o arquivo base do seu tema global. Vamos chamar este arquivo_variables.scss. Em seguida, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

// _variables.scss
@use "igniteui-angular/theming" as *;

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

Paletas

A biblioteca Bootstrap utiliza um mapa Sass chamado$theme-colors para fornecer uma paleta composta por oito cores:

$theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
);

Ignite UI for Angular função de 'palettes gera um mapa de paleta de cores incluindoprimary,secondary,gray,info,success,warn, eerror cores e suas variantes de cor. Nossa paleta bootstrap pré-definida, por sua vez, consiste em sete cores:

$bootstrap-palette: palette(
    $primary: #0d6efd,
    $secondary: #6c757d,
    $info: #0dcaf0,
    $success: #198754,
    $warn: #ffc107,
    $error: #dc3545,
    $surface: #f8f9fa
);

Como você pode ver, a maioria das cores na paleta Bootstrap se sobrepõem às cores definidas na paleta Bootstrap do Ignite UI for Angular. Portanto, podemos simplesmente mapear as cores do tema Bootstrap para nossas cores claras ou escuras da paleta Bootstrap.

Primeiro, vamos definir variáveis Sass que extraem valores do$light-bootstrap-palette:

// Colors from the Ignite UI light bootstrap color palette
$light-primary: color($light-bootstrap-palette, "primary");
$light-secondary: color($light-bootstrap-palette, "secondary");
$light-success: color($light-bootstrap-palette, "success");
$light-info: color($light-bootstrap-palette, "info");
$light-warning: color($light-bootstrap-palette, "warn");
$light-danger: color($light-bootstrap-palette, "error");

Depois disso, criaremos uma nova paleta de cores que será usada para o modo escuro da amostra:

// Defining custom color palette
$custom-dark-palette: palette(
    $primary: #ecaa53,
    $secondary: #011627,
    $gray: #fff,
    $surface: #222
);

// Creating Sass variables for primary and secondary colors
$dark-primary: color($custom-dark-palette, "primary");
$dark-secondary: color($custom-dark-palette, "secondary");

Note

Visite nossapalettes with Sass seção para descobrir mais sobre as paletas fornecidas pela Ignite UI for Angular e aprender como criar uma nova.

Themes

Para alternar entrelight um modo,dark estamos adicionando uma classe personalizada aohost elemento que será alterada ao clicar no botão. No nosso arquivo de folha de estilo, vamos incluir diferentes paletas de cores com escopo para cada classe.

Modo claro

Ignite UI for Angular vem com temas pré-definidos inspirados na biblioteca Bootstrap 4. Para usá-los, primeiro, você precisa incluir nossocore mixin e depois nosso tema mixin embutido -bootstrap-light-theme. Também faremos uso da nossa paleta bootstrap pré-definida -$light-bootstrap-palette.

A cor de fundo da nossa aplicação precisa ser definida explicitamente no elemento host. Na nossa amostra, queremos usar asurface cor da paleta passada.

Neste ponto, precisamos modificar o mapa Bootstrap$theme-colors com as variáveis Sass que criamos anteriormente:

// Make sure you always include thecore mixin first
@include core();

:host {
    &.light {
        // The background color of the application in light mode
        background: color($light-bootstrap-palette, 'surface');

        ::ng-deep {
            // Applying the igx predefined light bootstrap palette and theme
            @include bootstrap-light-theme($light-bootstrap-palette);

            $theme-colors: (
                "primary": $light-primary,
                "secondary": $light-secondary,
                "success": $light-success,
                "info": $light-info,
                "warning": $light-warning,
                "danger": $light-danger
            );
        }
    }
}

Aslight cores edark do$theme-colors mapa, que não têm valores correspondentes nas paletas Ignite UI, também podem ser substituídas por valores a nosso critério. Por exemplo:

$custom-light: color($light-bootstrap-palette, "gray", 100);
$custom-dark: color($light-bootstrap-palette, "gray", 800);

:host {
    &.light {
        ::ng-deep {
            $theme-colors: (
                "light": $custom-light,
                "dark": $custom-dark,
            );
        }
    }
}

Modo escuro

Para nossa variante sombria, vamos usar nossa recém-criada$custom-dark-palette. Temos que incluí-lo nos estilos dedark classe e também modificar o$theme-colors mapa com os novos valores.

Todos os componentes no Ignite UI for Angular usam cores da paleta passada, portanto, eles se encaixam bem no modo escuro sem quaisquer ajustes adicionais. No entanto, temos que fazer mais algumas mudanças de estilo para os componentes ng-bootstrap:

:host {
    &.dark {
        // The background color of the application in dark mode
        background: color($custom-dark-palette, 'surface');

        ::ng-deep {
            // Applying our custom dark palette 
            @include bootstrap-dark-theme($custom-dark-palette);

            // Overriding bootstrap button colors with colors from the custom dark palette
            .igx-card-actions .btn-primary {
                background-color: $dark-primary;
                border-color: $dark-primary;

                &:hover {
                    background-color: color($custom-dark-palette, 'primary', 600);
                }
            }

            // Overriding ngb-accordion colors with colors from the custom dark palette
            .accordion {
                .card-header {
                    background-color: color($custom-dark-palette, 'gray', 200);
                    color: color($custom-dark-palette, 'gray', 900);
                }

                .card {
                    background-color: color($custom-dark-palette, 'surface');
                    border-color: color($custom-dark-palette, 'gray', 300);
                }
            }

            // Overriding bootstrap dropdown colors with colors from the custom dark palette
            .dropdown .dropdown-menu {
                background-color: color($custom-dark-palette, 'surface');
                border-color: color($custom-dark-palette, 'gray', 300);

                .dropdown-item {
                    color: color($custom-dark-palette, 'gray', 800);

                    &:hover {
                        background-color: color($custom-dark-palette, 'gray', 200);
                    }
                }
            }
            
            // Modifying the bootstrap color map
            $theme-colors: (
                "primary": $dark-primary,
                "secondary": $dark-secondary
            );
        }
    }
}

Por fim, precisamos importar a biblioteca Bootstrap -sempre importe-a no final!

:host {
    ::ng-deep {
        // Importing Bootstrap .scss file
        // Make sure you always import it last
        @import "~bootstrap/scss/bootstrap";
    }
}

Quando terminarmos de modificar o$theme-colors mapa, os componentes bootstrap já usarão as cores do igx$light-bootstrap-palette para o modo claro e$custom-dark-palette para o escuro.

Warning

Certifique-se de colocar o código acima dentro do::ng-deep seletor nopenetrate​Emulated ViewEncapsulation.

Generate class

O bootstrapnavbar usa classes CSS como cor de fundo. Na nossa amostra, queremos que essa cor mude de acordo com o tema selecionado, por isso vamos usar ocolor-classes mixin. Ele gera nomes de classes CSS para todas as cores de uma determinada propriedade e paleta de cores, com prefixo e sufixo opcionais associados ao nome da classe. Para a demo, vamos incluir o mixin duas vezes – uma vez para o modo claro com o respectivo$light-bootstrap-palette valor como primeiro valor e outra vez para o modo escuro com o$custom-dark-palette:

:host {
    &.light {
        @include color-classes(
            $palette: $light-bootstrap-palette,
            $prop: 'background',
            $prefix: 'bg'
        );
    }

    &.dark {
        @include color-classes(
            $palette: $custom-dark-palette,
            $prop: 'background',
            $prefix: 'bg'
        );
    }
}

Depois, adicione uma classe CSS ao seu componente da barra de navegação seguindo o padrão "bg - cor da paleta - variante de cor". No nosso aplicativo de exemplo, estamos usandobg-gray-200.

Tipografia

Ignite UI for Angular expõe quatro escalas de tipos padrão para cada um de seus temas, que podem ser usadas dentro dotypography mixin para definir os estilos tipográficos globais de uma aplicação. No nosso exemplo, vamos aplicar o bootstrap pré-definidotypeface etype-scale você pode criar modelos personalizados se quiser.

:host {
    @include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale);
}

API References

• Paleta Light Bootstrap
• Paleta Bootstrap escura
• Tema Light Bootstrap
• Tema Dark Bootstrap
• Função de paleta
• Tipografia Mixin

Tópicos relacionados:

• Paletas
• Temas de componentes
• Tipografia
• Componente Avatar
• Componente de botão
• Componente de diálogo
• Componente de ícone
• Componente de lista

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub