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}}