Resumen de la tarjeta React

La tarjeta Ignite UI for React 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.

React 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

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react

Entonces tendrás que importar elIgrCard CSS necesario y su contenido, así:

import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardMedia, IgrCardActions } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Para una introducción completa al Ignite UI for React, lee el tema Empezar.

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

<IgrCard>
    <IgrCardMedia>
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img>
    </IgrCardMedia>
    <IgrCardHeader>
        <h3 slot="title">New York City</h3>
        <h5 slot="subtitle">City in New York</h5>
    </IgrCardHeader>
    <IgrCardContent>
        <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>
    </IgrCardContent>
    <IgrCardActions>
        <IgrButton>
            <span>Read more</span>
            <IgrRipple />
        </IgrButton>
        <div slot="end">
            <IgrIconButton name="twitter" collection="material">
                <IgrRipple />
            </IgrIconButton>
            <IgrIconButton name="facebook" collection="material">
                <IgrRipple />
            </IgrIconButton>
        </div>
    </IgrCardActions>
</IgrCard>

Notarás algunas cosas arriba. Primero, cuando queremos etiquetar un elemento como título de cabecera, como elh3 encabezado, lo colocamos entre lasIgrCardHeader etiquetas y establecemos el nombre de su ranura atitle. Por el contrario, si quisiéramos hacer otro elemento de cabecera asubtitle, nombraríamos su ranurasubtitle.

Cualquier imagen o vídeo que queramos mostrar en la tarjeta, lo envolvemos dentro de lasIgrCardMedia etiquetas. EstoIgrCardMedia nos permite dimensionar el contenido colocado en su interior para que mantenga su relación de aspecto mientras llena toda la caja de contenido del elemento. Si la relación de aspecto del objeto no coincide con la de su caja, entonces el objeto será recortado para ajustarse.

Puedes colocar cualquier cosa dentro de lasIgrCardContent etiquetas. Normalmente el texto va allí.

Por último,IgrCardActions es donde colocarías cualquier objeto de acción, como botones.

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 asignando la propiedad de ranura del elemento athumbnail.

Tomando la carta anterior como ejemplo, podemos editar el contenido de yIgrCardHeader añadir un avatar conslot="thumbnail":

<IgrCardHeader>
    <div slot="thumbnail">
        <IgrAvatar src="path/to/image" initials="TS" />
    </div>
    <h3 slot="title">Title</h3>
    <h5 slot="subtitle">Subtitle</h5>
</IgrCardHeader>

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

Outlined cards

La carta tiene unoutlined atributo que, si está activado, elimina cualquier sombra de la carta, sustituyéndola por un borde fino para separar la carta del fondo.

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. Imagina que queremos disponer las secciones de la tarjeta horizontalmente. Podemos lograr un diseño así con un simple CSS.

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

<IgrCard>
    <div className="card-horizontal">
        <div>
            <IgrCardHeader>
                <img src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" slot="thumbnail"></img>
                <h5 slot="title">Rozes</h5>
                <h5 slot="subtitle">Under the Grave (2016)</h5>
            </IgrCardHeader>
            <IgrCardContent>
                <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>
            </IgrCardContent>
        </div>
        <div className="divider"></div>
        <IgrCardActions>
            <span className="material-icons">skip_previous</span>
            <span className="material-icons">play_arrow</span>
            <span className="material-icons">skip_next</span>
        </IgrCardActions>
    </div>
</IgrCard>

Estamos usando un elemento adicionaldiv para agrupar losIgrCardHeader yIgrCardContent juntos, manteniéndolos alineados verticalmente, y aplicando la.card-horizontal clase al elemento de envolvimientodiv para alinear horizontalmente las dos secciones de la carta.

Los estilos que aplica esa.card-horizontal clase 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;
}

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

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

<IgrCard>
    <div className="semi-horizontal">
        <div>
            <IgrCardHeader>
                <IgrAvatar src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg" slot="thumbnail" />
                <h5 slot="title">HERE</h5>
                <h5 slot="subtitle">by Mellow D</h5>
            </IgrCardHeader>
            <IgrCardContent>
                <p>Far far away, behind the word mountains,
                    far from the countries Vokalia and Consonantia,
                    there live the blind texts.</p>
            </IgrCardContent>
            <IgrCardActions>
                <IgrButton><span>Play Album</span></IgrButton>
            </IgrCardActions>
        </div>

        <IgrCardMedia className='card-media'>
            <img src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img>
        </IgrCardMedia>
    </div>
</IgrCard>

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

<IgrCardActions>
    <IgrButton>
        <span>Read more</span>
        <IgrRipple />
    </IgrButton>
    <div slot="start">
        <IgrIconButton className="marginIcon" name="twitter" collection="material">
            <IgrRipple />
        </IgrIconButton>
        <IgrIconButton name="facebook" collection="material">
            <IgrRipple />
        </IgrIconButton>
    </div>
</IgrCardActions>

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

Dado que la tarjeta es un contenedor que envuelve diferentes elementos, el estilo se realiza estilizando sus bloques de construcción - losIgrCardHeaderIgrCardContentIgrCardMedia subcomponentes yIgrCardActions los subcomponentes.

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