Descripción general de Blazor botones

    The Blazor Button Component lets you enable clickable elements that trigger actions in your Blazor app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the Blazor Button OnClick event, toggle the Blazor button, disable the Blazor button, and more.

    Blazor Button Example

    Usage

    Antes de utilizar el IgbButton, debe registrarlo de la siguiente manera:

    // in Program.cs file

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbButton 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" />

    <IgbButton />

    Prefix / Suffix

    Con las ranuras prefix y suffix del componente IgbButton, podemos agregar contenido diferente antes y después del contenido principal del botón.

    <IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgbButton>

    Type

    El componente del botón cambiará su estructura interna de un <button> a un elemento de tipo <a> cuando se establezca el atributo Href. En ese caso, el botón puede considerarse como un enlace normal. Configurar el atributo Href le permitirá configurar también los atributos Rel, Target y Download. En el caso de que el componente del botón utilice un elemento <button> real internamente, podemos especificar su DisplayType estableciendo la propiedad en cualquiera de los siguientes valores:

    • Submit: cuando queremos enviar los datos del formulario.
    • reset- cuando queremos restablecer los datos del formulario a sus valores iniciales
    • button: cuando queremos agregar un botón con una funcionalidad personalizada en cualquier lugar de una página web

    Button Variants

    Contained Button

    Utilice el Variant atributo para agregar un botón contenido simple en la plantilla de componentes. Tenga en cuenta que si no establece variant, de forma predeterminada se establecerá en contenido.

    <IgbButton Variant="@ButtonVariant.Contained" />

    Outlined Button

    Todo lo que tiene que hacer para crear un outlined botón es cambiar el valor de la Variant propiedad:

    <IgbButton Variant="@ButtonVariant.Outlined" />

    Flat Button

    Analógicamente podemos pasar a la variante flat.

    <IgbButton Variant="@ButtonVariant.Flat" />

    Floating Action Button

    Podemos crear un botón de acción flotante configurando la Variant propiedad en fab:

    <IgbButton Variant="@ButtonVariant.Fab" />

    Button Sizing

    Los usuarios pueden cambiar el tamaño de la IgbButton variable--ig-size CSS. En el siguiente ejemplo, agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera, cada vez que se seleccione uno, cambiaremos el tamaño del botón.

    <IgbRadioGroup id="radioGroup" Alignment="ContentOrientation.Horizontal" >
    <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
    <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
    <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
</IgbRadioGroup>

@code {
    private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;

    protected override void OnInitialized()
    {
    }

    public void OnSmallClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Small;
    }

    public void OnMediumClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Medium;
    }

    public void OnLargeClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Large;
    }
}

    El resultado de implementar el código anterior debería verse similar al siguiente:

    Download

    Al establecer la Download propiedad, se pedirá al usuario que guarde la URL vinculada en lugar de navegar a ella.

    <IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://es.infragistics.com/" Target="@ButtonBaseTarget._blank">
    Download
</IgbButton>

    Styling

    Expone IgbButton tres partes CSS que podemos usar para el estilo:

    Nombre Descripción
    base El elemento button nativo del componente igc-button.
    prefix Contenedor de prefijos del componente igc-button.
    suffix Contenedor de sufijos del componente igc-button.

    La base parte CSS nos permite estilizar el elemento envuelto (<button> o <a>).

    igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}

    API References

    Additional Resources