Visão geral da caixa de seleção Blazor

    O Blazor Checkbox é um componente que permite adicionar caixas de seleção aos seus aplicativos Blazor. Ele se comporta como uma caixa de seleção HTML padrão, permitindo que os usuários selecionem estados básicos marcados e desmarcados ou um estado indeterminado adicional. Você também obtém controle total sobre o estilo do componente Blazor checkbox e a capacidade de usá-lo com formulários.

    Checkbox Example

    Usage

    No seu cerne, permiteIgbCheckbox a escolha entre estados selecionados/não selecionados. O estilo padrão é feito de acordo com a especificação de controles de seleção nas diretrizes de Design de Material.

    Antes de usá-losIgbCheckbox, você precisa registrá-los da seguinte forma:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbCheckbox componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

    A maneira mais simples de começar a usar oIgbCheckbox é a seguinte:

    <IgbCheckbox />

    [!WARNING] The IgbCheckbox component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

    Para fornecer um rótulo significativo para a caixa de seleção, basta colocar algum texto entre as tags de abertura e fechamento:

    <IgbCheckbox>Label</IgbCheckbox>

    Você pode especificar se o rótulo deve ser posicionado antes ou depois da opção de seleção definindo olabel-position atributo da caixa de seleção. Valores permitidos sãobefore eafter (padrão):

    <IgbCheckbox LabelPosition="@ToggleLabelPosition.Before">Label</IgbCheckbox>

    A caixa de seleção também pode ser rotulada por elementos externos à caixa de seleção. Nesse caso, o usuário tem controle total para posicionar e estilizar o rótulo de acordo com suas necessidades.

    <span id="checkbox-label">Label</span>
<IgbCheckbox AriaLabelledby="checkbox-label" />

    Checked

    Você pode usar oChecked atributo do componente para determinar se a caixa deve ser ativada ou desativada por padrão.

    <IgbCheckbox Checked="true" />

    Indeterminate

    Você pode usar aIndeterminate propriedade do componente para definir o valor da caixa de seleção como não verdadeiro nem falso.

    <IgbCheckbox Indeterminate="true" />

    Required

    Você pode usar aRequired propriedade para marcar a caixa de seleção conforme necessário.

    <IgbCheckbox Required="true" />

    Invalid

    Você pode usar oInvalid atributo para marcar a caixa de seleção como inválida.

    <IgbCheckbox Invalid="true" />

    Disabled

    Você pode usar oDisabled atributo para desativar a caixa de seleção.

    <IgbCheckbox Disabled="true" />

    Forms

    Você pode usar osName atributos eValue ao usar a caixa de seleção comForm.

    <IgbCheckbox Name="wifi" Value="enabled" />

    Styling

    OIgbCheckbox componente expõe quatro partes CSS que podemos usar para estilismo:

    Nome Descrição
    base O wrapper base da caixa de seleção.
    control O elemento de entrada da caixa de seleção.
    indicator O ícone indicador da caixa de seleção.
    label O rótulo da caixa de seleção.

    Com essas quatro partes do CSS, temos controle total sobre o estilo da caixa de seleção.

    igc-checkbox::part(indicator) {
  --tick-color: var(--ig-secondary-500-contrast); /* check icon color */
}

igc-checkbox::part(control checked)::after {
  --fill-color: var(--ig-secondary-500); /* checkbox background color */
}

    API References

    Additional Resources