-
Notifications
You must be signed in to change notification settings - Fork 161
Expansion Panel Specification
The IgxExpansionPanelComponent provides a way to display information in a toggleable way -
- compact summary view containing title and description and
- expanded detail view containing additional content in addition to the summary header.
Provide Ignite UI for Angular igx-expansion-panel component that supports the following features:
- Collapsible body
- Header Icon Templates
- Disable user interaction
- Animations configuration
Provide a base component that can later be used for implementation of igx-accordion
Story 1: As a developer, I want a component that is able to expand its content upon user interaction or collapse it if already expanded to return to the default state i.e. collapsed. I expect that I am able to change this default state to expanded if I need to.
Story 2: As a developer, I want to be able to template the expanded and collapsed content areas.
Story 3: As a developer, I want to be able to show, hide the expand/collapse icon.
Story 4: As a developer, I want to be able to determine the position of the expand/collapse icon.
Story 5: As a developer, I want to be able to select an icon glyph for the expand/collapse icon.
Story 6: As a developer, I expect that the component can be used as an element of a collection i.e. composition of an accordion as a list of instances of this component is easily doable.
Story 1: As an end user, I want to be able to expand an area in order to reveal more detailed content.
Story 2: As an end user, I want to be able to collapse an area with detailed content to reduce the amount of scrolling I need to perform in order to reach further content.
Story 3: As an end user, I expect that the expansion and collapsing happens smoothly (with a nice animation).
Story 4: As an end user, I want to expand/collapse a content area using my keyboard e.g. by pressing space or enter.
Story 5: As an end user, I expect that defined components, such as the igx-Navbar, can utilize the expansion/collapsing mechanics internally to offer smart behavior upon user interaction such as scrolling the view EXAMPLE.
- Expanding
- Collapsing
- Template Header expand/collapse image
- Animations configuration
The IgxExpansionPanelComponent allows full configuration of the content shown in the control.
| Name | Type | Description | Default |
|---|---|---|---|
id |
string |
The unique id of the control | igx-expansion-panel-0 |
cssClass |
string |
If the control applies a css class. Set to `` to omit | igx-expansion-panel |
| Name | Type | Description | Default |
|---|---|---|---|
collapsed |
boolean |
Should the contents of the control be hidden | true |
disabled |
boolean |
Should the control respond to user interraction | false |
headerButtons* |
boolean |
Should the expand/collapse icon be displayed | true |
animationSettings |
{ openAnimation: AnimationMetadata, closeAnimation: AnimationMetadata } |
What animations should be played when expand/collapse is triggered | { openAnimation: slideIn, closeAnimation: slideOut } |
ariaLabelledBy |
string |
Aria Support. Id of control that labels component | "" |
| Name | Emits | Description |
|---|---|---|
onCollapsed |
{} |
Emitted when collapse() finishes |
onExpanded |
{} |
Emitted when expanded() finishes |
| Name | Signature | Description |
|---|---|---|
collapse |
() => void |
Collapses the control |
expand |
() => void |
Exands the control |
toggle |
() => void |
Toggles the control |
| Name | Selector | Description |
|---|---|---|
IgxExpansionPanelBody* |
igx-expansion-panel-body |
Marks the content of the component |
IgxExpansionPanelHeader* |
igx-expansion-panel-header |
Marks the header of the component |
| Name | Type | Description | Default |
|---|---|---|---|
id |
string |
The unique id of the control | igx-expansion-panel-0 |
panel |
IgxCollapsibleComponent |
The control the header belongs to | N/A |
| Name | Type | Description | Default |
|---|---|---|---|
ariaLabelledBy |
string |
Aria Support. Id of control that labels component | panel.id |
| Name | Emits | Description |
|---|---|---|
onInterraction |
{ event: Event } |
Emitted on user interraction with the component header |
| Name | Selector | Description |
|---|---|---|
IgxExpansionPanelTitle |
igx-expansion-panel-title |
Marks the title of the component header |
IgxExpansionPanelDescription |
igx-expansion-panel-description |
Marks the description of the component header |
- The
igx-expansion-panelprovides a short title and description in the header when in collapsed state. - When expanded, the
igx-expansion-panelbody provides more details to the user. - The
igx-expansion-panelis responsive.
IgxExpansionPanel:
-
roledefaults to region -
aria-labelledbyattribute contains the element IDs of labels. The attribute establishes relationships between objects and their labels. Defaults to the expansion panel's header id
IgxExpansionPanelHeader:
-
roledefaults to button -
aria-expandedattributes indicates whether the collapsible content below is in the expanded or in the collapsed state. -
aria-disabledattribute indicates that the collapsible-header is perceivable but disabled, so it is not collapsible. -
aria-controlsattribute indicates what element's functionality is governed by this element. Defaults to expansion panel's id.