Components.Accordion public
Bootstrap-style accordion group, with collapsible/expandable items.
Usage
Use as a block level component with any number of yielded Components.AccordionItem components as children:
<BsAccordion as |acc|>
<acc.item @value={{1}} @title="First item">
<p>Lorem ipsum...</p>
<button {{on "click" (fn acc.change 2)}}>
Next
</button>
</acc.item>
<acc.item @value={{2}} @title="Second item">
<p>Lorem ipsum...</p>
</acc.item>
<acc.item @value={{3}} @title="Third item">
<p>Lorem ipsum...</p>
</acc.item>
</BsAccordion>
In the example above the first accordion item utilizes the yielded change action to add some custom behaviour.
Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.
isSelected unknown private
The value of the currently selected accordion item
itemComponent {String} private
selected unknown public
The value of the currently selected accordion item. Set this to change selection programmatically.
When the selection is changed by user interaction this property will not update by using two-way bindings in order
to follow DDAU best practices. If you want to react to such changes, subscribe to the onChange action
onChange
public
Action when the selected accordion item is about to be changed.
You can return false to prevent changing the active item, and do that in your action by
setting the selected accordingly.
Event Payload:
-
newValueObject -
oldValueObject