Descripción general del botón de icono de Blazor

    El componente Botón de icono de Ignite UI for Blazor permite a los desarrolladores utilizar iconos registrados como botones en su aplicación. Lleva todas las características del componente de icono, pero también agrega características del componente de botón.

    Blazor Icon Button Example

    Usage

    Antes de usarlosIgbIconButton, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbIconButton componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbIconButton IconName="thumb-up" Collection="material" />

    Examples

    Variant

    Similar a los componentes de botones normales, el botón icono soporta varias variantes -flat(por defecto),contained youtlined; Para cambiar el tipo de botón de icono, establece elvariant atributo del botón icono.

    <IgbIconButton IconName="search" Variant="@IconButtonVariant.Contained" Collection="material" />

    Tamaño

    El tamaño del botón puede cambiarse utilizando la--ig-size variable CSS a cualquiera de los tres tamaños soportados:--ig-size-small,--ig-size-medium,--ig-size-large (por defecto).

    igc-icon-button {
    --ig-size: var(--ig-size-medium);
}

    <IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />

    Type

    El componente icono de botón cambiará su estructura interna de<button> a<a> un elemento tipo cuando se establece elhref atributo. En ese caso, el botón icono puede considerarse un enlace normal. Configurar elhref atributo te permitirá también establecer elrel,target, ydownload atributos del botón icono.

    <IgbIconButton IconName="thumb-up" Collection="material" Href="https://duckduckgo.com" Target="_blank" />

    Mirrored

    Algunos iconos deben verse un poco diferentes cuando se usan en modo de derecha a izquierda (RTL). Por eso proporcionamos unmirrored atributo que, al activarse, gira el botón del icono horizontalmente.

    <IgbIconButton IconName="thumb-up" Collection="material" Mirrored="true" />

    Styling

    ElIgbIconButton componente expone dos partes CSS —basequeicon te permiten estilizar el elemento de envolvimiento (<button>o<a>) y el elemento envolvido<igc-icon>.

    igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

    API References

    Additional Resources