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

    O React Checkbox é um componente que permite adicionar caixas de seleção aos seus aplicativos React. 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 React caixa de seleção e a capacidade de usá-lo com formulários.

    Checkbox Example

    Usage

    Em sua essência, o permite IgrCheckbox uma escolha entre o 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.

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará importar o IgrCheckbox CSS necessário e registrar seu módulo, assim:

    import { IgrCheckboxModule, IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();

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

    <IgrCheckbox></IgrCheckbox>

    [!WARNING] The IgrCheckbox 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:

    <IgrCheckbox><span>Label</span></IgrCheckbox>

    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):

    <IgrCheckbox labelPosition="before"></IgrCheckbox>

    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>
<IgrCheckbox ariaLabelledby="checkbox-label" labelPosition="before"></IgrCheckbox>

    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.

    <IgrCheckbox checked="true"></IgrCheckbox>

    Indeterminate

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

    <IgrCheckbox indeterminate="true"></IgrCheckbox>

    Required

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

    <IgrCheckbox required="true"></IgrCheckbox>

    Invalid

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

    <IgrCheckbox invalid="true"></IgrCheckbox>

    Disabled

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

    <IgrCheckbox disabled="true"></IgrCheckbox>

    Forms

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

    <IgrCheckbox name="wifi" value="enabled"></IgrCheckbox>

    Styling

    O IgrCheckbox componente expõe quatro partes CSS que podemos usar para estilizar:

    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) {
  stroke: var(--ig-secondary-500-contrast);
}

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

    API References

    Additional Resources