El componente Switch Ignite UI for Web Components es un componente de selección de opciones binarias que se comporta de manera similar al componente Switch en iOS.
<!DOCTYPE html><html><head><title>Switch Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-switch>Switch</igc-switch></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="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 completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Básicamente, el componente IgcSwitchComponent permite alternar entre estados de encendido y apagado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
Luego necesitarás importar IgcSwitchComponent, su CSS necesario y registrar su módulo, así:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
La forma más sencilla de empezar a utilizarlo IgcSwitchComponent es la siguiente:
<igc-switch></igc-switch>html
El componente IgcSwitchComponent no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.
Ejemplos
Etiqueta
Para proporcionar una etiqueta significativa para el cambio, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:
<igc-switch>Label</igc-switch>html
Puede especificar si la etiqueta debe colocarse antes o después del interruptor configurando el atributo labelPosition del interruptor. Los valores permitidos son before y after (predeterminado):
El interruptor también puede estar etiquetado por elementos externos al interruptor. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.
<!DOCTYPE html><html><head><title>Switch Label</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="wrapper"><spanid="switch-label">Label</span><igc-switcharia-labelledby="switch-label"label-position="before"></igc-switch></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Switch Checking</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-switchchecked>Label</igc-switch></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Requerido
Puede utilizar el atributo required para marcar el cambio como requerido.
<igc-switchrequired></igc-switch>html
Inválido
Puede utilizar el atributo invalid para marcar el cambio como no válido.
<igc-switchinvalid></igc-switch>html
Desactivado
Puede utilizar el atributo disabled para deshabilitar el interruptor.
<!DOCTYPE html><html><head><title>Switch Disabled</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-switchdisabled>Label</igc-switch></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="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 el modificador con Form.