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.

Ejemplo de tarjeta Web Components

import { defineComponents, IgcCardComponent, IgcButtonComponent, IgcIconButtonComponent, IgcRippleComponent, registerIconFromText } from 'igniteui-webcomponents';
import { all } from '@igniteui/material-icons-extended';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CardOverview.css';

defineComponents(IgcCardComponent, IgcButtonComponent, IgcIconButtonComponent, IgcRippleComponent);
export class CardOverview {
    constructor() {
        all.forEach((icon: any) => {
            registerIconFromText(icon.name, icon.value);
        });
    }
}

new CardOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CardOverview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample" style="align-items: center;">
  <div class="card-wrapper">
    <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 City</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>
  </div>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

.card-wrapper {
    max-width: 320px;
    min-width: 220px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Uso

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
cmd

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

defineComponents(IgcCardComponent );
ts

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

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 IgcCardHeaderComponent y configuramos su nombre de ranura en title. Por el contrario, si quisiéramos convertir otro elemento de encabezado en un subtitle, nombraríamos su espacio subtitle.

Cualquier imagen o vídeo que queramos mostrar en la tarjeta, lo envolvemos dentro de las etiquetas IgcCardMediaComponent. IgcCardMediaComponent nos permite ajustar el tamaño del contenido colocado en su interior para que mantenga su relación de aspecto mientras llena todo el cuadro de contenido del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su cuadro, entonces el objeto se recortará para ajustarse.

Puede colocar cualquier cosa dentro de las etiquetas IgcCardContentComponent. Normalmente el texto va ahí.

Finalmente, IgcCardActionsComponent es donde colocaría cualquier elemento procesable, como botones.

Medios, pulgares y avatares

Si desea mostrar una imagen o icono en el encabezado de la tarjeta junto al título y subtítulo, puede hacerlo asignando la propiedad de ranura del elemento a thumbnail.

Tomando la tarjeta de arriba como ejemplo, podemos editar el contenido del IgcCardHeaderComponent y agregar un avatar con 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>
html

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

Tarjetas delineadas

La tarjeta tiene un atributo outlined que, si se configura, elimina las sombras de la tarjeta y las reemplaza con un borde delgado para separar la tarjeta del fondo.

Diseño horizontal

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

Estamos utilizando un elemento div adicional para agrupar IgcCardHeaderComponent e IgcCardContentComponent, manteniéndolos alineados verticalmente y aplicando la clase.card-horizontal al elemento div envolvente para alinear las dos secciones de la tarjeta horizontalmente.

Los estilos que aplica.card-horizontal class son:

.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;
}
css

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

import { defineComponents, IgcCardComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CardHorizontal.css';

defineComponents(IgcCardComponent);
export class CardHorizontal {
    constructor() {
    }
}

new CardHorizontal();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Horizontal Card Layout</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample" style="align-items: center;">
  <div class="card-wrapper">
    <igc-card>
      <div class="card-horizontal">
          <div>
              <igc-card-header>
                  <img src="https://static.infragistics.com/xplatform/images/music/rozes.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>
              <span class="material-icons">skip_previous</span>
              <span class="material-icons">play_arrow</span>
              <span class="material-icons">skip_next</span>
          </igc-card-actions>
      </div>
  </igc-card>
  </div>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

.card-wrapper {
    max-width: 400px;
    min-width: 250px;
}

.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;
}

.divider {
    border-right: 1px solid darkgray;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Diseños alternativos

Puede ser aún más creativo con el diseño de IgcCardComponent.

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 IgcCardMediaComponent aparece junto a las secciones verticales.

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

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

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

import { defineComponents, IgcCardComponent, IgcAvatarComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SemiHorizontal.css';

defineComponents(IgcCardComponent, IgcAvatarComponent, IgcButtonComponent);
export class CardSemiHorizontal {
    constructor() {
    }
}

new CardSemiHorizontal();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Card Semi-horizontal Layout</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample" style="align-items: center;">
  <div class="card-wrapper">
    <igc-card>
      <div class="semi-horizontal">
          <div>
              <igc-card-header>
                  <igc-avatar src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.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="https://static.infragistics.com/xplatform/images/music/singer_female.jpg">
          </igc-card-media>
      </div>
  </igc-card>
  </div>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

.card-wrapper {
    max-width: 400px;
    min-width: 250px;
}

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

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

.divider {
    border-right: 1px solid darkgray;
}
css

Acciones de tarjeta

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

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.

Estilo

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);
}
css

import { defineComponents, IgcCardComponent, IgcIconButtonComponent, IgcRippleComponent, registerIconFromText } from 'igniteui-webcomponents';
import { all } from '@igniteui/material-icons-extended';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CardStyling.css';

defineComponents(IgcCardComponent, IgcIconButtonComponent, IgcRippleComponent);
export class CardStyling {
    constructor() {
        all.forEach((icon: any) => {
            registerIconFromText(icon.name, icon.value);
        });
    }
}

new CardStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Card Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample" style="align-items: center;">
  <div class="card-wrapper">
    <igc-card>
      <igc-card-media height="180px">
          <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
      </igc-card-media>

      <igc-card-header>
          <h3 slot="title">Jane Doe</h3>
          <h5 slot="subtitle">Professional Photographer</h5>
      </igc-card-header>

      <igc-card-content>
          <p>Hi! I'm Jane, photographer and filmmaker.
              Photography is a way of feeling, of touching,
              of loving. What you have caught on film is captured forever...
              it remembers little things, long after you have
              forgotten everything.</p>
      </igc-card-content>

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

  </igc-card>
  </div>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

.card-wrapper {
    max-width: 320px;
    min-width: 220px;
}

igc-card {
    background-color: #011627;
}

igc-card-content,
igc-card-header > *[slot="title"] { 
    color: #FEFEFE;
}

igc-card-header > *[slot="subtitle"] {
    color: #ECAA53;
    opacity: 0.9;
}

igc-icon-button+igc-icon-button {
    margin-left: 10px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Resumen

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.