Descripción general de los componentes de la tarjeta Angular

Angular Card representa un contenedor flexible que tiene diferentes elementos como texto de título, descripciones, estilos de imagen, botones de llamada a la acción, enlaces y otros. Para representar un escenario/contenido determinado de la mejor manera posible, ofrece varias opciones de visualización, encabezados, pies de página, así como colores de fondo, animaciones y más.

Este componente liviano Angular Card se utiliza para crear todo tipo de tarjetas, algunas de ellas pueden ser: tarjetas de presentación, tarjetas volteadas de material, tarjetas apiladas.

Angular Card Example

A continuación puede ver un ejemplo básico de una Ignite UI for Angular Card con secciones de tarjeta principal como imagen, título, subtítulo, contenido de tarjeta principal y contenedor para un botón.

Getting Started with Ignite UI for Angular Card

Para comenzar con el componente Ignite UI for Angular Card, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxCardModule dentro de su archivo 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, a partir de 16.0.0, puede importar IgxCardComponent como una dependencia independiente o usar el token IGX_CARD_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// 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 {}

Ahora que ha importado la Ignite UI for Angular Card, puede comenzar a usar el componente igx-card.

Using the Angular Card Component

Luego, para representar la plantilla de la tarjeta de demostración, podemos agregar el siguiente 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>

Notarás algunas cosas arriba. Primero, cuando queremos etiquetar un elemento como título de encabezado, como el encabezado h3, lo colocamos entre las etiquetas igx-card-header y adjuntamos la directiva igxCardHeaderTitle al elemento. Por el contrario, si quisiéramos convertir otro elemento de encabezado en un subtitle, le adjuntaríamos el igxCardHeaderSubtitle.

Cualquier imagen o video que queramos mostrar en Angular Card, lo envolvemos dentro de las etiquetas igx-card-media. igx-card-media nos permite dimensionar el contenido colocado en su interior mediante los atributos width y height. En el ejemplo anterior proporcionamos solo height, lo que dejaría el ancho en auto, permitiendo así que la imagen se extienda por toda la superficie de la tarjeta, manteniendo la altura establecida.

Puedes colocar cualquier cosa dentro de las etiquetas igx-card-content. Normalmente el texto va ahí.

Finalmente, igx-card-actions es donde colocarías los elementos procesables, como botones. Si usa la directiva igxButton en un elemento, automáticamente se colocará correctamente de acuerdo con las especificaciones de diseño del material dentro del área.

Media, Thumbs, and Avatars

Si desea mostrar una imagen o icono en el encabezado de la tarjeta junto al título y subtítulo, puede hacerlo utilizando la directiva igxCardThumbnail.

Tomando la tarjeta anterior como ejemplo, podemos editar el contenido del igx-card-header y agregar un contenedor igxCardThumbnail para contener un ícono:

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

El ejemplo anterior mostrará el ícono junto al título y subtítulo en el encabezado de la tarjeta.

También detectamos automáticamente la presencia de igx-avatar o igx-card-media colocado en el encabezado de la tarjeta. Aparecerán como si fueran miniaturas de tarjetas. Entonces puedes hacer:

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

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

o incluso esto:

<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

La tarjeta tiene un atributo type que puede establecer como default (establecido automáticamente si se omite) o outlined. El tipo outlined elimina las sombras de la tarjeta y las reemplaza con un borde delgado para separar la tarjeta del fondo.

Angular Card Horizontal Layout

De forma predeterminada, todas las secciones de la tarjeta (encabezado, contenido, medios, acciones) están dispuestas verticalmente. Esto es bueno cuando tenemos mucho espacio vertical. Digamos que queremos disponer todas las secciones de la tarjeta de forma horizontal. Podemos usar el atributo horizontal de la tarjeta para configurar su diseño.

A continuación se muestra un ejemplo de una tarjeta horizontal delineada:

<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 la clase.h-sample-column para agrupar el igx-card-header y igx-card-content, manteniéndolos alineados verticalmente, mientras que otras secciones de la tarjeta se alinean horizontalmente.

Los estilos que aplica la clase.h-sample-column son:

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

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

Observe cómo los botones en igx-card-actions ahora han cambiado a un diseño vertical. igx-card-actions tiene una relación de diseño inverse con su padre. Entonces, siempre que el atributo horizontal de la tarjeta se establezca en true, la propiedad vertical de las acciones se establecerá en true y viceversa.

Puede establecer explícitamente el atributo vertical del área de acciones, anulando así este comportamiento predeterminado.

<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>

Si todo ha ido bien nuestra tarjeta debería quedar así:

Alternative layouts

Puedes ser aún más creativo con el diseño de la igx-card.

A continuación se muestra un ejemplo que muestra cómo se puede crear una tarjeta semihorizontal, donde tenemos cada sección de la tarjeta dispuesta verticalmente, mientras que igx-card-media aparece junto a las secciones verticales de la tarjeta.

<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

El área de acciones Angular Card permite una configuración adicional a lo que ya hemos comentado.

Puede invertir el orden de los botones planos y los íconos de los botones usando el atributo reverse.

<igx-card-actions [reverse]="true">
    <button igxButton>Button</button>

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

Ahora los botones de iconos aparecerán antes de los botones de texto de estilo plano.

También puedes justificar los botones para que queden dispuestos a lo largo de todo el eje, no en los extremos opuestos. Para hacer eso, use el atributo layout y establezca su valor para justify, como se muestra a continuación:

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

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

Estilismo

Para comenzar a diseñar la tarjeta, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

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

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el card-theme y acepta algunos parámetros que dan estilo a los elementos de la tarjeta:

$colorful-card: card-theme(
    $background: #011627,
    $header-text-color: #FEFEFE,
    $subtitle-text-color: #ECAA53,
    $content-text-color: #FEFEFE
);

Como se ve, el card-theme expone algunos parámetros útiles para el estilo básico de sus elementos.

Including themes

El último paso es incluir el tema del componente en nuestra aplicación.

Si $legacy-support está configurado en true, incluya el tema del componente así:

 @include card($colorful-card);

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

:host {
     ::ng-deep {
        @include card($colorful-card);
    }
}

Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

@include css-vars($colorful-card);

Note

Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

:host {
    @include css-vars($colorful-card);
}

Angular Card Demo

Summary

En este artículo cubrimos mucho terreno con el componente de la tarjeta. Primero, creamos una tarjeta muy simple con contenido únicamente de texto. Luego agregué algunas imágenes para hacer la tarjeta un poco más atractiva. Usamos algunos componentes adicionales Ignite UI for Angular dentro de nuestra tarjeta, avatar, botones e íconos, para enriquecer la experiencia y agregar algunas funciones. Y finalmente, cambiamos el tema de la tarjeta estableciendo algunos colores de tema expuestos, creando paletas personalizadas y ampliando esquemas. El componente de tarjeta es capaz de mostrar más diseños diferentes que vale la pena explorar en la demostración de tarjeta al principio de este artículo.

API and Style References

Para obtener información más detallada sobre la API de la tarjeta, consulte los siguientes enlaces:

IgxCardComponent API

Los siguientes estilos CSS integrados nos ayudaron a lograr este diseño de tarjeta:

IgxCardComponent Styles

Componentes y/o directivas adicionales que se utilizaron:

Styles:

Theming Dependencies

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Descripción general de los componentes de la tarjeta Angular

Angular Card Example

Getting Started with Ignite UI for Angular Card

Using the Angular Card Component

Media, Thumbs, and Avatars

Outlined cards

Angular Card Horizontal Layout

Alternative layouts

Angular Card Actions

Estilismo

Including themes

Note

Note

Angular Card Demo

Summary

API and Style References

Theming Dependencies

Additional Resources

Tematización