Web Components 카드 개요

Ignite UI for Web Components 카드는 텍스트, 이미지, 아이콘 및 단추를 시각적으로 풍부한 프레젠테이션으로 표시하여 보다 자세한 정보에 대한 진입점 역할을 할 수 있습니다. 카드를 사용하여 멀티미디어 대시보드를 만들 수 있습니다.

Web Components Card Example

Usage

카드를 사용하면 다양한 유형의 개체 또는 크기와 지원되는 작업이 다를 수 있는 유사한 개체로 구성된 콘텐츠를 쉽게 표시할 수 있습니다.

시작하기

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents

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

defineComponents(IgcCardComponent );

Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

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

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

위에서 몇 가지를 눈에 띄게 할 것입니다. 먼저, 헤더 제목으로 원소를 태그 하고 싶을 때,h3 태그 사이에IgcCardHeaderComponent 넣고 슬롯 이름을 다음title으로 설정합니다. 반대로, 만약 다른 제목 요소를subtitle 만들고 싶다면, 그 슬롯subtitle을 명명할 것입니다.

카드에 보여주고 싶은 이미지나 영상은 태그 안에IgcCardMediaComponent 감싸서 보여줘요. 이 기능은IgcCardMediaComponent 내부 콘텐츠 크기를 조절하여 요소의 전체 콘텐츠 박스를 채우면서도 화면 비율을 유지하도록 할 수 있습니다. 객체의 종횡비가 상자의 종횡비와 일치하지 않으면, 객체는 맞게 클리핑됩니다.

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

마지막으로,IgcCardActionsComponent 버튼 같은 실행 가능한 아이템을 배치하는 곳입니다.

Media, Thumbs, and Avatars

카드 헤더에서 제목과 자막 옆에 이미지나 아이콘을 표시하고 싶다면, 해당 요소의 슬롯 속성을thumbnail 할당하면 됩니다.

위 카드를 예로 들면, 내용을 편집IgcCardHeaderComponent 하고 다음과 같은slot="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>

위의 예에서는 카드 헤더의 제목 및 부제와 함께 아바타를 표시합니다.

Outlined cards

카드에는 속성을 가지고outlined 있는데, 이 속성을 설정하면 카드의 그림자를 제거하고 얇은 테두리로 대체하여 카드를 배경과 분리합니다.

Horizontal Layout

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

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

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

우리는 추가div 요소를IgcCardHeaderComponent 사용해 와IgcCardContentComponent를 묶어 수직으로 정렬하고, 클래스를 래핑.card-horizontal 요소에 적용div 해 카드의 두 부분을 수평으로 정렬하고 있습니다.

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

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

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

Alternative layouts

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

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

<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

카드 작업 영역에서는 이미 언급한 내용에 대한 추가 구성을 허용합니다.

슬롯 이름을 전환하여 텍스트 버튼과 아이콘 버튼의 순서를 바꿀 수 있습니다.

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

이제 아이콘 버튼이 텍스트 버튼 앞에 나타납니다.

간단히 슬롯 속성을 생략하고 요소가 기본 슬롯으로 이동하도록 하여 그 사이에 더 많은 콘텐츠를 추가할 수도 있습니다.

Styling

카드는 여러 요소를 감싸는 컨테이너이기 때문에, 스타일링은 구성 요소인 'theIgcCardHeaderComponent',IgcCardContentComponent'IgcCardMediaComponentsIgcCardActionsComponent, 그리고 sub-components'를 스타일링하여 이루어집니다.

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

이 기사에서는 카드 구성 요소에 대해 많은 부분을 다루었습니다. 간단한 카드를 만들고 몇 가지 이미지를 추가하여 좀 더 매력적으로 만들었습니다. 카드 내부에 아바타, 버튼, 아이콘과 같은 추가 Web Components 사용하여 경험을 풍부하게 하고 몇 가지 기능을 추가했습니다. 마지막으로 빌딩 블록의 주요 색상을 변경하여 카드의 모양을 변경했습니다.