Descripción general del panel de expansión de Blazor

El panel de expansión Ignite UI for Blazor es un componente de acordeón liviano que se puede renderizar en dos estados: contraído o expandido. El panel de expansión se puede alternar con un clic del mouse o interacciones con el teclado.

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

La forma más sencilla de empezar a utilizar IgbExpansionPanel es la siguiente:

Binding to events

El componente Panel de expansión genera los siguientes eventos:

El siguiente ejemplo demuestra cómo podemos agregar algo de lógica a nuestro componente para que muestre/oculte el subtitle según el estado actual del panel.

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

El control IgbExpansionPanel permite agregar todo tipo de contenido dentro de su cuerpo. ¡Puede representar entradas, gráficos e incluso otros paneles de expansión!

El IgbExpansionPanel permite una fácil personalización del encabezado a través de las ranuras de título, subtítulo e indicador expuestas.

La configuración de la posición del indicador de expansión se puede realizar a través de la IndicatorPosition propiedad del Panel de expansión. Las opciones posibles son inicio, fin o ninguna.

El siguiente ejemplo de código demuestra cómo configurar el botón del componente para que vaya al lado derecho.

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

La navegación por teclado del panel de expansión Ignite UI for Blazor cumple con los estándares de accesibilidad del W3C y es cómoda de usar.

Combinaciones de teclas

• Alt + ↓: expande el panel enfocado
• Alt + ↑: contrae el panel enfocado
• Espacio / Entrar: alterna el estado de expansión del panel enfocado

Styling

El IgbExpansionPanel componente expone varias partes CSS, lo que le proporciona un control total sobre su estilo:

Nombre	Descripción
header	El contenedor del indicador de expansión, título y subtítulo.
title	El contenedor de títulos.
subtitle	El contenedor de subtítulos.
indicator	El contenedor del indicador.
content	El contenedor de contenido del panel de expansión.

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 Foros
• Ignite UI for Blazor GitHub