Visão geral da caixa de seleção Web Components

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

    Checkbox Example

    Usage

    Em seu núcleo, o IgcCheckboxComponent 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.

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

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

    import { defineComponents, IgcCheckboxComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

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

    <igc-checkbox></igc-checkbox>

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

    <igc-checkbox>Label</igc-checkbox>

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

    <igc-checkbox label-position="before">Label</igc-checkbox>

    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>
<igc-checkbox aria-labelledby="checkbox-label"></igc-checkbox>

    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.

    <igc-checkbox checked></igc-checkbox>

    Indeterminate

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

    <igc-checkbox indeterminate></igc-checkbox>

    Required

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

    <igc-checkbox required></igc-checkbox>

    Invalid

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

    <igc-checkbox invalid></igc-checkbox>

    Disabled

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

    <igc-checkbox disabled></igc-checkbox>

    Forms

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

    <igc-checkbox name="wifi" value="enabled"></igc-checkbox>

    Styling

    The IgcCheckboxComponent 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