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.
Ejemplo de panel de expansión Blazor
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 modulesusing 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<divclass="container vertical"><IgbExpansionPanel><h1slot="title">Golden Retriever</h1><h3slot="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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
La forma más sencilla de empezar a utilizar IgbExpansionPanel es la siguiente:
Vinculación a eventos
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 modulesusing 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: 1rem1.5rem;
color: white;
}
</style><divclass="container vertical"style="align-items: center;"><IgbExpansionPanelstyle="width: 100%"Opened="OnOpened"Closed="OnClosed"><h1slot="title">Golden Retriever</h1><h3slot="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><spanstyle="@ToastVisibility"id="fired-event">@ToastText</span></div>@code {publicstring SubtitleVisibility = "display: block;";
publicstring ToastVisibility = "display: none;";
publicstring ToastText = "Hello";
privatestring _visibleStyle = "display: block;";
privatestring _invisibleStyle = "display: none;";
private System.Timers.Timer _timer;
publicvoidOnOpened(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();
}
publicvoidOnClosed(IgbExpansionPanelComponentEventArgs args)
{
SubtitleVisibility = _visibleStyle;
ToastVisibility = _visibleStyle;
ToastText = "Closed event fired!";
_timer.Start();
}
}razor
Personalización de componentes
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 modulesusing 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><divclass="container vertical"><IgbExpansionPanelIndicatorPosition="ExpansionPanelIndicatorPosition.End"Opened="OnOpened"Closed="OnClosed"><h1slot="title">Golden Retriever</h1><h3slot="subtitle">Medium-large gun dog</h3><divslot="indicator">@IndicatorText</div><imgheight="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><IgbButtonhref="https://en.wikipedia.org/wiki/Golden_Retriever"Variant="ButtonVariant.Outlined"Target="ButtonBaseTarget._blank">Read more</IgbButton></IgbExpansionPanel></div>@code {publicstring IndicatorText = "Show more";
publicvoidOnOpened(IgbExpansionPanelComponentEventArgs args)
{
IndicatorText = "Show less";
}
publicvoidOnClosed(IgbExpansionPanelComponentEventArgs args)
{
IndicatorText = "Show more";
}
}razor
Navegación por teclado
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
Estilo
El componente Panel de expansión Ignite UI for Blazor expone varias partes CSS (header, indicator, title,y subtitle content) para proporcionar un control total sobre su estilo.
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 modulesusing 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><divclass="container vertical"><IgbExpansionPanelIndicatorPosition="ExpansionPanelIndicatorPosition.End"><h1slot="title">Golden Retriever</h1><h3slot="subtitle">Medium-large gun dog</h3><imgheight="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><IgbButtonhref="https://en.wikipedia.org/wiki/Golden_Retriever"Variant="ButtonVariant.Contained"Target="ButtonBaseTarget._blank">Read more</IgbButton></IgbExpansionPanel></div>razor