Descripción general del panel de expansión de Web Components
El panel de expansión Ignite UI for Web Components es un componente de acordeón liviano que se puede renderizar en dos estados: contraído o expandido. El panel de expansión se puede alternar con un clic del mouse o interacciones con el teclado.
<!DOCTYPE html><html><head><title>Expansion Panel Usage</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"style="align-items: center;"><igc-expansion-panel><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 breed's 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></igc-expansion-panel></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
igc-expansion-panel{
width: 100%;
}
css
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
<igc-expansion-panel><divslot="title">Golden Retriever</div><divslot="subTitle">Medium-large gun dog</div><div><p>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 breed's 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.</p></div></igc-expansion-panel>html
Vinculación a eventos
El componente Panel de expansión genera los siguientes eventos:
igcClosed: se eleva cuando el panel de expansión está plegado
igcOpened: elevado cuando se expande el panel de expansión
igcClosing: se eleva cuando el panel de expansión comienza a colapsar
igcOpening: aumenta 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 emisores de eventos igcOpened e igcClosed:
<!DOCTYPE html><html><head><title>Expansion Panel Properties and Events</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"style="align-items: center;"><igc-expansion-panelid="exp-panel"><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 breed's 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></igc-expansion-panel><spanid="fired-event"></span></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
Personalización de componentes
El control IgcExpansionPanelComponent permite agregar todo tipo de contenido dentro de su cuerpo. ¡Puede representar entradas, gráficos e incluso otros paneles de expansión!
El IgcExpansionPanelComponent 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.
<!DOCTYPE html><html><head><title>Expansion Panel Customization</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-expansion-panelid="exp-panel"indicator-position="end"><h1slot="title">Golden Retriever</h1><h3slot="subtitle">Medium-large gun dog</h3><divslot="indicator">Show more</div><imgheight="100"src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"alt=""><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 breed's 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><igc-buttonhref="https://en.wikipedia.org/wiki/Golden_Retriever"variant="outlined"target="_blank">Read more</igc-button></igc-expansion-panel></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
Navegación por teclado
La navegación por teclado del panel de expansión Ignite UI for Web Components cumple con los estándares de accesibilidad del W3C y es cómoda 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 Web Components expone varias partes CSS (header, indicator, title,y subtitle content) para proporcionar un control total sobre su estilo.
<!DOCTYPE html><html><head><title>Expansion Panel Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-expansion-panelindicator-position="end"><h1slot="title">Golden Retriever</h1><h3slot="subtitle">Medium-large gun dog</h3><imgheight="100"src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"alt=""><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 breed's 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><igc-buttonhref="https://en.wikipedia.org/wiki/Golden_Retriever"variant="contained"target="_blank">Read more</igc-button></igc-expansion-panel></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