Visão geral do cartão Web Components

O Ignite UI for Web Components 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 cards podem ser usados para criar um painel multimídia.

Web Components 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 Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Before using the IgcCardComponent, you need to register it as follows:

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

defineComponents(IgcCardComponent );

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

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

Você vai notar algumas coisas acima. Primeiro, quando queremos marcar um elemento como título de cabeçalho, como oh3 cabeçalho, colocamos entre asIgcCardHeaderComponent tags e definimos o nome do slot paratitle. Por outro lado, se quiséssemos fazer outro elemento de cabeçalho asubtitle, nomearíamos seu slotsubtitle.

Qualquer imagem ou vídeo que quisermos mostrar no cartão, envolvemos dentro dasIgcCardMediaComponent tags. IssoIgcCardMediaComponent nos permite dimensionar o conteúdo colocado dentro para que ele mantenha sua proporção de aspecto enquanto preenche toda a caixa de conteúdo do elemento. Se a proporção de aspecto do objeto não corresponder à proporção da caixa, então o objeto será cortado para se encaixar.

Você pode colocar qualquer coisa dentro dasIgcCardContentComponent etiquetas. Normalmente o texto vai para lá.

Por fim, éIgcCardActionsComponent onde você coloca qualquer item de ação, como botões.

Media, Thumbs, and Avatars

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

Pegando o cartão acima como exemplo, podemos editar o conteúdo doIgcCardHeaderComponent e adicionar um avatar comslot="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>

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

Outlined cards

A carta possui umoutlined atributo que, se ativado, remove quaisquer sombras da carta, substituindo-as por uma borda fina para separar a carta do fundo.

Horizontal Layout

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

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

<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 um elemento adicionaldiv para agrupar osIgcCardHeaderComponent eIgcCardContentComponent juntos, mantendo-os alinhados verticalmente e aplicando a.card-horizontal classe ao elemento dediv enrolamento para alinhar as duas seções da carta horizontalmente.

Os estilos que essa.card-horizontal classe 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 doIgcCardComponent.

Abaixo está um exemplo mostrando como você pode criar uma carta semi-horizontal, onde todas as seções da carta estão dispostas verticalmente, enquanto aIgcCardMediaComponent carta aparece junto com as seções verticais.

<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

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.

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

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 recipiente que envolve diferentes elementos, o estilo é feito estilizando seus blocos de construção - osIgcCardHeaderComponentIgcCardContentComponentIgcCardMediaComponent subcomponentes eIgcCardActionsComponent os componentes.

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 de cartão. Criamos um cartão simples e adicionamos algumas imagens para torná-lo um pouco mais atraente. Usamos alguns Web Components adicionais dentro do nosso cartão, como avatares, botões e ícones, para enriquecer a experiência e adicionar alguma funcionalidade. E, finalmente, mudamos a aparência do cartão alterando as cores principais dos blocos de construção.