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

    At its core, the IgcCheckboxComponent allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification in the Material Design guidelines.

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

    npm install igniteui-webcomponents

    Você então precisará importar oIgcCheckboxComponent 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 Comecando.

    A maneira mais simples de começar a usar oIgcCheckboxComponent é 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>

    You can specify if the label should be positioned before or after the checkbox toggle by setting the label-position attribute of the checkbox. Allowed values are before and after (default):

    <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

    You can use the checked attribute of the component to determine whether the checkbox should be toggled on or off by default.

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

    Indeterminate

    You can use the indeterminate property of the component to set the checkbox's value to neither true nor false.

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

    Required

    You can use the required property to mark the checkbox as required.

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

    Invalid

    You can use the invalid attribute to mark the checkbox as invalid.

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

    Disabled

    You can use the disabled attribute to disable the checkbox.

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

    Forms

    You can use the name and value attributes when using the checkbox with 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 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