El componente Ignite UI for Web Components Radio permite al usuario seleccionar una única opción de un conjunto de opciones disponibles que se enumeran una al lado de la otra.
<!DOCTYPE html><html><head><title>Radio Group</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"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit"value="apple">Apple</igc-radio><igc-radioname="fruit"value="banana"checked>Banana</igc-radio><igc-radioname="fruit"value="mango">Mango</igc-radio><igc-radioname="fruit"value="orange">Orange</igc-radio></igc-radio-group></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
¿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
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
El componente IgcRadioComponent no funciona con el elemento <form> estándar. En su lugar, utilice Formulario.
Ejemplos
Etiqueta
Para proporcionar una etiqueta significativa para IgcRadioComponent, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:
<igc-radio>Apple</igc-radio>html
Puede especificar si la etiqueta debe colocarse antes o después del botón IgcRadioComponent configurando el atributo label-position. Los valores permitidos son before y after (predeterminado):
El IgcRadioComponent también puede ser etiquetado por elementos externos al mismo. 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>Radio Group</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"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit"label-position="before"value="apple">Apple</igc-radio><divstyle="display: flex; align-items: center"><spanid="radio-label">Label</span><igc-radioname="fruit"label-position="before"aria-labelledby="radio-label"value="orange"
></igc-radio></div></igc-radio-group></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
Comprobado
Puede utilizar el atributo checked para activar la radio.
<!DOCTYPE html><html><head><title>Radio Group</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"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit"value="apple">Apple</igc-radio><igc-radioname="fruit"value="banana"checked>Banana</igc-radio><igc-radioname="fruit"value="mango">Mango</igc-radio><igc-radioname="fruit"value="orange">Orange</igc-radio></igc-radio-group></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
Inválido
Puede utilizar el atributo invalid para marcar la radio como no válida.
<!DOCTYPE html><html><head><title>Radio Group</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"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radioinvalid>Invalid</igc-radio></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
Desactivado
Puede utilizar el atributo disabled para desactivar la radio.
<!DOCTYPE html><html><head><title>Radio 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"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit">Apple</igc-radio><igc-radioname="fruit"disabled>Banana</igc-radio><igc-radioname="fruit">Mango</igc-radio><igc-radioname="fruit">Orange</igc-radio></igc-radio-group></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
Alineación de grupo
IgcRadioGroupComponent le permite cambiar fácilmente la direccionalidad de ubicación de los botones de opción que contiene utilizando el atributo alignment. Los valores permitidos son vertical (predeterminado) y horizontal.
<!DOCTYPE html><html><head><title>Radio Group Alignment</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"><divstyle="width: 430px; border: 1px solid gainsboro"><igc-radio-groupalignment="horizontal"><igc-radioname="fruit">Apple</igc-radio><igc-radioname="fruit"checked>Banana</igc-radio><igc-radioname="fruit">Mango</igc-radio><igc-radioname="fruit">Orange</igc-radio></igc-radio-group></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
Formularios
Puede usar los name atributos y value cuando use la radio con Form.
El componente IgcRadioComponent expone varias partes CSS (base, control y label) para brindarle control total sobre su estilo. También puede modificar los colores de la paleta global para cambiar los colores del componente de radio:
<!DOCTYPE html><html><head><title>Radio Group</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"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit">Apple</igc-radio><igc-radioname="fruit"checked>Banana</igc-radio><igc-radioname="fruit">Mango</igc-radio><igc-radioname="fruit">Orange</igc-radio></igc-radio-group></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