El componente Blazor Icon le permite mostrar fácilmente la fuente o elegir entre un gran conjunto de íconos SVG predefinidos, pero también le brinda la posibilidad de crear íconos de fuente personalizados para su proyecto. Beneficiándose de una serie de atributos, puede definir o cambiar el tamaño del icono en uso o aplicarle diferentes estilos.
Ejemplo de icono Blazor
EXAMPLE
MODULES
RAZOR
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 modulesnamespaceInfragistics.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 Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-small {
--ig-size: var(--ig-size-small);
}
.size-medium {
--ig-size: var(--ig-size-medium);
}
.size-large {
--ig-size: var(--ig-size-large);
}css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Blazor y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
Antes de utilizar IgbIcon, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
razor
También necesitará vincular un archivo CSS adicional para aplicar el estilo al componente IgbIcon. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:
El IgbIcon no contiene ningún ícono por sí solo. Es un conducto para mostrar cualquier imagen SVG registrada.
Agregar iconos
Para registrar una imagen como ícono, todo lo que necesita hacer es llamar a uno de los 2 métodos de "registro" en un único elemento IgbIcon que le permite agregar íconos a una colección de íconos en su página.
El método RegisterIcon le permite registrar una imagen SVG como un icono desde un archivo externo:
Luego lo usaría de la misma manera que se describe en el ejemplo de componente anterior.
Tamaño
El componente de ícono admite tres tamaños de ícono: small, medium (predeterminado) y large. Para cambiar el tamaño del icono, puede utilizar la variable CSS--ig-size de la siguiente manera:
igc-icon {
--ig-size: var(--ig-size-large);
}
css
<IgbIconSize="@SizableComponentSize.Large">razor
EXAMPLE
MODULES
RAZOR
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 modulesnamespaceInfragistics.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 Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-small {
--ig-size: var(--ig-size-small);
}
.size-medium {
--ig-size: var(--ig-size-medium);
}
.size-large {
--ig-size: var(--ig-size-large);
}css
reflejado
Algunos íconos deben verse un poco diferentes cuando se usan en el modo De derecha a izquierda (RTL). Por ese motivo, proporcionamos un atributo mirrored que, cuando se configura, voltea el ícono horizontalmente.
Se puede aplicar estilo al componente de icono aplicando estilos directamente al elemento IgbIcon;
igc-icon {
--size: 48px;
color: olive;
}
css
EXAMPLE
MODULES
RAZOR
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 modulesnamespaceInfragistics.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 Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs