Visão geral do cartão React

O Ignite UI for React Card exibe texto, imagens, ícones e botões em uma apresentação visualmente rica que pode servir como um ponto de entrada para informações mais detalhadas. Os cartões podem ser usados para criar um painel multimídia.

React Card Example

Usage

Os cartões permitem que você exiba facilmente conteúdo composto de diferentes tipos de objetos ou objetos semelhantes cujo tamanho e ações suportadas podem variar.

Começando

Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

npm install igniteui-react

Você precisará importar o IgrCard CSS necessário e registrar seu módulo, assim:

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

IgrCardModule.register();

Para obter uma introdução completa ao Ignite UI for React, leia o tópico Introdução.

Então, para representar o modelo do cartão de demonstração, podemos adicionar o seguinte 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>

Você notará algumas coisas acima. Primeiro, quando queremos marcar um elemento como um título de cabeçalho, como o h3 título, nós o colocamos entre as IgrCardHeader tags e definimos o nome do slot como title. Por outro lado, se quiséssemos fazer outro elemento de cabeçalho a subtitle, nomearíamos seu slot subtitle.

Qualquer imagem ou vídeo que queremos mostrar no cartão, nós envolvemos dentro das IgrCardMedia tags. Isso IgrCardMedia nos permite dimensionar o conteúdo colocado dentro para que ele mantenha sua proporção enquanto preenche toda a caixa de conteúdo do elemento. Se a proporção do objeto não corresponder à proporção de sua caixa, o objeto será recortado para caber.

Você pode colocar qualquer coisa dentro das IgrCardContent tags. Normalmente, o texto vai para lá.

Finalmente, IgrCardActions é onde você colocaria quaisquer itens acionáveis, como botões.

Media, Thumbs, and Avatars

Se você quiser mostrar uma imagem ou ícone no cabeçalho do cartão ao lado do título e subtítulo, você pode fazer isso atribuindo a propriedade slot do elemento à thumbnail.

Tomando o cartão acima como exemplo, podemos editar o conteúdo do IgrCardHeader e adicionar um avatar com slot="thumbnail":

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

O exemplo acima mostrará o avatar junto com o título e o subtítulo no cabeçalho do cartão.

Outlined cards

O cartão tem um atributo outlined que, se definido, remove quaisquer sombras do cartão, substituindo-as por uma borda fina para separar o cartão do fundo.

Horizontal Layout

Por padrão, todas as seções do cartão (cabeçalho, conteúdo, mídia, ações) são dispostas verticalmente. Isso é bom quando temos muito espaço vertical. Digamos que queremos dispor as seções do cartão horizontalmente. Podemos obter esse layout com algum CSS simples.

Aqui está um exemplo de um cartão horizontal contornado:

<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 um elemento adicional div para agrupar o IgrCardHeader e IgrCardContent juntos, mantendo-os alinhados verticalmente e aplicando a.card-horizontal classe ao elemento de div quebra para alinhar as duas seções do cartão horizontalmente.

Os estilos que a classe.card-horizontal aplica são:

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

Se tudo correr bem, nosso cartão deverá ficar assim:

Alternative layouts

Você pode ser ainda mais criativo com o layout do IgrCard.

Abaixo está um exemplo que mostra como você pode criar um cartão semi-horizontal, onde temos todas as seções do cartão dispostas verticalmente, enquanto o IgrCardMedia aparece ao lado das seções verticais.

<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

A área de ações do cartão permite configurações adicionais ao que já mencionamos.

Você pode inverter a ordem do botão de texto e dos botões de ícone trocando os nomes dos slots.

<IgrCardActions>
    <IgrButton>
        <span>Read more</span>
        <IgrRipple />
    </IgrButton>
    <div slot="end">
        <IgrIconButton ref={this.iconRef} className="marginIcon" name="twitter" collection="material">
            <IgrRipple />
        </IgrIconButton>
        <IgrIconButton name="facebook" collection="material">
            <IgrRipple />
        </IgrIconButton>
    </div>
</IgrCardActions>

Agora os botões de ícones aparecerão antes do botão de texto.

Você também pode adicionar mais conteúdo no meio, simplesmente omitindo a propriedade slot e deixando os elementos irem para o slot padrão.

Styling

Como o cartão é um contêiner que envolve diferentes elementos, o estilo é feito estilizando seus blocos de construção - o IgrCardHeader, IgrCardContent,e IgrCardActions IgrCardMedia 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

Neste artigo, cobrimos muito terreno com o componente do cartão. Criamos um cartão simples e adicionamos algumas imagens para torná-lo um pouco mais atraente. Usamos alguns React adicionais dentro do nosso cartão, como avatares, botões e ícones, para enriquecer a experiência e adicionar algumas funcionalidades. E, finalmente, mudamos a aparência do cartão alterando as cores principais dos blocos de construção.