Blazor 확장 패널 개요

Ignite UI for Blazor는 두 가지 상태(축소 또는 확장)로 렌더링할 수 있는 가벼운 아코디언 구성 요소입니다. 확장 패널은 마우스 클릭 또는 키보드 상호 작용을 사용하여 토글할 수 있습니다.

Blazor Expansion Panel Example

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

await builder.Build().RunAsync();csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbExpansionPanel>
        <h1 slot="title">Golden Retriever</h1>
        <h3 slot="subtitle">Medium-large gun dog</h3>
        <span>
            The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
            and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
            to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
            are easy to train to basic or advanced obedience standards.
        </span>
    </IgbExpansionPanel>
</div>razorコピー

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.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Usage

​IgbExpansionPanel 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

Binding to events

확장 패널 구성요소는 다음 이벤트를 발생시킵니다.

다음 샘플은 패널의 현재 상태에 따라 subtitle 표시하거나 숨기도록 구성 요소에 로직을 추가하는 방법을 보여줍니다.

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

await builder.Build().RunAsync();csコピー

@using IgniteUI.Blazor.Controls

<style>
span#fired-event {
background-color: rgba(0,0,0,0.5);
border-radius: 26px;
padding: 1rem 1.5rem;
color: white;
}
</style>

<div class="container vertical" style="align-items: center;">
    <IgbExpansionPanel style="width: 100%" Opened="OnOpened" Closed="OnClosed">
        <h1 slot="title">Golden Retriever</h1>
        <h3 slot="subtitle" style="@SubtitleVisibility">Medium-large gun dog</h3>
        <span>
            The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
            and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
            to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
            are easy to train to basic or advanced obedience standards.
        </span>
    </IgbExpansionPanel>
    <span style="@ToastVisibility" id="fired-event">@ToastText</span>
</div>

@code {
    
    public string SubtitleVisibility = "display: block;";
    public string ToastVisibility = "display: none;";
    public string ToastText = "Hello";

    private string _visibleStyle = "display: block;";
    private string _invisibleStyle = "display: none;";
    private System.Timers.Timer _timer;

    public void OnOpened(IgbExpansionPanelComponentEventArgs args)
    {
        SubtitleVisibility = _invisibleStyle;
        ToastVisibility = _visibleStyle;
        ToastText = "Opened event fired!";

        if (_timer == null)
        {
            _timer = new System.Timers.Timer(2000);
            _timer.Elapsed += (s, e) =>
            {
                ToastVisibility = _invisibleStyle;
                _timer.Enabled = false;
                StateHasChanged();
            };
        }
        _timer.Start();
    }

    public void OnClosed(IgbExpansionPanelComponentEventArgs args)
    {
        SubtitleVisibility = _visibleStyle;
        ToastVisibility = _visibleStyle;
        ToastText = "Closed event fired!";
        _timer.Start();
    }
}razorコピー

Component Customization

​IgbExpansionPanel 컨트롤을 사용하면 모든 종류의 콘텐츠를 본문 내부에 추가할 수 있습니다. 입력, 차트 및 기타 확장 패널을 렌더링할 수 있습니다!

​IgbExpansionPanel 사용하면 노출된 제목, 하위 제목 및 표시기 슬롯을 통해 헤더를 쉽게 사용자 정의할 수 있습니다.

확장 표시기의 위치 구성은 확장 패널의 속성을 통해 IndicatorPosition 수행할 수 있습니다. 가능한 옵션은 start, end 또는 none 입니다.

다음 코드 샘플은 구성 요소의 버튼이 오른쪽으로 이동하도록 구성하는 방법을 보여줍니다.

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

await builder.Build().RunAsync();csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-expansion-panel {
max-width: 500px;
min-width: 300px;
width: 100%;
border: 1px solid rgba(171, 171, 171, 0.3);
padding: 0;
}

igc-button {
display: flex;
margin-top: 16px;
}

a {
text-decoration: none;
}

img {
width: 100%;
margin-bottom: 8px;
}
</style>

<div class="container vertical">
    <IgbExpansionPanel IndicatorPosition="ExpansionPanelIndicatorPosition.End" Opened="OnOpened" Closed="OnClosed">
        <h1 slot="title">Golden Retriever</h1>
        <h3 slot="subtitle">Medium-large gun dog</h3>
        <div slot="indicator">@IndicatorText</div>
        <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
        <span>
            The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
            and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
            to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
            are easy to train to basic or advanced obedience standards.
        </span>
        <IgbButton href="https://en.wikipedia.org/wiki/Golden_Retriever" Variant="ButtonVariant.Outlined" Target="ButtonBaseTarget._blank">Read more</IgbButton>
    </IgbExpansionPanel>
</div>

@code {
    
    public string IndicatorText = "Show more";

    public void OnOpened(IgbExpansionPanelComponentEventArgs args)
    {
        IndicatorText = "Show less";
    }

    public void OnClosed(IgbExpansionPanelComponentEventArgs args)
    {
        IndicatorText = "Show more";
    }
}razorコピー

Keyboard Navigation

Ignite UI for Blazor W3C 접근성 표준을 준수하며 사용하기 편리합니다.

주요 조합

• Alt + ↓- 초점이 맞춰진 패널 확장
• Alt + ↑- 초점이 맞춰진 패널 축소
• 스페이스바 / Enter- 초점이 맞춰진 패널의 확장 상태를 전환합니다.

Styling

구성 요소는 IgbExpansionPanel 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있습니다.

이름	설명
header	확장 표시기, 제목 및 부제목의 컨테이너입니다.
title	제목 컨테이너입니다.
subtitle	자막 컨테이너입니다.
indicator	지표 컨테이너입니다.
content	확장 패널의 콘텐츠 래퍼입니다.

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base) {
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base)::before {
  background-color: var(--ig-warn-500);
}

igc-expansion-panel::part(indicator) {
  color: var(--ig-warn-500);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}
css

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

await builder.Build().RunAsync();csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-expansion-panel {
width: 500px;
background-color: #18203b;
color: white;
border-radius: 8px;
}

igc-button::part(base) {
color: #18203b;
}

igc-button::part(base)::before {
background-color: #ffd351;
}

igc-expansion-panel::part(indicator) {
color: #ffd351;
}

igc-expansion-panel::part(header) {
background-color: #18203b;
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
color: #ffd351;
}

igc-button {
display: flex;
margin-top: 16px;
}

a {
text-decoration: none;
}

img {
width: 100%;
margin-bottom: 8px;
border-radius: 8px;
}
</style>

<div class="container vertical">
    <IgbExpansionPanel IndicatorPosition="ExpansionPanelIndicatorPosition.End">
        <h1 slot="title">Golden Retriever</h1>
        <h3 slot="subtitle">Medium-large gun dog</h3>
        <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
        <span>
            The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
            and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
            to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
            are easy to train to basic or advanced obedience standards.
        </span>
        <IgbButton href="https://en.wikipedia.org/wiki/Golden_Retriever" Variant="ButtonVariant.Contained" Target="ButtonBaseTarget._blank">Read more</IgbButton>
    </IgbExpansionPanel>
</div>razorコピー

API References

• IgbExpansionPanel
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브