El componente React Button Group se utiliza para organizar IgrToggleButton
en grupos de botones con estilo, alineación horizontal/vertical, selección simple/múltiple y alternancia.
EXAMPLE
TSX
ButtonGroupOverview.css
index.css
import React , { useEffect } from 'react' ;
import ReactDOM from 'react-dom/client' ;
import {
IgrButtonGroup,
IgrButtonGroupModule,
IgrIcon,
IgrIconModule,
IgrRipple,
IgrRippleModule,
IgrToggleButton,
} from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/material.css' ;
import './ButtonGroupOverview.css' ;
import './index.css' ;
import { registerIconFromText } from 'igniteui-webcomponents'
IgrButtonGroupModule.register();
IgrIconModule.register();
IgrRippleModule.register();
const icons = [
{
name: 'format_align_left' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>' ,
},
{
name: 'format_align_center' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>' ,
},
{
name: 'format_align_right' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/></svg>' ,
},
{
name: 'format_align_justify' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"/></svg>' ,
},
];
export default function ButtonGroupOverview() {
useEffect(() => {
icons.forEach((icon) => {
registerIconFromText(icon.name, icon.iconText, 'material' );
});
}, [])
return (
<div className ="container sample" >
<IgrButtonGroup >
<IgrToggleButton value ="left" key ="button-left" >
<IgrIcon name ="format_align_left" collection ="material" key ="icon-left" />
<IgrRipple key ="ripple-left" />
</IgrToggleButton >
<IgrToggleButton value ="center" key ="button-center" >
<IgrIcon name ="format_align_center" collection ="material" key ="icon-center" />
<IgrRipple key ="ripple-center" />
</IgrToggleButton >
<IgrToggleButton value ="right" key ="button-right" >
<IgrIcon name ="format_align_right" collection ="material" key ="icon-right" />
<IgrRipple key ="ripple-right" />
</IgrToggleButton >
<IgrToggleButton value ="justify" selected ={true} key ="button-justify" >
<IgrIcon name ="format_align_justify" collection ="material" key ="icon-justify" />
<IgrRipple key ="ripple-justify" />
</IgrToggleButton >
</IgrButtonGroup >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonGroupOverview /> );
tsx コピー igc-button -group {
max-width : 400px ;
}
igc-ripple {
--color : gray;
}
css コピー
¿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
A continuación, tendrás que importar el IgrButtonGroup
CSS necesario y registrar su módulo, de la siguiente manera:
import { IgrButtonGroupModule, IgrButtonGroup } from 'igniteui-react' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
tsx
Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos .
Ahora que ha importado la Ignite UI for React Button Group, puede comenzar con una configuración básica de IgrButtonGroup
y sus botones.
Utilice el IgrButtonGroup
selector para ajustar sus IgrToggleButton
s y mostrarlas en un grupo de botones. Si desea que un botón se seleccione de forma predeterminada, utilice el selected
atributo:
<IgrButtonGroup >
<IgrToggleButton value ="left" key ="button-left" >
<IgrIcon name ="format_align_left" collection ="material" key ="icon-left" />
<IgrRipple key ="ripple-left" />
</IgrToggleButton >
<IgrToggleButton value ="center" key ="button-center" >
<IgrIcon name ="format_align_center" collection ="material" key ="icon-center" />
<IgrRipple key ="ripple-center" />
</IgrToggleButton >
<IgrToggleButton value ="right" key ="button-right" >
<IgrIcon name ="format_align_right" collection ="material" key ="icon-right" />
<IgrRipple key ="ripple-right" />
</IgrToggleButton >
<IgrToggleButton value ="justify" selected ={true} key ="button-justify" >
<IgrIcon name ="format_align_justify" collection ="material" key ="icon-justify" />
<IgrRipple key ="ripple-justify" />
</IgrToggleButton >
</IgrButtonGroup >
tsx
Ejemplos
Alineación
Utilice la alignment
propiedad para establecer la orientación de los botones del grupo de botones.
EXAMPLE
TSX
ButtonGroupAlignment.css
index.css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import {
IgrButtonGroup,
IgrButtonGroupModule,
IgrRipple,
IgrRippleModule,
IgrToggleButton,
} from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/material.css' ;
import './ButtonGroupAlignment.css' ;
import './index.css' ;
IgrButtonGroupModule.register();
IgrRippleModule.register();
export default function ButtonGroupAlignment() {
return (
<div className ="container sample" >
<IgrButtonGroup alignment ="vertical" >
<IgrToggleButton value ="sofia" key ="button-sofia" >
<span key ="text-sofia" > Sofia</span >
<IgrRipple key ="ripple-sofia" />
</IgrToggleButton >
<IgrToggleButton value ="london" key ="button-london" >
<span key ="text-london" > London</span >
<IgrRipple key ="ripple-london" />
</IgrToggleButton >
<IgrToggleButton value ="new york" selected ={true} key ="button-new-york" >
<span key ="text-new-york" > New York</span >
<IgrRipple key ="ripple-new-york" />
</IgrToggleButton >
<IgrToggleButton value ="tokyo" key ="button-tokyo" >
<span key ="text-tokyo" > Tokio</span >
<IgrRipple key ="ripple-tokyo" />
</IgrToggleButton >
</IgrButtonGroup >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonGroupAlignment /> );
tsx コピー igc-button -group {
width : 200px ;
}
igc-ripple {
--color : gray;
}
css コピー
Selección
Para configurar la Ignite UI for React IgrButtonGroup
, puede utilizar su propiedad selection
. Esta propiedad acepta los siguientes tres modos:
único : modo de selección predeterminado del grupo de botones. El usuario puede seleccionar/deseleccionar un solo botón.
single-required : imita el comportamiento de un grupo de radio. Solo se puede seleccionar un botón y, una vez que se realiza la selección inicial, la deselección no es posible a través de la interacción del usuario.
Múltiple: se pueden seleccionar y anular la selección de varios botones del grupo.
En el ejemplo siguiente se muestran los modos de selección expuestos IgrButtonGroup
:
EXAMPLE
TSX
ButtonGroupSelection.css
index.css
import React , { useEffect, useRef } from 'react' ;
import ReactDOM from 'react-dom/client' ;
import {
ButtonGroupSelection,
IgrButtonGroup,
IgrButtonGroupModule,
IgrIcon,
IgrIconModule,
IgrRadio,
IgrRadioGroup,
IgrRadioGroupModule,
IgrRipple,
IgrRippleModule,
IgrToggleButton,
} from "@infragistics/igniteui-react" ;
import { registerIconFromText } from 'igniteui-webcomponents'
import 'igniteui-webcomponents/themes/light/material.css' ;
import './ButtonGroupSelection.css' ;
import './index.css' ;
IgrButtonGroupModule.register();
IgrRadioGroupModule.register();
IgrIconModule.register();
IgrRippleModule.register();
const icons = [
{
name: 'bold' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>' ,
},
{
name: 'italic' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg>' ,
},
{
name: 'underlined' ,
iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/></svg>' ,
},
];
export default function ButtonGroupSelectionSample() {
useEffect(() => {
icons.forEach((icon) => {
registerIconFromText(icon.name, icon.iconText, 'material' );
});
}, [])
const buttonGroupRef = useRef<IgrButtonGroup > (null );
function onRadioChange(radio: IgrRadio) {
switch (radio.value) {
case 'single' :
buttonGroupRef.current.selection = ButtonGroupSelection.Single;
break ;
case 'single-required' :
buttonGroupRef.current.selection = ButtonGroupSelection.SingleRequired;
break ;
default :
buttonGroupRef.current.selection = ButtonGroupSelection.Multiple;
break ;
}
}
return (
<div className ="container sample" >
<div className ="radio-group-container" >
<label > Selection Mode</label >
<IgrRadioGroup alignment ="horizontal" >
<IgrRadio name ="mode" value ="single" checked change ={onRadioChange} key ="radio-single" >
<span key ="text-single" > Single</span >
</IgrRadio >
<IgrRadio name ="mode" value ="single-required" change ={onRadioChange} key ="radio-single-required" >
<span key ="text-single-required" > Single-Required</span >
</IgrRadio >
<IgrRadio name ="mode" value ="multiple" change ={onRadioChange} key ="radio-multiple" >
<span key ="text-multiple" > Multiple</span >
</IgrRadio >
</IgrRadioGroup >
</div >
<IgrButtonGroup ref ={buttonGroupRef} >
<IgrToggleButton value ="bold" key ="button-bold" >
<IgrIcon name ="bold" collection ="material" key ="icon-bold" />
<IgrRipple key ="ripple-bold" />
</IgrToggleButton >
<IgrToggleButton value ="italic" key ="button-italic" >
<IgrIcon name ="italic" collection ="material" key ="icon-italic" />
<IgrRipple key ="ripple-italic" />
</IgrToggleButton >
<IgrToggleButton value ="underlined" key ="button-underlined" >
<IgrIcon name ="underlined" collection ="material" key ="icon-underlined" />
<IgrRipple key ="ripple-underlined" />
</IgrToggleButton >
</IgrButtonGroup >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonGroupSelectionSample /> );
tsx コピー .radio-group-container {
width : 400px ;
margin-bottom : 1rem ;
}
igc-radio-group {
padding : 0.5rem ;
}
igc-button -group {
width : 200px ;
}
igc-ripple {
--color : gray;
}
css コピー
A IgrToggleButton
se puede marcar como seleccionado a través de su selected
atributo o a través de la función IgrButtonGroup
selectedItems
atributo:
<IgrButtonGroup selectedItems ={[ 'bold ']}>
<IgrToggleButton value ="bold" key ="button-bold" >
<IgrIcon name ="bold" collection ="material" key ="icon-bold" />
<IgrRipple key ="ripple-bold" />
</IgrToggleButton >
<IgrToggleButton value ="italic" key ="button-italic" >
<IgrIcon name ="italic" collection ="material" key ="icon-italic" />
<IgrRipple key ="ripple-italic" />
</IgrToggleButton >
<IgrToggleButton value ="underlined" key ="button-underlined" >
<IgrIcon name ="underlined" collection ="material" key ="icon-underlined" />
<IgrRipple key ="ripple-underlined" />
</IgrToggleButton >
</IgrButtonGroup >
tsx
El establecimiento del atributo de valor IgrToggleButton es obligatorio para usar la propiedad selectedItems de IgrButtonGroup.
Tamaño
La propiedad personalizada CSS--ig-size
se puede utilizar para controlar el tamaño del grupo de botones.
import React , { useState } from 'react' ;
import ReactDOM from 'react-dom/client' ;
import {
IgrButtonGroup,
IgrButtonGroupModule,
IgrComponentValueChangedEventArgs,
IgrToggleButton,
} from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/material.css' ;
import './index.css' ;
IgrButtonGroupModule.register();
export default function ButtonGroupSize() {
const [style , setStyle ] = useState({ '--ig-size' : 'var(--ig-size-large)' } as React .CSSProperties)
function onSelect(buttonGroup: IgrButtonGroup, args: IgrComponentValueChangedEventArgs) {
setStyle({
'--ig-size' : `var (--ig-size-${args.detail})`
} as React .CSSProperties)
}
return (
<div className ="container sample" >
<IgrButtonGroup select ={onSelect} style ={style} >
<IgrToggleButton value ="small" key ="button-small" >
<span key ="text-small" > Small</span >
</IgrToggleButton >
<IgrToggleButton value ="medium" key ="button-medium" >
<span key ="text-medium" > Medium</span >
</IgrToggleButton >
<IgrToggleButton value ="large" selected ={true} key ="button-large" >
<span key ="text-large" > Large</span >
</IgrToggleButton >
</IgrButtonGroup >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonGroupSize /> );
tsx コピー
Estilo
El IgrButtonGroup
Exposiciones de componentes group
CSS que nos permite estilizar el contenedor del grupo de botones. Además, el IgrToggleButton
De esta manera, la mayoría de toggle
CSS que podría usarse para diseñar el elemento button.
EXAMPLE
TSX
ButtonGroupStyling.css
index.css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import {
IgrButtonGroup,
IgrButtonGroupModule,
IgrRipple,
IgrRippleModule,
IgrToggleButton,
} from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/material.css' ;
import './ButtonGroupStyling.css' ;
import './index.css' ;
IgrButtonGroupModule.register();
IgrRippleModule.register();
export default function ButtonGroupStyling() {
return (
<div className ="container sample" >
<IgrButtonGroup alignment ="vertical" >
<IgrToggleButton value ="sofia" key ="button-sofia" >
<span key ="text-sofia" > Sofia</span >
<IgrRipple key ="ripple-sofia" />
</IgrToggleButton >
<IgrToggleButton value ="london" key ="button-london" >
<span key ="text-london" > London</span >
<IgrRipple key ="ripple-london" />
</IgrToggleButton >
<IgrToggleButton value ="new york" key ="button-new-york" >
<span key ="text-new-york" > New York</span >
<IgrRipple key ="ripple-new-york" />
</IgrToggleButton >
<IgrToggleButton value ="tokyo" disabled ={true} key ="button-tokyo" >
<span key ="text-tokyo" > Tokio</span >
<IgrRipple key ="ripple-tokyo" />
</IgrToggleButton >
</IgrButtonGroup >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonGroupStyling /> );
tsx コピー igc-button -group {
width : 200px ;
}
igc-ripple {
--color : gray;
}
igc-toggle-button ::part (toggle) {
color : #fdfdfd ;
background : #2f4d6a ;
}
igc-toggle-button ::part (toggle):hover {
color : #fdfdfd ;
background : #1f3347 ;
}
igc-toggle-button [disabled] ::part (toggle) {
color : gray;
background : lightgray;
}
igc-toggle-button [selected] ::part (toggle) {
color : #fdfdfd ;
background : #1f3347 ;
}
css コピー
Referencia de API
Recursos adicionales