0.0.0-beta.4 • Published 8 years ago
ember-bs4-collapsible-panel v0.0.0-beta.4
Ember Bootstrap 4 Collapsible Panel
This project contains the necessary tools needed to create Bootstrap 4 collapsible panels (now cards ¯\(ツ)/¯) using an Ember contextual component.
Basic Usage
Using the collapsible-panel, you have acces to the three main sections of the panel: the header, the body and the footer. They are all optional, but of course -- without a body, you'll only end up with an empty div with the card class.
It's up to the developer to fill in the header, body and footer.
{{#collapsible-panel as |panel|}}
{{#panel.header}}
[...]
{{/panel.header}}
{{#panel.body}}
[...]
{{/panel.body}}
{{#panel.footer}}
[...]
{{/panel.footer}}
{{/collapsible-panel}}Customizations
Some customizations are possible.
| Property | Description | Default Value |
|---|---|---|
collapsed | Used to specify the panel's state; whether it is collapsed or not. | false |
collapsible | Used to specify if the panel has the ability to collapse. | true |
collapseFooter | Used to specify if the footer should collapse with the body when the user collapses the panel. | true |
{{#collapsible-panel
collapsed=false
collapsible=true
collapseFooter=true
as |panel|
}}
[...]
{{/collapsible-panel}}| Property | Description | Default Value |
|---|---|---|
defaultIcon | Used to specify what class should be attached to the icon at the top right of the panel's header when the panel is in the expanded state. | fa fa-minus |
collapsedIcon | Used to specify what class should be attached to the icon at the top right of the panel's header when the panel is in the collapsed state. | fa fa-plus |
{{#panel-header
defaultIcon="default-icon-class"
collapsedIcon="collapsed-icon-class"
}}
[...]
{{/panel-header}}