Skip to content

card.md

Latest commit

 

History

History
216 lines (160 loc) · 8.07 KB

card.md

File metadata and controls

216 lines (160 loc) · 8.07 KB
Raw
title Card Component
description Present users with dashboards and engaging text, images, icons or buttons as an entry point for detailed information with Ignite UI for Angular Card component.
keywords Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Card component, Angular Card controls
_language kr

Card

The Ignite UI for Angular IgxCardComponent displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information. Cards can be used to create a multimedia dashboard. The Card component supports pagination using the same component as the Ignite UI for Angular Grid, with some custom coding required.

Card Demo

Usage

Cards allow you to easily display content composed of different types of objects or similar objects whose size and supported actions can vary.

Getting Started

To get started with the Ignite UI for Angular Card, let's first import the IgxCardModule inside our app.module.ts file:

// app.module.ts
...
import { IgxCardModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxCardModule],
    ...
})
export class AppModule {}

Then in the template of our info card component we can add the following code to display a basic card with a header area and brief text content.

<!--infocard.component.html>-->

<igx-card>
  <igx-card-header>
    <h3 class="igx-card-header__title">Brad Stanley</h3>
    <h5 class="igx-card-header__subtitle">Audi AG</h5>
  </igx-card-header>
  <igx-card-content>
    <p class="igx-card-content__text">Brad Stanley (born 17 March 1963 in Titting, Germany) is a German business executive and chairman of the Vorstand (CEO) of Audi AG.</p>
  </igx-card-content>
</igx-card>

If all went well, you should see the following card in your browser:

Adding Avatar and Images

Yes, Brad Stanley is popular, but maybe we want to make his card a bit more interesting. We can add a nice picture avatar to the left of his name and a larger Audi TT image. To do that let's grab the IgxAvatar module and import it in our app.module.ts file.

// app.module.ts

...
import {
    IgxCardModule,
    IgxAvatarModule
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxAvatarModule],
})
export class AppModule {}

Next, we need to update the template for our card to show a round-shaped avatar and the actual car:

<!--infocard.component.html>-->

<igx-card>
    <igx-card-header class="compact">
        <igx-avatar src="assets/images/card/avatars/brad_stanley.jpg" roundShape="true"></igx-avatar>
        <div class="igx-card-header__tgroup">
            <h3 class="igx-card-header__title--small">Brad Stanley</h3>
            <h5 class="igx-card-header__subtitle">Audi AG</h5>
        </div>
    </igx-card-header>
    <div style="overflow: hidden">
        <img width="100%" height="100%" src="assets/images/card/media/audi_tt.jpg">
    </div>
    <igx-card-content>
      <p class="igx-card-content__text">Brad Stanley (born 17 March 1963 in Titting, Germany) is a German business executive and chairman of the Vorstand (CEO) of Audi AG.</p>
    </igx-card-content>
</igx-card>

At this point the card should look similar to the following:

Adding Actions

Now, we have a rich and very informative card, but it does seem like it is missing something, right? The good news is we can use some of our other components to enrich the experience and add some functionality. Let's put a few options to directly access social media from within the card. To do that we will grab two other modules - the IgxIcon and the IgxButton, and import them in our app.module.ts file.

// app.module.ts

...
import {
    IgxCardModule,
    IgxAvatarModule,
    IgxIconModule,
    IgxButtonModule
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxIconModule, IgxButtonModule],
})
export class AppModule {}

Next, we need to update the template for our card to show these action buttons:

<!--infocard.component.html>-->

<igx-card>
    <igx-card-header class="compact">
        <igx-avatar src="assets/images/card/avatars/brad_stanley.jpg" roundShape="true"></igx-avatar>
        <div class="igx-card-header__tgroup">
            <h3 class="igx-card-header__title--small">Brad Stanley</h3>
            <h5 class="igx-card-header__subtitle">Audi AG</h5>
        </div>
    </igx-card-header>
    <div style="overflow: hidden">
        <img width="100%" height="100%" src="assets/images/card/media/audi_tt.jpg">
    </div>
    <igx-card-actions >
        <div class="igx-card-actions__igroup--start">
            <span igxButton="icon" igxRipple igxRippleCentered="true" *ngFor="let icon of icons">
                <igx-icon fontSet="material">{{icon}}</igx-icon>
            </span>
        </div>
        <button igxButton igxRipple >Follow</button>
    </igx-card-actions>
</igx-card>

We added two icons from the official material icons set by setting IgxIconComponent's fontSet property to "material". The list of these two icons is defined in our infocard.component.ts file as follows:

// infocard.comoponent.ts

public icons = ['add', 'star'];

Easy, right? Let's see how it turned out in the browser:

Summary

In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. Finally, we used some additional Ignite UI for Angular components inside our card, like avatars, buttons and icons, to enrich the experience and add some functionality. The card component is capable of displaying more different layouts worth exploring in the Card Demo in the beginning of this article.

API and Style References

For more detailed information regarding the card's API, refer to the following links:

  • IgxCardComponent API

The following built-in CSS styles helped us achieve this card layout:

  • IgxCardComponent Styles

Additional components and/or directives that were used:

  • IgxAvatarComponent
  • IgxIconComponent
  • IgxButtonDirective

Styles:

  • IgxAvatarComponent Styles
  • IgxIconComponent Styles
  • IgxButtonDirective Styles

Additional Resources

Our community is active and always welcoming to new ideas.