Panel widget

This widget creates a panel container and wraps the inner html inside the panel. The user configuration service is used by this widget, so the state (whether collapsed or expanded) is stored by user and will be used on future usages. To make this functionality possible, the options "user" and "section" are required.

Options (Required)

Title | data-panel-title | String | Required

Panels title value.

Options (Additional)

Collapsed icon class | data-panel-collapsed_icon_class | String | Optional

Font awesome class for collapsed icon. If no value is provided, it defaults to 'fa fa-plus-square-o'.

Expanded icon class | data-panel-expanded_icon_class | String | Optional

Font awesome class for expanded icon. If no value is provided, it defaults to 'fa fa-minus-square-o'.

Container class | data-panel-container_class | String | Optional

Additional class attributes. The values will be append to the .panel element.

Toggle time | data-panel-toggle_time | String | Optional

Toggle time for collapsing/expanding the panel. If no value is provided, it defaults to '200'.

**Collapsed | data-panel-collapsed | Boolean | Optional **

Determines the panels default state. Collapsed if set to true and expanded otherwise. If no value is provided, the user configuration will be used. If no user configuration was found, the default state is expanded.

User | data-panel-user | Integer | Optional

Customer id of user, used by user configuration service to store the collapsed state. This option should be set with the "section" option and will be ignored, if the "collapsed" option is set.

Section | data-panel-section | String | Optional

Panel section, used by user configuration service 'configuration_key'. This option should be set with the "user" option and will be ignored, if the "collapsed" option is set.

Example

<!-- usage of user configuration -->
<div data-gx-widget="panel"
     data-panel-title="Panel Title"
     data-panel-user="{$smarty.session.customer_id}"
     data-panel-section="panel-sample-section"
     data-panel-container_class="additional-sample-class">
    <div class="sample-class">
        <p>Sample Content</p>!
    </div>
</div>

<!-- usage of collapsed option -->
<div data-gx-widget="panel"
     data-panel-title="Panel Title"
     data-panel-container_class="additional-sample-class"
     data-panel-collapsed="false|true">
    <div class="sample-class">
        <p>Sample Content</p>!
    </div>
</div>
Source: