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.

    Ejemplo de botón de icono de Blazor

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    Uso

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbIconButton componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor
    <IgbIconButton IconName="thumb-up" Collection="material" />
    razor

    Ejemplos

    Variante

    Al igual que los componentes de botón normales, el botón de icono admite varias variantes: flat (predeterminado), contained y outlined; Para cambiar el tipo de botón de icono, establezca el atributo de variant del botón de icono.

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    Tamaño

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    igc-icon-button {
        --ig-size: var(--ig-size-medium);
    }
    css
    <IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />
    razor

    Tipo

    El componente del botón de icono cambiará su estructura interna de <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón del icono puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download del botón de icono.

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

    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 botón del ícono horizontalmente.

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

    Estilo

    El componente del botón de icono expone dos partes CSS: base e icon que le permiten diseñar el elemento envolvente (<button> o <a>) y el elemento <igc-icon> envolvente;

    igc-icon-button::part(base) {
      padding: 12px;
      color: olive;
    }
    
    igc-icon-button::part(icon) {
      --size: 32px;
    }
    css

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales