Resumen de la tarjeta Web Components

    La tarjeta Ignite UI for Web Components muestra texto, imágenes, iconos y botones en una presentación visualmente rica que puede servir como punto de entrada a información más detallada. Las tarjetas se pueden utilizar para crear un panel de control multimedia.

    Web Components Card Example

    Usage

    Las tarjetas le permiten mostrar fácilmente contenido compuesto por diferentes tipos de objetos u objetos similares cuyo tamaño y acciones admitidas pueden variar.

    Empezando

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcCardComponent } from 'igniteui-webcomponents';

defineComponents(IgcCardComponent );

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    Luego, para representar la plantilla de la tarjeta de demostración, podemos agregar el siguiente código:

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

    <igc-card-header>
        <h3 slot="title">New York</h3>
        <h5 slot="subtitle">City in New York</h5>
    </igc-card-header>

    <igc-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>
    </igc-card-content>

    <igc-card-actions>
        <igc-button slot="start">
            <igc-ripple></igc-ripple>
            Read more
        </igc-button>
        <div slot="end">
            <igc-icon-button name="twitter" style="margin-right: 10px;">
                <igc-ripple></igc-ripple>
            </igc-icon-button>
            <igc-icon-button name="facebook">
                <igc-ripple></igc-ripple>
            </igc-icon-button>
        </div>
    </igc-card-actions>
</igc-card>

    You will notice a few things above. First, when we want to tag an element as a header title, like the h3 heading, we place it between the IgcCardHeaderComponent tags and set its slot name to title. Conversely, if we wanted to make another heading element a subtitle we would name its slot subtitle.

    Any image or video we want to show in the card, we wrap inside the IgcCardMediaComponent tags. The IgcCardMediaComponent allows us to size the content placed inside so that it maintains its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

    You can place anything inside the IgcCardContentComponent tags. Usually text goes there.

    Finally, the IgcCardActionsComponent is where you'd place any actionable items, like buttons.

    Media, Thumbs, and Avatars

    If you want to show an image or icon in the card header next to the title and subtitle, you can do it by assigning the element's slot property to thumbnail.

    Taking the card above as an example, we can edit the contents of the IgcCardHeaderComponent and add an avatar with slot="thumbnail":

    <igc-card-header>
    <igc-avatar slot="thumbnail" src="path/to/image" initials="TS"></igc-avatar>

    <h3 slot="title">Title</h3>
    <h5 slot="subtitle">Subtitle</h5>
</igc-card-header>

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

    Outlined cards

    The card has an outlined attribute which, if set, removes any shadows from the card, replacing them with a thin border to separate the card from the background.

    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 las secciones de la tarjeta de forma horizontal. Podemos lograr dicho diseño con un poco de CSS simple.

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

    <igc-card outlined>
    <div class="card-horizontal">
        <div>
            <igc-card-header>
                <img src="ROZES-Under-the-Grave.jpg" slot="thumbnail">
                <h5 slot="title">Rozes</h5>
                <h5 slot="subtitle">Under the Grave (2016)</h5>
            </igc-card-header>
            <igc-card-content>
                <p>As I have always said: I write what’s real and what’s true,
                    even if it means throwing myself under the bus.</p>
            </igc-card-content>
        </div>
        <div class="divider"></div>
        <igc-card-actions>
            <igc-icon-button name="previous"></igc-icon-button>
            <igc-icon-button name="play"></igc-icon-button>
            <igc-icon-button name="next"></igc-icon-button>
        </igc-card-actions>
    </div>
</igc-card>

    We are using an additional div element to bundle the IgcCardHeaderComponent and IgcCardContentComponent together, keeping them aligned vertically, and applying the .card-horizontal class to the wrapping div element to align the two sections of the card horizontally.

    The styles that .card-horizontal class applies are:

    .card-horizontal {
    display: flex;
    flex-direction: row;
    flex: 1 1 0%;
}

.card-horizontal img {
    width: 64px;
    height: 64px;
}

.card-horizontal igc-card-actions {
    justify-content: center;
}

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

    Alternative layouts

    You can get even more creative with the layout of the IgcCardComponent.

    Below is an example showing how you can create a semi-horizontal card, where we have every section of the card layed out vertically, while the IgcCardMediaComponent appears alongside the vertical sections.

    <igc-card>
    <div class="semi-horizontal">
        <div>
            <igc-card-header>
                <igc-avatar src="mellow_d.jpg" slot="thumbnail">MD</igc-avatar>
                <h5 slot="title">HERE</h5>
                <h5 slot="subtitle">by Mellow D</h5>
            </igc-card-header>
            <igc-card-content>
                <p>Far far away, behind the word mountains,
                    far from the countries Vokalia and Consonantia,
                    there live the blind texts.</p>
            </igc-card-content>
            <igc-card-actions>
                <igc-button>play album</igc-button>
            </igc-card-actions>
        </div>
        <igc-card-media class="card-media">
            <img src="here_media.jpg">
        </igc-card-media>
    </div>
</igc-card>

    .semi-horizontal {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.card-media {
    width: 96px;
    min-width: 96px;
}

    Card Actions

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

    Puede invertir el orden del botón de texto y los botones de ícono cambiando los nombres de las ranuras.

    <igc-card-actions>
    <igc-button slot="end">
        <igc-ripple></igc-ripple>
        Read more
    </igc-button>
    <div slot="start">
        <igc-icon-button name="twitter">
            <igc-ripple></igc-ripple>
        </igc-icon-button>
        <igc-icon-button name="facebook">
            <igc-ripple></igc-ripple>
        </igc-icon-button>
    </div>
</igc-card-actions>

    Ahora los botones de iconos aparecerán antes del botón de texto.

    También puede agregar más contenido en el medio simplemente omitiendo la propiedad de la ranura y dejando que los elementos vayan a la ranura predeterminada.

    Styling

    Since the card is a container that wraps different elements, styling is done by styling its building blocks - the IgcCardHeaderComponent, IgcCardContentComponent, IgcCardMediaComponent and IgcCardActionsComponent sub-components.

    igc-card {
  background-color: var(--ig-secondary-900);
}

igc-card-content,
igc-card-header::part(title) { 
  color: var(--ig-primary-500-contrast);
}

igc-card-header > *[slot="subtitle"] {
  color: var(--ig-warn-500);
  opacity: 0.9;
}

igc-icon-button::part(base) {
  background-color: var(--ig-primary-300);
}

    Summary

    En este artículo cubrimos mucho terreno con el componente de la tarjeta. Creamos una tarjeta simple y agregamos algunas imágenes para hacerla un poco más atractiva. Utilizamos algunos Web Components adicionales dentro de nuestra tarjeta, como avatares, botones e iconos, para enriquecer la experiencia y agregar algunas funcionalidades. Y finalmente, cambiamos la apariencia de la carta cambiando los colores principales de los bloques de construcción.

    API References

    Additional Resources