React Radio & Radio Group
El componente Ignite UI for React Radio permite al usuario seleccionar una única opción de un conjunto de opciones disponibles que aparecen enumeradas una al lado de la otra.
Ejemplo de Ignite UI for React Radio
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
export default class RadioGroup extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "25px ", border: "1px solid gainsboro "}}>
<IgrRadioGroup alignment ="horizontal" >
<IgrRadio name ="fruit" value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio name ="fruit" value ="banana" checked ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio name ="fruit" value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio name ="fruit" value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioGroup /> );
tsx コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
Luego necesitarás importar IgrRadio
e IgrRadioGroup
, su CSS necesario y registrar su módulo, así:
import { IgrRadioModule, IgrRadio, IgrRadioGroupComponent, IgrRadioGroupModule } from 'igniteui-react' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
tsx
<IgrRadioGroup >
<IgrRadio value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio value ="banana" > <span > Banana</span > </IgrRadio >
<IgrRadio value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
tsx
El componente IgrRadio no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.
Ejemplos
Etiqueta
Para proporcionar una etiqueta significativa para IgrRadio
, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:
<IgrRadio > <span > Label</span > </IgrRadio >
tsx
Puede especificar si la etiqueta debe colocarse antes o después del botón IgrRadio
configurando el atributo label-position
. Los valores permitidos son before
y after
(predeterminado):
<IgrRadio labelPosition ="before" > <span > Apple</span > </IgrRadio >
tsx
La IgrRadio
también puede ser etiquetada por elementos externos a ella. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.
<span id ="radio-label" > Label</span >
<IgrRadio ariaLabelledby ="radio-label" > </IgrRadio >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
export default class RadioLabel extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "60px ", border: "1px solid gainsboro "}}>
<IgrRadioGroup alignment ="vertical" >
<IgrRadio name ="fruit" value ="apple" labelPosition ="before" > <span > Apple</span > </IgrRadio >
<div style ={{display: "flex ", alignItems: "center "}}>
<span id ="radio-label" > Label</span >
<IgrRadio
name ="fruit"
labelPosition ="before"
ariaLabelledby ="radio-label"
value ="orange" >
</IgrRadio >
</div >
</IgrRadioGroup >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioLabel /> );
tsx コピー
Comprobado
Puede utilizar el atributo checked
para activar la radio.
<IgrRadioGroup >
<IgrRadio value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio value ="banana" checked ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
export default class RadioGroup extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "25px ", border: "1px solid gainsboro "}}>
<IgrRadioGroup alignment ="horizontal" >
<IgrRadio name ="fruit" value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio name ="fruit" value ="banana" checked ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio name ="fruit" value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio name ="fruit" value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioGroup /> );
tsx コピー
Inválido
Puede utilizar el atributo invalid
para marcar la radio como no válida.
<IgrRadio invalid ="true" > </IgrRadio >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRadio, IgrRadioModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
export default class RadioInvalid extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "25px ", border: "1px solid gainsboro "}}>
<IgrRadio value ="banana" invalid ="true" > <span > Invalid</span > </IgrRadio >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioInvalid /> );
tsx コピー
Desactivado
Puede utilizar el atributo disabled
para desactivar la radio.
<IgrRadioGroup >
<IgrRadio value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio value ="banana" disabled ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
export default class RadioDisabled extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "25px ", border: "1px solid gainsboro "}}>
<IgrRadioGroup alignment ="horizontal" >
<IgrRadio name ="fruit" value ="banana" disabled ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio name ="fruit" value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio name ="fruit" value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio name ="fruit" value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioDisabled /> );
tsx コピー
Alineación de grupo
IgrRadioGroup
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
.
<IgrRadioGroup alignment ="horizontal" >
<IgrRadio value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio value ="banana" disabled ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
export default class RadioAlignment extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "25px ", border: "1px solid gainsboro "}}>
<IgrRadioGroup alignment ="horizontal" >
<IgrRadio name ="fruit" value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio name ="fruit" value ="banana" checked ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio name ="fruit" value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio name ="fruit" value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioAlignment /> );
tsx コピー
Puede usar los name
atributos y value
cuando use la radio con Form
.
<IgrRadioGroup >
<IgrRadio name ="fruit" value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio name ="fruit" value ="banana" > <span > Banana</span > </IgrRadio >
<IgrRadio name ="fruit" value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio name ="fruit" value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
tsx
Estilo
El componente IgrRadio
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:
:root {
--ig-primary-h: 60deg ;
--ig-primary-s: 100% ;
--ig-primary-l: 25% ;
}
igc-radio::part (control) {
--size: 18px ;
}
scss
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
import './index.css' ;
IgrRadioModule.register();
IgrRadioGroupModule.register();
export default class RadioStyling extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" style ={{width: "430px ", height: "120px ", border: "1px solid gainsboro "}}>
<IgrRadioGroup alignment ="vertical" >
<IgrRadio name ="fruit" value ="apple" > <span > Apple</span > </IgrRadio >
<IgrRadio name ="fruit" value ="banana" checked ="true" > <span > Banana</span > </IgrRadio >
<IgrRadio name ="fruit" value ="Mango" > <span > Mango</span > </IgrRadio >
<IgrRadio name ="fruit" value ="orange" > <span > Orange</span > </IgrRadio >
</IgrRadioGroup >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<RadioStyling /> );
tsx コピー
:root {
--igc-primary-h: 60deg ;
--igc-primary-s: 100% ;
--igc-primary-l: 25% ;
}
igc-radio::part (control) {
--size: 18px ;
}
css コピー
Referencias de API
Recursos adicionales