El panel de expansión Ignite UI for React es un componente de acordeón liviano que se puede mostrar en dos estados: contraído o expandido. El panel de expansión se puede alternar con un clic del mouse o con interacciones del teclado.
Ejemplo de panel de expansión React
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelUsage.css';
import { IgrExpansionPanel, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelUsage extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrExpansionPanel><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"slot="subtitle">Medium-large gun dog</h3><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span></IgrExpansionPanel></div>
);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelUsage/>);
tsx
igc-expansion-panel{
width: 100%;
}
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
Luego necesitarás importar IgrExpansionPanel, su CSS necesario y registrar su módulo, así:
La forma más sencilla de empezar a utilizar IgrExpansionPanel es la siguiente:
<IgrExpansionPanel><h1slot="title">Golden Retriever</h1><h3slot="subtitle">Medium-large gun dog</h3><span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span></IgrExpansionPanel>tsx
Vinculación a eventos
El componente Panel de expansión genera los siguientes eventos:
Cerrado: elevado cuando el panel de expansión está plegado
Abierto: elevado cuando se expande el panel de expansión
Cerrando - Levantado cuando el panel de expansión comienza a colapsar
Apertura: elevada cuando el panel de expansión comienza a expandirse
El siguiente ejemplo demuestra cómo podemos agregar algo de lógica a nuestro componente para que muestre/oculte el subtitle según el estado actual del panel.
Podemos hacer esto vinculando los eventos Opened y Closed:
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelPropsAndEvents.css';
import { IgrExpansionPanel, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelPropertiesAndEvents extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { subtitleClass: "", eventSpanClass: "eventSpanHidden", eventSpanText: "none" };
this.onExpansionPanelClosed = this.onExpansionPanelClosed.bind(this);
this.onExpansionPanelOpened = this.onExpansionPanelOpened.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample center"><IgrExpansionPanelclosed={this.onExpansionPanelClosed}opened={this.onExpansionPanelOpened}><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"className={this.state.subtitleClass}slot="subtitle">Medium-large gun dog</h3><divkey="epIndicator"slot="indicator">{this.state.expansionText}</div><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span></IgrExpansionPanel><spanclassName={this.state.eventSpanClass}>{this.state.eventSpanText}</span></div>
);
}
public onExpansionPanelClosed() {
this.setState({ subtitleClass: "", eventSpanClass: "eventSpanShown", eventSpanText: "Closed event fired!"});
window.clearTimeout(undefined);
window.setTimeout(() => {
this.setState({eventSpanClass: "eventSpanHidden"});
}, 2000);
}
public onExpansionPanelOpened() {
this.setState({ subtitleClass: "subtitleHidden", eventSpanClass: "eventSpanShown", eventSpanText: "Opened event fired!"});
window.clearTimeout(undefined);
window.setTimeout(() => {
this.setState({eventSpanClass: "eventSpanHidden"});
}, 2000);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelPropertiesAndEvents/>);
tsx
El control IgrExpansionPanel permite agregar todo tipo de contenido dentro de su cuerpo. ¡Puede representar entradas, gráficos e incluso otros paneles de expansión!
IgrExpansionPanel permite una fácil personalización del encabezado a través de las ranuras expuestas de título, subtítulo e indicador.
La configuración de la posición del indicador de expansión se puede realizar a través de la indicatorPosition propiedad del Panel de expansión. Las opciones posibles son inicio, fin o ninguna.
El siguiente ejemplo de código demuestra cómo configurar el botón del componente para que vaya al lado derecho.
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelCustomization.css';
import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelComponentCustomization extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { expansionText: "Show more" };
this.onExpansionPanelClosed = this.onExpansionPanelClosed.bind(this);
this.onExpansionPanelOpened = this.onExpansionPanelOpened.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrExpansionPanelclosed={this.onExpansionPanelClosed}opened={this.onExpansionPanelOpened}indicatorPosition="end"><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"slot="subtitle">Medium-large gun dog</h3><divkey="epIndicator"slot="indicator">{this.state.expansionText}</div><imgkey="epImg"height="100"src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"alt=""></img><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span><IgrButtonkey="epBtn"href="https://en.wikipedia.org/wiki/Golden_Retriever"variant="outlined"target="_blank"><spankey="btnSpan">Read more</span></IgrButton></IgrExpansionPanel></div>
);
}
public onExpansionPanelClosed() {
this.setState({ expansionText: "Show more"});
}
public onExpansionPanelOpened() {
this.setState({ expansionText: "Show less"});
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelComponentCustomization/>);
tsx
La navegación del teclado del panel de expansión Ignite UI for React cumple con los estándares de accesibilidad del W3C y es fácil de usar.
Combinaciones de teclas
Alt + ↓: expande el panel enfocado
Alt + ↑: contrae el panel enfocado
Espacio / Entrar: alterna el estado de expansión del panel enfocado
Estilo
El componente Panel de expansión Ignite UI for React expone varias partes CSS (header, indicator, title,y subtitle content) para proporcionar un control total sobre su estilo.
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelStyling.css';
import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelStyling extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrExpansionPanelindicatorPosition="end"><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"slot="subtitle">Medium-large gun dog</h3><imgkey="epImg"height="100"src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"alt=""></img><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span><IgrButtonkey="epBtn"href="https://en.wikipedia.org/wiki/Golden_Retriever"variant="contained"target="_blank"><spankey="btnCaption">Read more</span></IgrButton></IgrExpansionPanel></div>
);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelStyling/>);
tsx