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

    Em seu núcleo, o IgbCheckbox permite uma escolha entre estado selecionado/não selecionado. O estilo padrão é feito de acordo com a especificação de controles de seleção nas diretrizes do Material Design.

    Antes de usar o IgbCheckbox, você precisa registrá-lo 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 ao componente IgbCheckbox. O seguinte precisa 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 o IgbCheckbox é 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 alternância da caixa de seleção definindo o atributo label-position da caixa de seleção. Os valores permitidos são before e after (padrão):

    <IgbCheckbox LabelPosition="@CheckboxBaseLabelPosition.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 o atributo Checked do componente para determinar se a caixa de seleção deve ser ativada ou desativada por padrão.

    <IgbCheckbox Checked="true" />

    Indeterminate

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

    <IgbCheckbox Indeterminate="true" />

    Required

    Você pode usar a propriedade Required para marcar a caixa de seleção como obrigatória.

    <IgbCheckbox Required="true" />

    Invalid

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

    <IgbCheckbox Invalid="true" />

    Disabled

    Você pode usar o atributo Disabled para desabilitar a caixa de seleção.

    <IgbCheckbox Disabled="true" />

    Forms

    Você pode usar os atributos name e value ao usar a caixa de seleção com Form.

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

    Styling

    The IgbCheckbox component exposes four CSS parts which we can use for styling:

    Nome Descrição
    base The base wrapper of the checkbox.
    control The checkbox input element.
    indicator The checkbox indicator icon.
    label The checkbox label.

    With this four CSS parts we have full control over the Checkbox styling.

    igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}

    API References

    Additional Resources