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 elIgxCardModule archivo interior de tu 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 puedes importarlosIgxCardComponent como una dependencia independiente, o usar elIGX_CARD_DIRECTIVES token 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 tienes importado el módulo o las directivas de Ignite UI for Angular Card, puedes empezar a usar eligx-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 elh3 encabezado, lo colocamos entre lasigx-card-header etiquetas y le asignamos laigxCardHeaderTitle directiva al elemento. Por el contrario, si quisiéramos hacer otro elemento de cabecera asubtitle, le añadiríamos eligxCardHeaderSubtitle elemento.

    Cualquier imagen o vídeo que queramos mostrar en la Angular Card, lo envolvemos dentro de lasigx-card-media etiquetas. Estoigx-card-media nos permite dimensionar el contenido colocado dentro mediante loswidth atributos yheight. En el ejemplo anterior proporcionamos soloheight que dejaría el ancho tambiénauto, permitiendo así que la imagen se estira por toda la superficie de la carta, manteniendo la altura establecida.

    Puedes colocar cualquier cosa dentro de lasigx-card-content etiquetas. Normalmente el texto va allí.

    Por último,igx-card-actions es donde colocarías cualquier objeto de acción, como botones. Si usas laigxButton directiva en un elemento, se colocará automáticamente correctamente según la especificación del diseño del material dentro del área.

    Media, Thumbs, and Avatars

    Si quieres mostrar una imagen o icono en la cabecera de la tarjeta junto al título y el subtítulo, puedes hacerlo usando laigxCardThumbnail directiva.

    Tomando la carta anterior como ejemplo, podemos editar el contenido de yigx-card-header añadir unigxCardThumbnail contenedor para albergar un icono:

    <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 oigx-avatar​igx-card-media la colocación en la cabecera de la carta. Aparecerán como si fueran miniaturas de cartas. Así que 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 carta tiene untype atributo que puedes configurar como (defaultautomáticamente si se omite), ooutlined. Eloutlined tipo elimina cualquier sombra de la tarjeta, sustituyéndola por un borde fino para separar la carta del fondo.

    Angular Card Horizontal Layout

    Por defecto, todas las secciones de la tarjeta (encabezado, contenido, medios, acciones) están dispuestas verticalmente. Esto es agradable cuando tenemos mucho espacio vertical. Supongamos que quisiéramos colocar todas las secciones de la tarjeta horizontalmente. Podemos usar elhorizontal atributo de la carta para establecer su disposición.

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

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

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

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

    Fíjate cómo los botonesigx-card-actions ahora han cambiado a unvertical diseño. Tieneigx-card-actions unainverse relación de distribución con su progenitor. Así que cada vez que el atributo de lahorizontal carta esté configurado entrue la propiedadvertical de accionestrue, y viceversa.

    Puedes establecer explícitamente elvertical atributo del área de acciones, anulando así este comportamiento por defecto.

    <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 laigx-card.

    A continuación hay un ejemplo que muestra cómo puedes crear una carta semihorizontal, donde cada sección de la carta está dispuesta verticalmente, mientras queigx-card-media aparece junto a las secciones verticales de la 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

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

    Puedes posicionar elementos en el área de acciones de la carta tanto al principio como al final usando lasigxStart directivas oigxEnd.

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

    Puedes justificar los botones para que estén distribuidos a lo largo de todo el eje, no en extremos opuestos. Para ello, usa ellayout atributo y establece su valor ajustify, como se indica 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 El color del texto del título de la carta.
    $subtitle-text-color El color del texto del subtítulo de la tarjeta.
    $content-text-color El color del texto del contenido de la carta.
    $actions-text-color El color del texto de los botones de la carta.

    Para empezar a estilizar la tarjeta, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

    @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 sencillo, creamos un nuevo tema que extiende elcard-theme y proporciona solo unos pocos parámetros de estilo. Si solo especificas el$background parámetro, se elegirán automáticamente los colores apropiados del primer plano, ya sea negro o blanco, según cuál ofrezca mejor contraste con el fondo.

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

    Como se ha visto, exponecard-theme 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 la muestra siguiente, puedes ver cómo usar el componente de tarjeta con variables CSS personalizadas te permite crear un diseño que visualmente se asemeja a la tarjeta utilizada en elAnt sistema de diseño.

    Styling with Tailwind

    Puedes decorarloscard usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

    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 tantolight comodark de tema.

    • Usalight-* clases para el tema ligero.
    • Usadark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, ,light-card,dark-card.

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

    Puedes encontrar la lista completa de propiedades en el tema de la carta. La sintaxis es la siguiente:

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

    El signo de exclamación(!) es necesario para asegurar 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.

    Al final tu tarjeta debería verse así:

    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:

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

    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.