Blazor 카드 개요

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

Blazor Card Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbCardModule),
                typeof(IgbIconModule),
                typeof(IgbIconButtonModule),
                typeof(IgbRippleModule)
  );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical" style="align-items: center">
    <div class="card-wrapper" style="max-width: 20rem; min-width: 13.75rem;">
        <style>
            igc-icon{
                height: 0rem;
                width: 0rem;
            }
            igc-icon-button+igc-icon-button {
                margin-left: .625rem;
            }
        </style>

        <IgbIcon @ref="@RegisterIconRef" />

        <IgbCard>
            <IgbCardMedia Height="10rem">
                <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 style="font-size: 1.25rem;" slot="title">New York City</h3>
                <h5 style="font-size: 1.00rem;" 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 IconName="facebook" Collection="material">
                        <IgbRipple />
                    </IgbIconButton>
                    <IgbIconButton IconName="twitter" Collection="material">
                        <IgbRipple />
                    </IgbIconButton>
                </div>
            </IgbCardActions>
        </IgbCard>
    </div>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();

            string twitterIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-1.13 6v.39a8.61 8.61 0 01-13.25 7.25 5.69 5.69 0 00.72 0 6 6 0 003.76-1.3 3 3 0 01-2.83-2.1 2.75 2.75 0 00.57.05 3 3 0 00.8-.1 3 3 0 01-2.43-3 3.13 3.13 0 001.37.38 3 3 0 01-.93-4 8.57 8.57 0 006.24 3.17 3.1 3.1 0 01-.08-.74 3 3 0 015.24-2A6.38 6.38 0 0019 6.22a3.07 3.07 0 01-1.36 1.68 6.22 6.22 0 001.74-.48A6.09 6.09 0 0117.87 9z'></path></svg>";
            string facebookIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 22zm0-20a10 10 0 00-1.727 19.841v-7.6h-2.61v-3.018h2.61V8.995A3.641 3.641 0 0114.16 5a21.367 21.367 0 012.332.119v2.7h-1.6c-1.255 0-1.5.6-1.5 1.471v1.929h2.993L16 14.245h-2.6v7.647A9.994 9.994 0 0012 2z'></path></svg>";

            await this.RegisterIconRef.RegisterIconFromTextAsync("twitter", twitterIcon, "material");
            await this.RegisterIconRef.RegisterIconFromTextAsync("facebook", facebookIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Usage

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

Getting Started

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

// in Program.cs file

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

IgbCard 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

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

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

위에서 몇 가지 사항을 확인할 수 있습니다. 첫째, 우리가 원할 때 꼬리표 헤더 제목과 같은 요소 h3 제목 사이에 배치합니다. IgbCardHeader 태그를 지정하고 슬롯 이름을 다음으로 설정합니다. title. 반대로, 다른 제목 요소를 subtitle 슬롯 이름을 지정하겠습니다. subtitle.

카드에 표시하려는 이미지나 비디오는 IgbCardMedia 태그 안에 포함됩니다. IgbCardMedia 사용하면 요소의 전체 콘텐츠 상자를 채우는 동안 가로 세로 비율을 유지하도록 내부에 배치된 콘텐츠의 크기를 조정할 수 있습니다. 개체의 가로 세로 비율이 상자의 가로 세로 비율과 일치하지 않으면 개체가 맞게 잘립니다.

IgbCardContent 태그 안에 무엇이든 넣을 수 있습니다. 일반적으로 텍스트가 거기로 이동합니다.

마지막으로 IgbCardActions 버튼과 같은 실행 가능한 항목을 배치하는 곳입니다.

Media, Thumbs, and Avatars

제목과 부제 옆의 카드 헤더에 이미지나 아이콘을 표시하려면 요소의 슬롯 속성을 thumbnail에 할당하면 됩니다.

위의 카드를 예로 들면 IgbCardHeader의 내용을 편집하고 slot="thumbnail"을 사용하여 아바타를 추가할 수 있습니다.

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

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

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

Outlined cards

카드에는 설정된 경우 카드에서 그림자를 제거하고 얇은 테두리로 대체하여 카드를 배경과 분리하는 outlined 속성이 있습니다.

Horizontal Layout

기본적으로 카드의 모든 섹션(헤더, 콘텐츠, 미디어, 작업)은 수직으로 배치됩니다. 수직 공간이 많을 때 좋습니다. 카드의 섹션을 수평으로 배치하고 싶다고 가정해 보겠습니다. 간단한 CSS를 사용하여 이러한 레이아웃을 구현할 수 있습니다.

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

<IgbCard>
    <div class="card-horizontal">
        <div>
            <IgbCardHeader>
                <img slot="thumbnail" src="ROZES-Under-the-Grave.jpg" />
                <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>
razor

추가 div 요소를 사용하여 IgbCardHeader와 IgbCardContent 함께 묶고 수직 정렬을 유지하며.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;
}
css

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCardModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample" style="align-items: center">
    <div class="card-wrapper" style="max-width: 25rem; min-width: 15.625rem;">
        <IgbCard>
            <div class="card-horizontal" style="display: flex; flex-direction: row; flex: 1 1 0%;">
                <div>
                    <IgbCardHeader>
                        <img slot="thumbnail" src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" width="64" height="64"/>
                        <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" style="border-right: 1px solid darkgray;"></div>
                <IgbCardActions style="justify-content: center;">
                    <span class="material-icons">skip_previous</span>
                    <span class="material-icons">play_arrow</span>
                    <span class="material-icons">skip_next</span>
                </IgbCardActions>
            </div>
        </IgbCard>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Alternative layouts

IgbCard의 레이아웃을 사용하면 더욱 창의력을 발휘할 수 있습니다.

다음은 카드의 모든 섹션이 수직으로 배치되고 IgbCardMedia 수직 섹션 옆에 나타나는 반수평 카드를 만드는 방법을 보여주는 예입니다.

<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" />
        </IgbCardMedia>
    </div>
</IgbCard>
razor

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

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbAvatarModule),
                typeof(IgbButtonModule),
                typeof(IgbCardModule)
 );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical" style="align-items: center">
    <div class="card-wrapper" style="max-width: 25rem; min-width: 15.625rem;">
        <IgbCard>
            <div class="semi-horizontal" style="display: flex; flex-direction: row; flex-grow: 1;">
                <div>
                    <IgbCardHeader>
                        <IgbAvatar Src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg" slot="thumbnail"/>
                        <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" style="width: 6rem; min-width: 6rem;">
                    <img src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg" />
                </IgbCardMedia>
            </div>
        </IgbCard>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Card Actions

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

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

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

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

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

Styling

카드는 서로 다른 요소를 래핑하는 컨테이너이기 때문에 스타일링은 빌딩 블록(the IgbCardHeader, IgbCardContent,, IgbCardMedia 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);
}
css

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCardModule),
                typeof(IgbIconButtonModule),
                typeof(IgbIconModule),
                typeof(IgbRippleModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical" style="align-items: center">

    <style>
        igc-card {
            background-color: #011627;
        }

        igc-card-content,
        igc-card-header > *[slot="title"] {
            color: #FEFEFE;
        }

        igc-card-header > *[slot="subtitle"] {
            color: #ECAA53;
            opacity: 0.9;
        }

        igc-icon-button+igc-icon-button {
            margin-left: .625rem;
        }

        igc-icon {
            height: 0rem;
            width: 0rem;
        }
    </style>

    <div class="card-wrapper" style="max-width: 20rem; min-width: 13.75rem;">

        <IgbIcon @ref="@RegisterIconRef" />

        <IgbCard>
           <IgbCardMedia Height="10rem">
                <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" />
            </IgbCardMedia>

            <IgbCardHeader>
                <h3 style="font-size: 1.25rem;" slot="title">Jane Doe</h3>
                <h5 style="font-size: 1.00rem;" slot="subtitle">Professional Photographer</h5>
            </IgbCardHeader>

            <IgbCardContent>
                <p>Hi! I'm Jane, photographer and filmmaker.
                Photography is a way of feeling, of touching,
                of loving. What you have caught on film is captured forever...
                it remembers little things, long after you have
                forgotten everything.</p >
            </IgbCardContent>

            <IgbCardActions>
                <div slot="end">
                    <IgbIconButton IconName="twitter" Collection="material">
                        <IgbRipple />
                    </IgbIconButton>
                    <IgbIconButton IconName="facebook" Collection="material">
                        <IgbRipple />
                    </IgbIconButton>
                    <IgbIconButton IconName="instagram" Collection="material">
                        <IgbRipple />
                    </IgbIconButton>
                </div>
            </IgbCardActions>
        </IgbCard>
    </div>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();

            string twitterIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-1.13 6v.39a8.61 8.61 0 01-13.25 7.25 5.69 5.69 0 00.72 0 6 6 0 003.76-1.3 3 3 0 01-2.83-2.1 2.75 2.75 0 00.57.05 3 3 0 00.8-.1 3 3 0 01-2.43-3 3.13 3.13 0 001.37.38 3 3 0 01-.93-4 8.57 8.57 0 006.24 3.17 3.1 3.1 0 01-.08-.74 3 3 0 015.24-2A6.38 6.38 0 0019 6.22a3.07 3.07 0 01-1.36 1.68 6.22 6.22 0 001.74-.48A6.09 6.09 0 0117.87 9z'></path></svg>";
            string facebookIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 22zm0-20a10 10 0 00-1.727 19.841v-7.6h-2.61v-3.018h2.61V8.995A3.641 3.641 0 0114.16 5a21.367 21.367 0 012.332.119v2.7h-1.6c-1.255 0-1.5.6-1.5 1.471v1.929h2.993L16 14.245h-2.6v7.647A9.994 9.994 0 0012 2z'></path></svg>";
            string instagramIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-7 14.64A5.64 5.64 0 1117.64 12 5.65 5.65 0 0112 17.64zm5.86-10.18a1.32 1.32 0 111.32-1.32 1.32 1.32 0 01-1.32 1.32zM15.66 12A3.66 3.66 0 1112 8.34 3.66 3.66 0 0115.66 12z'></path></svg>";

            await this.RegisterIconRef.RegisterIconFromTextAsync("facebook", facebookIcon, "material");
            await this.RegisterIconRef.RegisterIconFromTextAsync("twitter", twitterIcon, "material");
            await this.RegisterIconRef.RegisterIconFromTextAsync("instagram", instagramIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Summary

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