The Ignite UI for Web Components Expansion Panel is a lightweight accordion component which can be rendered in two states - collapsed or expanded. The expansion panel can be toggled using mouse click, or keyboard interactions.
<!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
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
<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
Binding to events
The Expansion Panel component raises the following events:
igcClosed - Raised when the expansion panel is collapsed
igcOpened - Raised when the expansion panel is expanded
igcClosing - Raised when the expansion panel starts collapsing
igcOpening - Raised when the expansion panel starts expanding
The following sample demonstrates how we can add some logic to our component to make it show/hide the subtitle depending on the current state of the panel.
We can do this by binding to the igcOpened and igcClosed event emitters:
<!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
Component Customization
The IgcExpansionPanelComponent control allows all sorts of content to be added inside of its body. It can render input, charts and even other expansion panels!
The IgcExpansionPanelComponent allows for easy customization of the header through the exposed title, subTitle and indicator slots.
Configuring the position of the expansion indicator can be done through the indicatorPosition property of the Expansion Panel. The possible options are start, end or none.
The next code sample demonstrates how to configure the component's button to go on the right side.
<!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
<!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