Angular 카드 구성 요소 개요

Angular Card는 타이틀 텍스트, 설명, 이미지 스타일, 행동 촉구 버튼, 링크 등과 같은 다양한 요소가 있는 유연한 컨테이너를 나타냅니다. 주어진 시나리오/콘텐츠를 최상의 방식으로 표현하기 위해 다양한 디스플레이 옵션, 헤더, 푸터, 배경색, 애니메이션 등을 제공합니다.

이 가벼운 Angular Card 컴포넌트는 모든 종류의 카드를 만드는 데 사용되며, 그 중에는 명함, 소재 뒤집기 카드, 쌓인 카드 등이 있습니다.

Angular Card Example

아래에서 이미지, 제목, 부제, 기본 카드 콘텐츠, 버튼 컨테이너와 같은 주요 카드 섹션이 포함된 Ignite UI for Angular의 잘 만들어진 기본 샘플을 볼 수 있습니다.

Getting Started with Ignite UI for Angular Card

Ignite UI for Angular Card 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxCardModule 네 안에 app.module.ts 파일.

// app.module.ts
...
import { IgxCardModule } from 'igniteui-angular/card';
// import { IgxCardModule } from '@infragistics/igniteui-angular'; for licensed package

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

또는16.0.0 독립 실행형 의존성으로 가져오IgxCardComponent 거나, 토큰을IGX_CARD_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// home.component.ts

import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card';
// import { IGX_CARD_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-card>
        <igx-card-media height="196px">
            <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
        </igx-card-media>

        <igx-card-header>
            <h3 igxCardHeaderTitle>New York</h3>
            <h5 igxCardHeaderSubtitle>City in New York</h5>
        </igx-card-header>

        <igx-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>
        </igx-card-content>

        <igx-card-actions>
            <button igxButton igxRipple>Read More</button>
            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                <igx-icon>favorite</igx-icon>
            </button>
            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                <igx-icon>share</igx-icon>
            </button>
        </igx-card-actions>
    </igx-card>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_CARD_DIRECTIVES]
    /* or imports: [IgxCardComponent,
        IgxCardHeaderComponent,
        IgxCardMediaDirective,
        IgxCardContentDirective,
        IgxCardActionsComponent,
        IgxCardFooterDirective,
        IgxCardHeaderTitleDirective,
        IgxCardHeaderSubtitleDirective,
        IgxCardThumbnailDirective,
        IgxButtonDirective,
        IgxRippleDirective] */
})
export class HomeComponent {}

이제 Ignite UI for Angular 카드 모듈이나 지침이 가져왔으니, 컴포넌트를igx-card 사용할 수 있습니다.

Using the Angular Card Component

그런 다음 데모 카드 템플릿을 나타내기 위해 다음 코드를 추가할 수 있습니다.

<!--card.component.html>-->

<igx-card>
    <igx-card-media height="196px">
        <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
    </igx-card-media>

    <igx-card-header>
        <h3 igxCardHeaderTitle>New York</h3>
        <h5 igxCardHeaderSubtitle>City in New York</h5>
    </igx-card-header>

    <igx-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>
    </igx-card-content>

    <igx-card-actions>
        <button igxButton igxRipple>Read More</button>
        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>favorite</igx-icon>
        </button>
        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>share</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

위에서 몇 가지를 눈에 띄게 할 것입니다. 먼저 우리가 원할 때 태그 헤더 제목으로서의 요소들, 예를 들어h3 방향으로, 우리는 그것을igx-card-header 태그를 사용하고igxCardHeaderTitle 원소에 대한 지시. 반대로, 만약 다른 제목 원소를 a로 만들고 싶다면,subtitle 우리는 다음igxCardHeaderSubtitle 그것에 대한 것이다.

Angular 카드에 보여주고 싶은 이미지나 영상은 태그 안에igx-card-media 감싸서 넣습니다. 이 기능은igx-card-media 안에 배치된 콘텐츠의 크기를 그리고 속성(attributewidth)height을 통해 크기를 설정할 수 있게 해줍니다. 위 예시에서는 widthheight를 만auto 남겨두어 이미지가 카드 표면 전체에 걸쳐 늘어나면서 설정된 높이를 유지할 수 있도록 했습니다.

태그 안에igx-card-content 무엇이든 넣을 수 있습니다. 보통 문자는 거기로 가요.

마지막으로,igx-card-actions 버튼 같은 실행 가능한 아이템을 배치하는 곳입니다. 원소에 지시를 사용하면igxButton 해당 영역 내 재료 설계 사양에 따라 자동으로 올바르게 배치됩니다.

Media, Thumbs, and Avatars

카드 헤더에서 제목과 자막 옆에 이미지나 아이콘을 표시하고 싶다면, 지시문을 사용하면igxCardThumbnail 가능합니다.

위 카드를 예로 들면, 내용igx-card-header 물을 편집하고 아이콘을 담을 용기를 추가할igxCardThumbnail 수 있습니다:

<igx-card-header>
    <div igxCardThumbnail>
        <igx-icon>place</igx-icon>
    </div>
    
    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

위의 예에서는 카드 헤더의 제목 및 부제 옆에 아이콘이 표시됩니다.

또한 카드 헤더에 있거나 배치된 것도 자동으로 감지igx-avatar​igx-card-media 합니다. 이들은 마치 카드 썸네일처럼 보일 것입니다. 그래서 다음과 같은 방법을 취할 수 있습니다:

<igx-card-header>
    <igx-avatar>
        <igx-icon>place</igx-icon>
    </igx-avatar>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

또는 심지어 이것:

<igx-card-header>
    <igx-card-media width="40px" height="40px">
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=50">
    </igx-card-media>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

Outlined cards

카드type 에는 속성이 있어서 (생략 시 자동으로 설정됨), 또는default 또는 중 하나outlined로 설정할 수 있습니다. 이 유형은outlined 카드의 그림자를 제거하고, 얇은 테두리로 대체하여 카드를 배경과 분리합니다.

Angular Card Horizontal Layout

기본적으로 카드의 모든 섹션(헤더, 콘텐츠, 미디어, 액션)은 세로로 배치되어 있습니다. 수직 공간이 넓을 때 이런 점이 좋습니다. 카드의 모든 섹션을 가로로 배치하고 싶다고 가정해 봅시다. 카드의 속성을 이용horizontal 해 레이아웃을 설정할 수 있습니다.

다음은 윤곽선이 있는 가로 카드의 예입니다.

<igx-card type="outlined" [horizontal]="horizontal">
    <div class="h-sample-column">
        <igx-card-header>
            <h5 igxCardHeaderTitle>{{card.title}}</h5>
            <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
            <igx-card-media width="64px" height="64px">
                <img [src]="card.imageUrl">
            </igx-card-media>
        </igx-card-header>

        <igx-card-content>
            <p>{{card.content}}</p>
        </igx-card-content>
    </div>

    <igx-divider [vertical]="horizontal"></igx-divider>

    <igx-card-actions layout="justify">
        <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>{{icon}}</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

우리는 클래스를.h-sample-column 사용해igx-card-header와 를igx-card-content 묶어 수직으로 정렬하고, 카드 내 다른 섹션들은 수평으로 정렬합니다.

그.h-sample-column 클래스가 적용하는 스타일은 다음과 같습니다:

.h-sample-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;

  igx-card-header {
      padding-bottom: 0;
  }
}

이제 버튼igx-card-actions 들이 레이아웃으로vertical 바뀌는 것을 주목하세요. 이 프로젝트는igx-card-actions 부모와 레이아웃 관계를 맺고inverse 있습니다. 카드horizontal 속성true이 설정되면 행동vertical 속성이 자동으로 설정true 되고, 그 반대도 마찬가지입니다.

행동 영역의 속성을 명시적으로 설정할vertical 수 있어서 이 기본 동작을 덮어쓸 수 있습니다.

<igx-card-actions layout="justify" [vertical]="false">
    <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true">
        <igx-icon>{{icon}}</igx-icon>
    </button>
</igx-card-actions>

모든 것이 순조롭게 진행되었다면 카드는 다음과 같아야 합니다.

Alternative layouts

레이아웃을 더 창의적으로 바꿀igx-card 수 있습니다.

아래는 반가로 카드를 만드는 방법을 보여주는 예시로, 카드의 모든 섹션을 세로로 배치하고, 세igx-card-media로 섹션 옆에 나타나는 방식입니다.

<igx-card [horizontal]="horizontal">
    <div igxLayout igxLayoutDir="column" igxFlex igxFlexGrow="1">
        <igx-card-header>
            <igx-avatar [src]="card.avatarUrl"></igx-avatar>
            <h5 igxCardHeaderTitle>{{card.title}}</h5>
            <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
        </igx-card-header>

        <igx-card-content>
            <p>{{card.content}}</p>
        </igx-card-content>

        <igx-card-actions [vertical]="false">
            <button *ngFor="let button of card.buttons;" igxButton="flat" igxRipple>
                {{button}}
            </button>
        </igx-card-actions>
    </div>

    <igx-card-media width="96px">
        <img [src]="card.imageUrl">
    </igx-card-media>
</igx-card>

Angular Card Actions

Angular Card 작업 영역에서는 앞서 언급한 것 외에도 추가적인 구성이 가능합니다.

또는 지시를 사용igxStart​igxEnd 해 카드 액션 영역의 시작이나 끝에 요소를 배치할 수 있습니다.

<igx-card-actions>
    <button igxIconButton="flat" igxStart>
        <igx-icon>drag_indicator</igx-icon>
    </button>
    <button igxIconButton="flat" igxEnd>
        <igx-icon>favorite</igx-icon>
    </button>
</igx-card-actions>

버튼을 정당화해서 전체 축을 가로질러 배치할 수 있고, 반대편 끝에 배치되지 않도록 할 수 있습니다. 이를 위해서는 속성을 사용layout 해 값을 다음과 같이 설정justify 하세요:

<igx-card-actions layout="justify">
    <button igxButton>Button</button>

    <button igxIconButton="flat">
        <igx-icon>star</igx-icon>
    </button>
</igx-card-actions>

스타일링

Card Theme Property Map

속성을 변경하면$background 다음 종속 속성들이 자동으로 업데이트됩니다:

기본 속성	종속 속성	설명
$background	$header-텍스트-컬러	카드 제목의 텍스트 색깔.
	$subtitle-텍스트-컬러	카드 부제의 텍스트 색깔.
	$content-텍스트-컬러	카드 내용물의 텍스트 색상.
	$actions-텍스트-컬러	카드 버튼의 텍스트 색상.

카드 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 방법을 따라, 우리는 몇 가지 스타일링 매개변수만 제공하는 새로운 테마card-theme를 만듭니다. 매개변수만 지정$background 하면, 배경과의 대비가 더 좋은 전경 색상을 자동으로 선택하는데, 검정색 또는 흰색 중 어느 쪽이 더 나은 방향을 제공합니다.

$custom-card-theme: card-theme(
    $background: #011627,
    $subtitle-text-color: #ecaa53,
);

보시다시피, 아이템card-theme의 기본 스타일링을 위한 유용한 파라미터들을 보여줍니다.

마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.

@include css-vars($custom-card-theme);

아래 샘플에서는 카드 컴포넌트와 맞춤형 CSS 변수를 사용하면 디자인 시스템에서 사용Ant 된 카드와 시각적으로 유사한 디자인을 만들 수 있음을 알 수 있습니다.

Styling with Tailwind

저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일card 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-card​dark-card 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 부동산 목록은 카드 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-card
class="!light-card
![--background:#193625]
![--subtitle-text-color:#ECAA53]"
elevated>
...
</igx-card>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 카드는 다음과 같이 보여야 합니다:

Summary

이 글에서는 카드 구성 요소로 많은 내용을 다루었습니다. 먼저 텍스트 콘텐츠만 있는 매우 간단한 카드를 만들었습니다. 그런 다음 이미지를 추가하여 카드를 조금 더 매력적으로 만들었습니다. 카드, 아바타, 버튼 및 아이콘 내부에 Ignite UI for Angular 구성 요소를 추가하여 경험을 풍부하게 하고 기능을 추가했습니다. 마지막으로 노출된 테마 색상을 설정하고 사용자 지정 팔레트를 만들고 스키마를 확장하여 카드의 테마를 변경했습니다. 카드 구성 요소는 이 글의 시작 부분에 있는 카드 데모에서 살펴볼 만한 다양한 레이아웃을 표시할 수 있습니다.

API and Style References

카드 API에 대한 자세한 내용은 다음 링크를 참조하세요.

• IgxCardComponent API

다음과 같은 기본 제공 CSS 스타일이 이 카드 레이아웃을 구현하는 데 도움이 되었습니다.

• IgxCardComponent Styles

사용된 추가 구성요소 및/또는 지시어:

• IgxAvatarComponent
• IgxIconComponent
• IgxButtonDirective
• IgxDividerDirective

Styles:

• IgxAvatarComponent Styles
• IgxIconComponent Styles
• IgxButtonDirective Styles

Theming Dependencies

• IgxButton 테마
• IgxAvatar 테마
• Igx아이콘테마

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular