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 una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    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>

    Notarás algunas cosas arriba. Primero, cuando queremos etiquetar un elemento como título de cabecera, como elh3 encabezado, lo colocamos entre lasIgcCardHeaderComponent 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 lasIgcCardMediaComponent etiquetas. EstoIgcCardMediaComponent 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 lasIgcCardContentComponent etiquetas. Normalmente el texto va allí.

    Por último,IgcCardActionsComponent 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 yIgcCardHeaderComponent añadir un avatar conslot="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

    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:

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

    Estamos usando un elemento adicionaldiv para agrupar losIgcCardHeaderComponent yIgcCardContentComponent 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 laIgcCardComponent.

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

    .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

    Dado que la tarjeta es un contenedor que envuelve diferentes elementos, el estilo se realiza estilizando sus bloques de construcción - losIgcCardHeaderComponent​IgcCardContentComponent​IgcCardMediaComponent subcomponentes yIgcCardActionsComponent 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 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