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>