Descripción general del botón Blazor
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 necesitará vincular un archivo CSS adicional para aplicar el estilo al componente IgbButton
. 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:
<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 inicialesbutton
: cuando queremos agregar un botón con una funcionalidad personalizada en cualquier lugar de una página web
Button Variants
Contained Button
Utilice el atributo variant
para agregar un botón contenido simple en su plantilla de componente. Tenga en cuenta que si no configura la variante, de forma predeterminada se configurará como contenida.
<IgbButton Variant="@ButtonVariant.Contained" />
Outlined Button
Todo lo que tienes que hacer para crear un botón outlined
es cambiar el valor de la propiedad variant
:
<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 propiedad variant
en fab
:
<IgbButton Variant="@ButtonVariant.Fab" />
Button Sizing
Los usuarios pueden cambiar el tamaño del componente button
usando la variable CSS--ig-size
. 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="RadioGroupAlignment.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
Configurar la propiedad download
le pedirá al usuario que guarde la URL vinculada en lugar de navegar hasta ella.
<IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://es.infragistics.com/" Target="@ButtonBaseTarget._blank">
Download
</IgbButton>
Styling
El componente del botón expone la parte CSS base
que nos permite diseñar el elemento envuelto (<button>
o <a>
).
igc-button::part(base) {
background-color: #e99221;
color: #011627;
padding: 18px;
}