Interruptor Blazor
El componente Ignite UI for Blazor Switch es un componente de selección de opciones binarias que se comporta de manera similar al componente Switch en iOS.
Blazor Switch Example
Usage
En esencia, el componente IgbSwitch
permite alternar entre estados de encendido y apagado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.
Antes de utilizar el IgbSwitch
, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbSwitch
. 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" />
<IgbSwitch />
[!WARNING] The
IgbSwitch
component doesn't work with the standard<form>
element. UseForm
instead.
Examples
Label
Para proporcionar una etiqueta significativa para el cambio, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:
<IgbSwitch>Label</IgbSwitch>
Puede especificar si la etiqueta debe colocarse antes o después del interruptor configurando el atributo LabelPosition
del interruptor. Los valores permitidos son before
y after
(predeterminado):
<IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>
El interruptor también puede estar etiquetado por elementos externos al interruptor. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.
<span id="switch-label>Label</span>
<IgbSwitch AriaLabelledBy="switch-label" />
Checked
Puede utilizar el atributo checked
para activar el interruptor.
<IgbSwitch Checked="true" />
Required
Puede utilizar el atributo required
para marcar el cambio como requerido.
<IgbSwitch Required="true" />
Invalid
Puede utilizar el atributo invalid
para marcar el cambio como no válido.
<IgbSwitch Invalid="true" />
Disabled
Puede utilizar el atributo disabled
para deshabilitar el interruptor.
<IgbSwitch Disabled="true" />
Forms
Puede utilizar los name
atributos y value
cuando utilice el modificador con Form
.
<IgbSwitch Name="wifi" Value="enabled" />
Styling
El componente de cambio expone varias partes CSS (base
, control
, thumb
y label
) para brindarle control total sobre su estilo.
igc-switch::part(control) {
background: beige;
border-radius: 0;
}
igc-switch::part(thumb) {
background: olive;
border-radius: 2px;
box-shadow: none;
}
API References
Form
LabelPosition
IgbSwitch