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 o IgxCardModule dentro do seu arquivo 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 {}
Como alternativa, a partir da 16.0.0, você pode importar o IgxCardComponent como uma dependência autônoma ou usar o token IGX_CARD_DIRECTIVES 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 Ignite UI for Angular Card ou as diretivas, você pode começar a usar o componente igx-card.
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ê notará algumas coisas acima. Primeiro, quando queremos marcar um elemento como um título de cabeçalho, como o título h3, nós o colocamos entre as tags igx-card-header e anexamos a diretiva igxCardHeaderTitle ao elemento. Por outro lado, se quiséssemos fazer de outro elemento de cabeçalho um subtitle, anexaríamos o igxCardHeaderSubtitle a ele.
Qualquer imagem ou vídeo que queremos mostrar no Angular Card, envolvemos dentro das tags igx-card-media. O igx-card-media nos permite dimensionar o conteúdo colocado dentro por meio dos atributos width e height. No exemplo acima, fornecemos apenas height, o que deixaria width em auto, permitindo assim que a imagem se estendesse por toda a superfície do card, mantendo a altura definida.
Você pode colocar qualquer coisa dentro das tags igx-card-content. Geralmente o texto vai lá.
Por fim, o igx-card-actions é onde você colocaria quaisquer itens acionáveis, como botões. Se você usar a diretiva igxButton em um elemento, ele será automaticamente colocado corretamente de acordo com a especificação do material design dentro da área.
Media, Thumbs, and Avatars
Se você quiser mostrar uma imagem ou ícone no cabeçalho do cartão ao lado do título e subtítulo, você pode fazer isso usando a diretiva igxCardThumbnail.
Tomando o cartão acima como exemplo, podemos editar o conteúdo do igx-card-header e adicionar um contêiner igxCardThumbnail para conter 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 de igx-avatar ou igx-card-media colocados no cabeçalho do cartão. Eles aparecerão como se fossem miniaturas de cartão. 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
O cartão tem um atributo type que você pode definir como default (definido automaticamente se omitido) ou outlined. O tipo outlined 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) são dispostas verticalmente. Isso é bom quando temos muito espaço vertical. Digamos que queremos dispor todas as seções do cartão horizontalmente. Podemos usar o atributo horizontal do cartão 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 classe.h-sample-column para agrupar o igx-card-header e igx-card-content, mantendo-os alinhados verticalmente, enquanto outras seções do cartão se alinham horizontalmente.
Os estilos que a classe.h-sample-column 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;
}
}
Observe como os botões no igx-card-actions agora mudaram para um layout vertical. O igx-card-actions tem uma relação de layout inverse com seu pai. Então, sempre que o atributo horizontal do card for definido como true a propriedade vertical actions será definida como true e vice-versa.
Você pode definir explicitamente o atributo vertical da área de ações, substituindo assim 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 do igx-card.
Abaixo está um exemplo mostrando como você pode criar um cartão semi-horizontal, onde temos cada seção do cartão disposta verticalmente, enquanto o igx-card-media aparece ao lado das seções verticais do cartão.
<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 do cartão no início ou no fim usando as diretivas igxStart ou igxEnd.
<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 eles fiquem dispostos em todo o eixo, não nas extremidades opostas. Para fazer isso, use o atributo layout e defina seu valor para justify, 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
Para começar a estilizar o cartão, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:
@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 o card-theme e aceita alguns parâmetros que estilizam os itens do cartão:
$colorful-card: card-theme(
$background: #011627,
$header-text-color: #fefefe,
$subtitle-text-color: #ecaa53,
$content-text-color: #fefefe
);
Como visto, o card-theme expõe alguns parâmetros úteis para o estilo básico de seus itens.
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($colorful-card);
Angular Card Demo
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.
GitHub