Blazor Componente de lista desplegable

Rica en funciones, la lista desplegable de Blazor ofrece filtrado listo para usar, accesibilidad, valores preseleccionados, enlace de datos flexible, agrupación, personalización de la interfaz de usuario y más. Lo que este componente hace prácticamente es reemplazar de manera efectiva y fácil las etiquetas de selección HTML, lo que permite a los usuarios elegir rápidamente un valor no editable de un conjunto predefinido de varias opciones.

El componente desplegable Ignite UI for Blazor muestra una lista de alternancia de valores predefinidos y permite a los usuarios seleccionar fácilmente un solo elemento de opción con un clic. Se puede configurar rápidamente para que actúe como un menú desplegable de Blazor o simplemente puede usarlo para brindar información visual más útil agrupando datos. Además, con la agrupación se pueden utilizar tanto datos planos como jerárquicos.

Con nuestro componente, obtiene todas las funciones y opciones de personalización que necesita para su proyecto: personalizaciones de estilo, opciones de ubicación Blazor desplegable, plantillas y la capacidad de cambiar qué y cómo se muestra en el encabezado, pie de página, cuerpo, lista, etc.

El siguiente ejemplo de lista desplegable de Blazor muestra el uso de un menú desplegable de Blazor interactivo simple en acción con tres opciones básicas para elegir. Vea cómo funciona.

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(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
        );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Option</IgbButton>
        <IgbDropdownItem>Option 1</IgbDropdownItem>
        <IgbDropdownItem>Option 2</IgbDropdownItem>
        <IgbDropdownItem>Option 3</IgbDropdownItem>
    </IgbDropdown>
</div>

@code {
    

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

Antes de utilizar IgbDropdown, debe registrarlo de la siguiente manera:

// in Program.cs file

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

Target

La lista desplegable Blazor se posiciona en relación con su destino. La ranura target le permite proporcionar un componente integrado que alterna la propiedad open al hacer clic. En algunos casos, querrá utilizar un destino externo u otro evento para alternar la apertura del menú desplegable. Puede lograr esto utilizando los métodos Show, Hide y Toggle que le permiten proporcionar el destino como parámetro. De forma predeterminada, la lista desplegable utiliza la posición CSS absolute. Deberá establecer IgbPositionStrategy del menú desplegable Blazor en fixed cuando el elemento de destino esté dentro de un contenedor fixed , pero el menú desplegable no lo esté. La lista desplegable se dimensiona automáticamente en función de su contenido; si desea que la lista tenga el mismo ancho que el destino, debe establecer la propiedad SameWidth en true.

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(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <div class="options horizontal">
       <IgbButton style="margin-right: 20px;" @onclick=OnClick>Toggle Dropdown</IgbButton>

       <IgbDropdown @ref="DropDownRef" KeepOpenOnOutsideClick="true" PositionStrategy="DropdownPositionStrategy.Fixed">
           <IgbButton @ref="ButtonRef" slot="target" style="margin-right: 20px;">Dropdown</IgbButton>

           <IgbDropdownItem>Option 1</IgbDropdownItem>
           <IgbDropdownItem>Option 2</IgbDropdownItem>
           <IgbDropdownItem>Option 3</IgbDropdownItem>
       </IgbDropdown>
    </div>
</div>

@code {
    

    IgbDropdown DropDownRef { get; set; }
    IgbButton ButtonRef { get; set; }

    private void OnClick(MouseEventArgs e)
    {
        this.DropDownRef.Toggle();
    }
}razor

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

Position

La ubicación preferida del menú desplegable Blazor se puede establecer mediante la Placement propiedad. La ubicación predeterminada del menú desplegable es bottom-start. La Flip propiedad determina si se debe invertir la ubicación si no hay suficiente espacio para mostrar el menú desplegable en la ubicación especificada. La distancia desde la lista desplegable Blazor hasta su destino se puede especificar mediante la Distance propiedad.

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(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
  );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
igc-dropdown::part(list) {
height: 200px;
}

.center {
align-items: center;
justify-content: center;
}
</style>

<div class="container sample center">
    <IgbDropdown @ref="DropDownRef" Distance="5" Change=OnChange Placement=@placement>
        <IgbButton slot="target">Option</IgbButton>
            <IgbDropdownItem Value="Top">@DropdownPlacement.Top</IgbDropdownItem>
            <IgbDropdownItem Value="TopStart">@DropdownPlacement.TopStart</IgbDropdownItem>
            <IgbDropdownItem Value="TopEnd">@DropdownPlacement.TopEnd</IgbDropdownItem>
            <IgbDropdownItem Value="Bottom">@DropdownPlacement.Bottom</IgbDropdownItem>
            <IgbDropdownItem Value="BottomStart">@DropdownPlacement.BottomStart</IgbDropdownItem>
            <IgbDropdownItem Value="BottomEnd">@DropdownPlacement.BottomEnd</IgbDropdownItem>
            <IgbDropdownItem Value="Left">@DropdownPlacement.Left</IgbDropdownItem>
            <IgbDropdownItem Value="LeftStart">@DropdownPlacement.LeftStart</IgbDropdownItem>
            <IgbDropdownItem Value="LeftEnd">@DropdownPlacement.LeftEnd</IgbDropdownItem>
            <IgbDropdownItem Value="Right">@DropdownPlacement.Right</IgbDropdownItem>
            <IgbDropdownItem Value="RightStart">@DropdownPlacement.RightStart</IgbDropdownItem>
            <IgbDropdownItem Value="RightEnd">@DropdownPlacement.RightEnd</IgbDropdownItem>
    </IgbDropdown>
</div>

    @code {
    

    IgbDropdown DropDownRef { get; set; }
    DropdownPlacement placement { get; set; }

    private void OnChange(IgbDropdownItemComponentEventArgs e)
    {
        Console.WriteLine(e.Detail.Value);

        switch (e.Detail.Value)
        {
            case "Top":
                placement = DropdownPlacement.Top;
                break;
            case "TopStart":
                placement = DropdownPlacement.TopStart;
                break;
            case "TopEnd":
                placement = DropdownPlacement.TopEnd;
                break;
            case "Bottom":
                placement = DropdownPlacement.Bottom;
                break;
            case "BottomStart":
                placement = DropdownPlacement.BottomStart;
                break;
            case "BottomEnd":
                placement = DropdownPlacement.BottomEnd;
                break;
            case "Left":
                placement = DropdownPlacement.Left;
                break;
            case "LeftStart":
                placement = DropdownPlacement.LeftStart;
                break;
            case "LeftEnd":
                placement = DropdownPlacement.LeftEnd;
                break;
            case "Right":
                placement = DropdownPlacement.Right;
                break;
            case "RightStart":
                placement = DropdownPlacement.RightStart;
                break;
            case "RightEnd":
                placement = DropdownPlacement.RightEnd;
                break;
            default:
                Console.WriteLine("Unknown placement value");
                break;
        }
    }
}razor

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

Selección

Emite IgbDropdown el evento cuando el Change usuario selecciona un elemento. El Select método del menú desplegable le permite seleccionar un elemento por su índice o valor.

Item

IgbDropdownItem representa un elemento seleccionable en la lista desplegable. Puede predefinir un elemento seleccionado configurando la propiedad Selected. También puede deshabilitar un elemento para que no se pueda seleccionar usando la propiedad Disabled. IgbDropdownItem tiene una ranura predeterminada que le permite especificar el contenido del elemento. También puede proporcionar contenido personalizado para que se represente antes o después del contenido utilizando las ranuras prefix y suffix. La propiedad Value le permite proporcionar un valor personalizado a un artículo. Si el Value no está establecido, se resuelve en el contenido de texto del elemento.

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(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
    );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Category</IgbButton>
        <IgbDropdownItem>
            <IgbIcon @ref=HotelIcon slot="prefix" IconName="hotel-icon" Collection="material"></IgbIcon>
            Hotel
        </IgbDropdownItem>
        <IgbDropdownItem Disabled="true">
            <IgbIcon @ref=GroceryIcon slot="prefix" IconName="grocery-icon" Collection="material"></IgbIcon>
            Grocery
        </IgbDropdownItem>
        <IgbDropdownItem Selected="true">
            <IgbIcon @ref=RestaurantIcon slot="prefix" IconName="restaurant-icon" Collection="material"></IgbIcon>
            Restaurant
        </IgbDropdownItem>
    </IgbDropdown>
</div>

@code {
    

    IgbIcon HotelIcon { get; set; }
    IgbIcon GroceryIcon { get; set; }
    IgbIcon RestaurantIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.HotelIcon != null)
        {
            await this.HotelIcon.EnsureReady();
            //hotel-icon
            string hotelIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3 1.34 3 3 3zm0-4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm12-3h-8v8H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4zm2 8h-8V9h6c1.1 0 2 .9 2 2v4z'/></svg>";
            await this.HotelIcon.RegisterIconFromTextAsync("hotel-icon", hotelIcon, "material");
        }

        if (firstRender && this.GroceryIcon != null)
        {
            await this.GroceryIcon.EnsureReady();
            //grocery-icon
            string groceryIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-1.45-5c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6z'/></svg>";
            await this.GroceryIcon.RegisterIconFromTextAsync("grocery-icon", groceryIcon, "material");
        }

        if (firstRender && this.RestaurantIcon != null)
        {
            await this.RestaurantIcon.EnsureReady();
            //restaurant-icon
            string restaurantIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M16 6v8h3v8h2V2c-2.76 0-5 2.24-5 4zm-5 3H9V2H7v7H5V2H3v7c0 2.21 1.79 4 4 4v9h2v-9c2.21 0 4-1.79 4-4V2h-2v7z'/></svg>";
            await this.RestaurantIcon.RegisterIconFromTextAsync("restaurant-icon", restaurantIcon, "material");
        }
    }
}razor

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

Puede utilizar IgbDropdownHeader para proporcionar un encabezado para un grupo de elementos.

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(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbDropdownHeaderModule),
                typeof(IgbButtonModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Phone Settings</IgbButton>
        @*<IgbDropDownHeader>
            <span slot="label">Ringer</span>
        </IgbDropDownHeader>*@
        <IgbDropdownItem Selected="true">Ring
            <IgbIcon @ref=RingIcon slot="prefix" IconName="ring-icon" Collection="material"></IgbIcon>
        </IgbDropdownItem>
        <IgbDropdownItem>Vibrate
            <IgbIcon @ref=VibrateIcon slot="prefix" IconName="vibrate-icon" Collection="material"></IgbIcon>
        </IgbDropdownItem>
        <IgbDropdownItem>Silent
            <IgbIcon @ref=SilentIcon slot="prefix" IconName="silent-icon" Collection="material"></IgbIcon>
        </IgbDropdownItem>
    </IgbDropdown>
</div>

@code {
    

    IgbIcon RingIcon { get; set; }
    IgbIcon VibrateIcon { get; set; }
    IgbIcon SilentIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.RingIcon != null)
        {
            await this.RingIcon.EnsureReady();
            //ring-icon
            string ringIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM7.58 4.08L6.15 2.65C3.75 4.48 2.17 7.3 2.03 10.5h2c.15-2.65 1.51-4.97 3.55-6.42zm12.39 6.42h2c-.15-3.2-1.73-6.02-4.12-7.85l-1.42 1.43c2.02 1.45 3.39 3.77 3.54 6.42z'/></svg>";
            await this.RingIcon.RegisterIconFromTextAsync("ring-icon", ringIcon, "material");
        }

        if (firstRender && this.VibrateIcon != null)
        {
            await this.VibrateIcon.EnsureReady();
            //vibrate-icon
            string vibrateIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M0 15h2V9H0v6zm3 2h2V7H3v10zm19-8v6h2V9h-2zm-3 8h2V7h-2v10zM16.5 3h-9C6.67 3 6 3.67 6 4.5v15c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-15c0-.83-.67-1.5-1.5-1.5zM16 19H8V5h8v14z'/></svg>";
            await this.VibrateIcon.RegisterIconFromTextAsync("vibrate-icon", vibrateIcon, "material");
        }

        if (firstRender && this.SilentIcon != null)
        {
            await this.SilentIcon.EnsureReady();
            //silent-icon
            string silentIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-15.5c2.49 0 4 2.02 4 4.5v.1l2 2V11c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.24.06-.47.15-.69.23l1.64 1.64c.18-.02.36-.05.55-.05zM5.41 3.35L4 4.76l2.81 2.81C6.29 8.57 6 9.74 6 11v5l-2 2v1h14.24l1.74 1.74 1.41-1.41L5.41 3.35zM16 17H8v-6c0-.68.12-1.32.34-1.9L16 16.76V17z'/></svg>";
            await this.SilentIcon.RegisterIconFromTextAsync("silent-icon", silentIcon, "material");
        }
    }
}razor

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

Group

Los elementos del menú desplegable de Blazor también se pueden agrupar mediante el IgbDropdownGroup, lo que facilita a los usuarios la diferenciación de categorías separadas. Véalo en acción en este ejemplo de lista desplegable de Blazor:

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(IgbDropdownModule),
                typeof(IgbDropdownGroupModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule),
                typeof(IgbIconModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Countries</IgbButton>
        <IgbDropdownGroup>
            <span slot="label">Europe</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Germany
              <span slot="suffix">DE</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              France
              <span slot="suffix">FR</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Spain
              <span slot="suffix">DE</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

        <IgbDropdownGroup>
            <span slot="label">North America</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              USA
              <span slot="suffix">US</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Canada
              <span slot="suffix">CA</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Mexico
              <span slot="suffix">MX</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

    </IgbDropdown>
</div>

@code {
    

    private IgbIcon LocationIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.LocationIcon != null)
        {
            await this.LocationIcon.EnsureReady();
            //drop-icon
            string dropIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z'/></svg>";
            await this.LocationIcon.RegisterIconFromTextAsync("drop-icon", dropIcon, "material");
        }
    }
}razor

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

Scroll Strategy

La propiedad ScrollStrategy determina el comportamiento del componente durante el desplazamiento del contenedor del elemento de destino. El valor predeterminado es scroll, lo que significa que el menú desplegable se desplazará con su destino. Establecer la propiedad en block bloqueará el desplazamiento si se abre el menú desplegable. También puede configurar la propiedad para que se close, lo que significa que el menú desplegable se cerrará automáticamente al desplazarse.

Keep Open

De forma predeterminada, el menú desplegable se cierra automáticamente cuando el usuario hace clic fuera de él o selecciona un elemento. Puede evitar este comportamiento utilizando las propiedades KeepOpenOnOutsideClick y KeepOpenOnSelect.

Styling

Puede cambiar la apariencia del menú desplegable y sus elementos utilizando las partes CSS expuestas. IgbDropdown expone partes base y list, IgbDropdownItem expone partes prefix, content y suffix y IgbDropdownGroup expone parte label.

igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  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(IgbDropdownModule),
                typeof(IgbDropdownGroupModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule),
                typeof(IgbIconModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
igc-dropdown::part(list) {
height: 220px;
}

igc-dropdown-item[selected] {
background: #28a745;
}

igc-dropdown-group::part(label) {
display: flex;
justify-content: center;
}
</style>

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Countries</IgbButton>
        <IgbDropdownGroup>
            <span slot="label">Europe</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Germany
              <span slot="suffix">DE</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              France
              <span slot="suffix">FR</span>
            </IgbDropdownItem>
            <IgbDropdownItem Selected="true">
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Spain
              <span slot="suffix">DE</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

        <IgbDropdownGroup>
            <span slot="label">North America</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              USA
              <span slot="suffix">US</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Canada
              <span slot="suffix">CA</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Mexico
              <span slot="suffix">MX</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

    </IgbDropdown>
</div>

@code {
    

    private IgbIcon LocationIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.LocationIcon != null)
        {
            await this.LocationIcon.EnsureReady();
            //drop-icon
            string dropIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z'/></svg>";
            await this.LocationIcon.RegisterIconFromTextAsync("drop-icon", dropIcon, "material");
        }
    }
}razor

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

Target

Position

Selección

Item

Header

Group

Scroll Strategy

Keep Open

Styling

API Reference

Additional Resources

Blazor Componente de lista desplegable - Descripción general

Blazor Dropdown Example

How to use the Dropdown List with Ignite UI for Blazor

Target

Position

Selección

Item

Header

Group

Scroll Strategy

Keep Open

Styling

API Reference

Additional Resources