Visão geral do componente de cartão Angular

    Angular Card representa um contêiner flexível que tem diferentes elementos como texto de título, descrições, estilos de imagem, botões de call to action, links e outros. Para representar um determinado cenário/conteúdo da melhor maneira possível, ele oferece várias opções de exibição, cabeçalhos, rodapés, bem como cores de fundo, animações e muito mais.

    Este componente leve Angular Card é usado para criar todos os tipos de cartões, alguns deles podem ser: cartões de visita, cartões de material flipping, cartões empilhados.

    Angular Card Example

    Abaixo você pode ver um exemplo básico de uma Ignite UI for Angular Card com seções principais do cartão, como imagem, título, subtítulo, conteúdo principal do cartão e contêiner para um botão.

    Getting Started with Ignite UI for Angular Card

    Para começar a usar o componente Ignite UI for Angular Card, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar oIgxCardModule arquivo interno do seu app.module.ts.

    // app.module.ts
...
import { IgxCardModule } from 'igniteui-angular';
// import { IgxCardModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxCardModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 você pode importarIgxCardComponent como uma dependência independente ou usar oIGX_CARD_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { IGX_CARD_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CARD_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-card>
        <igx-card-media height="196px">
            <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
        </igx-card-media>

        <igx-card-header>
            <h3 igxCardHeaderTitle>New York</h3>
            <h5 igxCardHeaderSubtitle>City in New York</h5>
        </igx-card-header>

        <igx-card-content>
            <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.</p>
        </igx-card-content>

        <igx-card-actions>
            <button igxButton igxRipple>Read More</button>
            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                <igx-icon>favorite</igx-icon>
            </button>
            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                <igx-icon>share</igx-icon>
            </button>
        </igx-card-actions>
    </igx-card>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_CARD_DIRECTIVES]
    /* or imports: [IgxCardComponent,
        IgxCardHeaderComponent,
        IgxCardMediaDirective,
        IgxCardContentDirective,
        IgxCardActionsComponent,
        IgxCardFooterDirective,
        IgxCardHeaderTitleDirective,
        IgxCardHeaderSubtitleDirective,
        IgxCardThumbnailDirective,
        IgxButtonDirective,
        IgxRippleDirective] */
})
export class HomeComponent {}

    Agora que você importou o módulo ou diretivas do Ignite UI for Angular Card, pode começar a usar oigx-card componente.

    Using the Angular Card Component

    Então, para representar o modelo do cartão de demonstração, podemos adicionar o seguinte código.

    <!--card.component.html>-->

<igx-card>
    <igx-card-media height="196px">
        <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
    </igx-card-media>

    <igx-card-header>
        <h3 igxCardHeaderTitle>New York</h3>
        <h5 igxCardHeaderSubtitle>City in New York</h5>
    </igx-card-header>

    <igx-card-content>
        <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.</p>
    </igx-card-content>

    <igx-card-actions>
        <button igxButton igxRipple>Read More</button>
        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>favorite</igx-icon>
        </button>
        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>share</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

    Você vai notar algumas coisas acima. Primeiro, quando queremos marcar um elemento como título de cabeçalho, como oh3 título, colocamos entre asigx-card-header tags e anexamos aigxCardHeaderTitle diretiva ao elemento. Por outro lado, se quiséssemos fazer outro elemento de cabeçalho asubtitle, anexaríamos oigxCardHeaderSubtitle a ele.

    Qualquer imagem ou vídeo que quisermos mostrar no Angular Card, nós envolvemos dentro dasigx-card-media tags. Issoigx-card-media nos permite dimensionar o conteúdo colocado dentro doswidth atributos e (eheight atributos). No exemplo acima, fornecemos apenasheight que deixaria a largura paraauto, permitindo que a imagem se estendesse por toda a superfície da carta, mantendo a altura definida.

    Você pode colocar qualquer coisa dentro dasigx-card-content etiquetas. Normalmente o texto vai para lá.

    Por fim, éigx-card-actions onde você coloca qualquer item de ação, como botões. Se você usar aigxButton diretiva em um elemento, ele será automaticamente posicionado corretamente de acordo com a especificação de design do material dentro da área.

    Media, Thumbs, and Avatars

    Se quiser mostrar uma imagem ou ícone no cabeçalho do cartão ao lado do título e da legenda, pode fazer isso usando aigxCardThumbnail diretiva.

    Tomando o cartão acima como exemplo, podemos editar o conteúdo doigx-card-header e adicionar umigxCardThumbnail recipiente para segurar um ícone:

    <igx-card-header>
    <div igxCardThumbnail>
        <igx-icon>place</igx-icon>
    </div>
    
    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

    O exemplo acima mostrará o ícone ao lado do título e do subtítulo no cabeçalho do cartão.

    Também detectamos automaticamente a presença ouigx-avatar​igx-card-media a colocação no cabeçalho do cartão. Elas vão aparecer como se fossem miniaturas de cartas. Então você pode fazer:

    <igx-card-header>
    <igx-avatar>
        <igx-icon>place</igx-icon>
    </igx-avatar>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

    ou, ainda, isto:

    <igx-card-header>
    <igx-card-media width="40px" height="40px">
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=50">
    </igx-card-media>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

    Outlined cards

    A carta tem umtype atributo que você pode definir para (defaultdefinido automaticamente se omitido) ououtlined. Ooutlined tipo remove quaisquer sombras do cartão, substituindo-as por uma borda fina para separar o cartão do fundo.

    Angular Card Horizontal Layout

    Por padrão, todas as seções do cartão (cabeçalho, conteúdo, mídia, ações) estão dispostas verticalmente. Isso é bom quando temos muito espaço vertical. Digamos que quisermos dispor todas as seções do cartão horizontalmente. Podemos usar ohorizontal atributo da carta para definir seu layout.

    Aqui está um exemplo de um cartão horizontal contornado:

    <igx-card type="outlined" [horizontal]="horizontal">
    <div class="h-sample-column">
        <igx-card-header>
            <h5 igxCardHeaderTitle>{{card.title}}</h5>
            <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
            <igx-card-media width="64px" height="64px">
                <img [src]="card.imageUrl">
            </igx-card-media>
        </igx-card-header>

        <igx-card-content>
            <p>{{card.content}}</p>
        </igx-card-content>
    </div>

    <igx-divider [vertical]="horizontal"></igx-divider>

    <igx-card-actions layout="justify">
        <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>{{icon}}</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

    Estamos usando a.h-sample-column classe para agrupar osigx-card-header eigx-card-content juntos, mantendo-os alinhados verticalmente, enquanto outras seções do cartão se alinham horizontalmente.

    Os estilos que essa.h-sample-column classe aplica são:

    .h-sample-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;

  igx-card-header {
      padding-bottom: 0;
  }
}

    Repare como os botões agoraigx-card-actions mudaram para umvertical layout. Eleigx-card-actions tem umainverse relação de layout com seu pai. Então, sempre que o atributohorizontal da carta for definido paratrue a propriedade de açõesvertical, etrue vice-versa.

    Você pode definir explicitamente overtical atributo da área de ações, assim sobrepondo esse comportamento padrão.

    <igx-card-actions layout="justify" [vertical]="false">
    <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true">
        <igx-icon>{{icon}}</igx-icon>
    </button>
</igx-card-actions>

    Se tudo correr bem, nosso cartão deverá ficar assim:

    Alternative layouts

    Você pode ser ainda mais criativo com o layout doigx-card.

    Abaixo está um exemplo mostrando como você pode criar uma carta semi-horizontal, onde cada seção da carta está disposta verticalmente, enquanto apareceigx-card-media ao lado das seções verticais da carta.

    <igx-card [horizontal]="horizontal">
    <div igxLayout igxLayoutDir="column" igxFlex igxFlexGrow="1">
        <igx-card-header>
            <igx-avatar [src]="card.avatarUrl"></igx-avatar>
            <h5 igxCardHeaderTitle>{{card.title}}</h5>
            <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
        </igx-card-header>

        <igx-card-content>
            <p>{{card.content}}</p>
        </igx-card-content>

        <igx-card-actions [vertical]="false">
            <button *ngFor="let button of card.buttons;" igxButton="flat" igxRipple>
                {{button}}
            </button>
        </igx-card-actions>
    </div>

    <igx-card-media width="96px">
        <img [src]="card.imageUrl">
    </igx-card-media>
</igx-card>

    Angular Card Actions

    A área de ações do Angular Card permite configurações adicionais ao que já mencionamos.

    Você pode posicionar elementos na área de ações da carta tanto no início quanto no final, usando asigxStart diretivas ouigxEnd.

    <igx-card-actions>
    <button igxIconButton="flat" igxStart>
        <igx-icon>drag_indicator</igx-icon>
    </button>
    <button igxIconButton="flat" igxEnd>
        <igx-icon>favorite</igx-icon>
    </button>
</igx-card-actions>

    Você pode justificar os botões para que fiquem dispostos ao longo de todo o eixo, e não nas extremidades opostas. Para isso, use olayout atributo e defina seu valor parajustify, como abaixo:

    <igx-card-actions layout="justify">
    <button igxButton>Button</button>

    <button igxIconButton="flat">
        <igx-icon>star</igx-icon>
    </button>
</igx-card-actions>

    Estilização

    Card Theme Property Map

    Alterar a$background propriedade atualiza automaticamente as seguintes propriedades dependentes:

    Propriedade primária Propriedade dependente Descrição
    $background $header-cor-texto A cor do texto do título do cartão.
    $subtitle-cor-texto A cor do texto do subtítulo do cartão.
    $content-cor-texto A cor do texto do conteúdo do cartão.
    $actions-text-color A cor do texto dos botões do cartão.

    Para começar a estilizar o cartão, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

    @use "igniteui-angular/theming" as *;

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende ocard-theme e fornece apenas alguns parâmetros de estilo. Se você especificar apenas o$background parâmetro, as cores apropriadas em primeiro plano serão escolhidas automaticamente, preto ou branco, dependendo de qual oferece melhor contraste com o fundo.

    $custom-card-theme: card-theme(
    $background: #011627,
    $subtitle-text-color: #ecaa53,
);

    Como visto, elecard-theme expõe alguns parâmetros úteis para o estilo básico de seus itens.

    Por fim, inclua o tema personalizado em seu aplicativo:

    @include css-vars($custom-card-theme);

    No exemplo abaixo, você pode ver como usar o componente card com variáveis CSS personalizadas permite criar um design que visualmente se assemelha ao cartão usado noAnt sistema de design.

    Styling with Tailwind

    Você pode usarcard nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-card,dark-card.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema do cartão. A sintaxe é a seguinte:

    <igx-card
class="!light-card
![--background:#193625]
![--subtitle-text-color:#ECAA53]"
elevated>
...
</igx-card>
    Note

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    No final, seu cartão deve ficar assim:

    Summary

    Neste artigo, cobrimos muito terreno com o componente de cartão. Primeiro, criamos um cartão muito simples com conteúdo de texto apenas. Em seguida, adicionamos algumas imagens para tornar o cartão um pouco mais atraente. Usamos alguns componentes adicionais Ignite UI for Angular dentro do nosso cartão, avatar, botões e ícones, para enriquecer a experiência e adicionar alguma funcionalidade. E, finalmente, mudamos o tema do cartão definindo algumas cores de tema expostas, criando paletas personalizadas e estendendo esquemas. O componente de cartão é capaz de exibir mais layouts diferentes que valem a pena explorar na Demonstração do Cartão no início deste artigo.

    API and Style References

    Para obter informações mais detalhadas sobre a API do cartão, consulte os seguintes links:

    Os seguintes estilos CSS integrados nos ajudaram a obter este layout de cartão:

    Componentes e/ou diretivas adicionais que foram usados:

    Styles:

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.