Descripción general del componente de 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 con material invertido y tarjetas apiladas.

Angular Card Example

A continuación, puede ver una muestra básica de una tarjeta de Ignite UI for Angular bien elaborada con secciones principales de tarjeta como imagen, título, subtítulo, contenido de la tarjeta principal, 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 al 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 el módulo o las directivas Ignite UI for Angular Card, puede empezar a utilizar el igx-card componente.

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 vídeo que queramos mostrar en la Angular Card, lo envolvemos dentro de las igx-card-media etiquetas. El igx-card-media nos permite dimensionar el contenido colocado dentro a través de los width atributos y height. En el ejemplo anterior, proporcionamos solo height, lo que dejaría el ancho 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) se presentan verticalmente. Esto es bueno cuando tenemos mucho espacio vertical. Digamos que queremos colocar todas las secciones de la tarjeta horizontalmente. Podemos usar el horizontal atributo de la tarjeta para establecer 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 puede crear una tarjeta semihorizontal, donde tenemos cada sección de la tarjeta colocada verticalmente, mientras que aparece igx-card-media 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 mencionado.

Puede colocar elementos en el área de acciones de la tarjeta, ya sea al principio o al final, mediante las igxStart directivas or 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>

Puede justificar los botones para que se coloquen en todo el eje, no en los extremos opuestos. Para hacer eso, use el layout atributo y establezca su valor en 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

Card Theme Property Map

Cambiar la $background propiedad actualiza automáticamente las siguientes propiedades dependientes:

Propiedad principal	Propiedad dependiente	Descripción
$background	$header-text-color	The text color of the card title.
	$subtitle-text-color	The text color of the card subtitle.
	$content-text-color	The text color of the card content.
	$actions-text-color	The text color of the card buttons.

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 proporciona solo algunos parámetros de estilo. Si solo especifica el $background parámetro, se elegirán automáticamente los colores de primer plano adecuados, ya sea blanco o negro, en función de lo que ofrezca un mejor contraste con el fondo.

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

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

Finalmente, incluya el tema personalizado en su aplicación:

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

En el ejemplo siguiente, puede ver cómo el uso del componente de tarjeta con variables CSS personalizadas le permite crear un diseño que se parece visualmente a la tarjeta utilizada en el sistema de Ant diseño.

Styling with Tailwind

You can style the card using our custom Tailwind utility classes. Make sure to set up Tailwind first.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

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

El archivo de utilidad incluye variantes de light ambos temas dark.

Usa light-* clases para el tema de la luz.
Usa dark-* clases para el tema oscuro.
Append the component name after the prefix, e.g., light-card, dark-card.

Una vez aplicadas, estas clases permiten cálculos de temas dinámicos. A partir de ahí, puede anular las variables CSS generadas usando arbitrary properties. Después de los dos puntos, proporcione cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

You can find the full list of properties in the card-theme. The syntax is as follows:

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

Note

El signo de exclamación (!) es necesario para garantizar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

At the end your card should look like this:

Summary

En este artículo cubrimos mucho terreno con el componente de la tarjeta. Primero, creamos una tarjeta muy simple con contenido de texto solamente. Luego agregó algunas imágenes para hacer la tarjeta un poco más atractiva. Utilizamos algunos componentes Ignite UI for Angular adicionales dentro de nuestra tarjeta, avatar, botones e íconos, para enriquecer la experiencia y agregar algunas funcionalidades. Y, por último, cambiamos el tema de la tarjeta estableciendo algunos colores de tema expuestos, creando paletas personalizadas y ampliando los esquemas. El componente de la tarjeta es capaz de mostrar más diseños diferentes que vale la pena explorar en la demostración de la tarjeta al comienzo 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.