Blazor 카드 개요

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

Blazor Card Example

Usage

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

Getting Started

사용하기IgbCard 전에 다음과 같이 등록해야 합니다:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule));

스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbCard. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

<IgbCard>
    <IgbCardMedia>
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
    </IgbCardMedia>
    <IgbCardHeader>
        <h3 slot="title">New York City</h3>
        <h5 slot="subtitle">City in New York</h5>
    </IgbCardHeader>

    <IgbCardContent>
       <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>
    </IgbCardContent>
    <IgbCardActions>
        <IgbButton slot="start">
            <IgbRipple />
            Read more
        </IgbButton>
        <div slot="end">
            <IgbIconButton name="twitter" >
                <IgbRipple />
            </IgbIconButton>
            <IgbIconButton name="facebook" >
                <IgbRipple />
            </IgbIconButton>
        </div>
    </IgbCardActions>
</IgbCard>

You will notice a few things above. First, when we want to tag an element as a header title, like the h3 heading, we place it between the IgbCardHeader tags and set its slot name to title. Conversely, if we wanted to make another heading element a subtitle we would name its slot subtitle.

Any image or video we want to show in the card, we wrap inside the IgbCardMedia tags. The IgbCardMedia allows us to size the content placed inside so that it maintains its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

You can place anything inside the IgbCardContent tags. Usually text goes there.

Finally, the IgbCardActions is where you'd place any actionable items, like buttons.

Media, Thumbs, and Avatars

If you want to show an image or icon in the card header next to the title and subtitle, you can do it by assigning the element's slot property to thumbnail.

Taking the card above as an example, we can edit the contents of the IgbCardHeader and add an avatar with slot="thumbnail":

<IgbCardHeader>
    <IgbAvatar slot="thumbnail" Src="path/to/image" Initials="TS" />

    <h3 slot="title">Title</h5>
    <h5 slot="subtitle">Subtitle</h5>
</IgbCardHeader>

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

Outlined cards

The card has an outlined attribute which, if set, removes any shadows from the card, replacing them with a thin border to separate the card from the background.

Horizontal Layout

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

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

<IgbCard>
    <div class="card-horizontal">
        <div>
            <IgbCardHeader>
                <img slot="thumbnail" src="ROZES-Under-the-Grave.jpg" alt="ROZES-Under-the-Grave" />
                <h5 slot="title">Rozes</h5>
                <h5 slot="subtitle">Under the Grave (2016)</h5>
            </IgbCardHeader>
            <IgbCardContent>
                <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>
            </IgbCardContent>
        </div>
        <div class="divider"></div>
        <IgbCardActions>
            <IgbIconButton Name="previous" />
            <IgbIconButton Name="play" />
            <IgbIconButton Name="next" />
        </IgbCardActions>
    </div>
</IgbCard>

We are using an additional div element to bundle the IgbCardHeader and IgbCardContent together, keeping them aligned vertically, and applying the .card-horizontal class to the wrapping div element to align the two sections of the card horizontally.

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

You can get even more creative with the layout of the IgbCard.

Below is an example showing how you can create a semi-horizontal card, where we have every section of the card laid out vertically, while the IgbCardMedia appears alongside the vertical sections.

<IgbCard>
    <div class="semi-horizontal">
        <div>
            <IgbCardHeader>
                <IgbAvatar slot="thumbnail" src/>
                <h5 slot="title">HERE</h5>
                <h5 slot="subtitle">by Mellow D</h5>
            </IgbCardHeader>
            <IgbCardContent>
              <p>Far far away, behind the word mountains,
              far from the countries Vokalia and Consonantia,
              there live the blind texts.</p>
            </IgbCardContent>
            <IgbCardActions>
                <IgbButton>Play Album</IgbButton>
            </IgbCardActions>
        </div>
        <IgbCardMedia class="card-media">
            <img src="here_media.jpg" alt="here_media" />
        </IgbCardMedia>
    </div>
</IgbCard>

.semi-horizontal {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.card-media {
    width: 96px;
    min-width: 96px;
}

Card Actions

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

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

<IgbCardActions>
    <IgbButton slot="start">
        <IgbRipple />
        Read more
    </IgbButton>
    <div slot="start">
        <IgbIconButton name="twitter">
            <IgbRipple />
        </IgbIconButton>
        <IgbIconButton name="facebook" >
            <IgbRipple />
        </IgbIconButton>
    </div>
</IgbCardActions>

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

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

Styling

Since the card is a container that wraps different elements, styling is done by styling its building blocks - the IgbCardHeader, IgbCardContent, IgbCardMedia and IgbCardActions 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

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