Web Components Descripción general de las casillas de verificación

La casilla de verificación Web Components es un componente que le permite agregar casillas de verificación a sus aplicaciones Web Components. Se comporta como una casilla de verificación HTML estándar, lo que permite a los usuarios seleccionar estados básicos marcados y no marcados o un estado indeterminado adicional. También obtiene control total sobre el estilo del componente de casilla de verificación Web Components y la capacidad de usarlo con formularios.

Ejemplo de casilla de verificación

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

defineComponents(IgcCheckboxComponent);
export class CheckboxOverview {
    constructor() {
    }
}

new CheckboxOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox>Checkbox</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Uso

En esencia, IgcCheckboxComponent permite elegir entre el estado seleccionado o no seleccionado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

Luego necesitarás importar IgcCheckboxComponent, su CSS necesario y registrar su módulo, así:

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

defineComponents(IgcCheckboxComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

La forma más sencilla de comenzar a utilizar IgcCheckboxComponent es la siguiente:

<igc-checkbox></igc-checkbox>
html

El componente IgcCheckboxComponent no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.

Ejemplos

Etiqueta

Para proporcionar una etiqueta significativa para la casilla de verificación, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

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

Puede especificar si la etiqueta debe colocarse antes o después de la casilla de verificación configurando el atributo label-position de la casilla de verificación. Los valores permitidos son before y after (predeterminado):

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

La casilla de verificación también puede estar etiquetada por elementos externos a la casilla de verificación. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

<span id="checkbox-label">Label</span>
<igc-checkbox aria-labelledby="checkbox-label"></igc-checkbox>
html

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

defineComponents(IgcCheckboxComponent);
export class CheckboxLabel {
    constructor() {
    }
}

new CheckboxLabel();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Label</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="wrapper">
        <span id="checkbox-label">Label</span>
        <igc-checkbox aria-labelledby="checkbox-label" label-position="before"></igc-checkbox>
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

.wrapper {
    display: flex;
    align-items: center;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Comprobado

Puede utilizar el atributo checked del componente para determinar si la casilla de verificación debe activarse o desactivarse de forma predeterminada.

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

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

defineComponents(IgcCheckboxComponent);
export class CheckboxChecking {
    constructor() {
    }
}

new CheckboxChecking();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Checking</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox checked>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Indeterminado

Puede utilizar la propiedad indeterminate del componente para establecer el valor de la casilla de verificación en verdadero ni falso.

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

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

defineComponents(IgcCheckboxComponent);
export class CheckboxIndeterminate {
    constructor() {
    }
}

new CheckboxIndeterminate();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Indeterminate</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox indeterminate>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Requerido

Puede utilizar la propiedad required para marcar la casilla de verificación según sea necesario.

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

Inválido

Puede utilizar el atributo invalid para marcar la casilla de verificación como no válida.

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

Desactivado

Puede utilizar el atributo disabled para deshabilitar la casilla de verificación.

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

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

defineComponents(IgcCheckboxComponent);
export class SwitchDisabled {
    constructor() {
    }
}

new SwitchDisabled();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Disabled</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox disabled>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Formularios

Puede utilizar los name atributos y value cuando utilice la casilla de verificación con Form.

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

Estilo

El IgcCheckboxComponent componente expone cuatro partes CSS que podemos usar para el estilo:

Nombre	Descripción
`base`	El envoltorio base de la casilla de verificación.
`control`	El elemento de entrada de la casilla de verificación.
`indicator`	El icono del indicador de casilla de verificación.
`label`	La etiqueta de la casilla de verificación.

Con estas cuatro partes de CSS, tenemos control total sobre el estilo de las casillas de verificación.

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

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