El componente Ignite UI for Blazor ComboBox permite definir plantillas personalizadas para diferentes áreas, como elementos, encabezados de grupo, listas vacías e iconos.
ComboBox Templates Example
EXAMPLE
MODULES
DATA
RAZOR
JS
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassCity {
publicstring Id { get; set; }
publicstring Name { get; set; }
publicstring Country { get; set; }
}
publicclassSampleData {
publicstatic List<City> Cities = GetCities();
publicstatic List<City> GetCities() {
var data = new List<City> {
new City {
Id = "UK01",
Name = "London",
Country = "United Kingdom",
},
new City {
Id = "UK02",
Name = "Manchester",
Country = "United Kingdom",
},
new City {
Id = "UK03",
Name = "Birmingham",
Country = "United Kingdom",
},
new City {
Id = "UK04",
Name = "Glasgow",
Country = "United Kingdom",
},
new City {
Id = "UK05",
Name = "Liverpool",
Country = "United Kingdom",
},
new City {
Id = "US01",
Name = "New York",
Country = "United States of America",
},
new City {
Id = "US02",
Name = "Miami",
Country = "United States of America",
},
new City {
Id = "US03",
Name = "Philadelphia",
Country = "United States of America",
},
new City {
Id = "US04",
Name = "Chicago",
Country = "United States of America",
},
new City {
Id = "US05",
Name = "Springfield",
Country = "United States of America",
},
new City {
Id = "US06",
Name = "Los Angeles",
Country = "United States of America",
},
new City {
Id = "US07",
Name = "Houston",
Country = "United States of America",
},
new City {
Id = "US08",
Name = "Phoenix",
Country = "United States of America",
},
new City {
Id = "US09",
Name = "San Diego",
Country = "United States of America",
},
new City {
Id = "US10",
Name = "Dallas",
Country = "United States of America",
},
new City {
Id = "BG01",
Name = "Sofia",
Country = "Bulgaria",
},
new City {
Id = "BG02",
Name = "Plovdiv",
Country = "Bulgaria",
},
new City {
Id = "BG03",
Name = "Varna",
Country = "Bulgaria",
},
new City {
Id = "BG04",
Name = "Burgas",
Country = "Bulgaria",
},
new City {
Id = "IT01",
Name = "Rome",
Country = "Italy",
},
new City {
Id = "IT02",
Name = "Milan",
Country = "Italy",
},
new City {
Id = "IT03",
Name = "Naples",
Country = "Italy",
},
new City {
Id = "IT04",
Name = "Turin",
Country = "Italy",
},
new City {
Id = "IT05",
Name = "Palermo",
Country = "Italy",
},
new City {
Id = "IT06",
Name = "Florence",
Country = "Italy",
},
};
return data;
}
}
}cs
itemTemplate es una plantilla personalizada que, si se define, debe usarse al representar elementos en la lista de opciones.
Para crear una plantilla de los elementos en una aplicación Blazor, debe definir una plantilla en un archivo JavaScript independiente. Vamos a crear un nuevo archivo en el wwwroot directorio llamado templates.js.
En este archivo podemos declarar una nueva plantilla de elemento así:
Asegúrese de incluir el archivo templates.js en index.html en wwwroot.
Luego, en nuestra aplicación podemos hacer referencia a la plantilla que declaramos mediante la propiedad ItemTemplateScript.
Además de las plantillas personalizadas, el componente ComboBox de Ignite UI for Blazor expone varias ranuras que permiten a los usuarios pasar contenido personalizado a diferentes partes del combo.
Header Slot
Para representar un encabezado personalizado encima de la lista de opciones, pase el contenido a la ranura del header:
<IgbCombo><headerslot="header">
Header content goes here
</header></IgbCombo>razor
Footer Slot
Para representar un pie de página personalizado debajo de la lista de opciones, pase el contenido a la ranura del pie footer:
<IgbCombo><footerslot="footer">
Footer content goes here
</footer></IgbCombo>razor
Empty List Slot
Para representar un contenido personalizado cuando la operación de filtrado no devuelve ningún resultado, utilice el espacio empty:
