Custom group box widget
Overview
Groupbox widget that allows content in the header
Documentation
CustomGroupBoxWidget
Custom group box widget for web
Features
In addition to default groupbox, place content in the header.
Usage
No specific installation. Just put your content in the header and body sections.
Header mode
The default styling of the widget matches the header mode Div of the default groupbox widget. For using header (enlarged text) styles, make sure to style your header content similar to the default groupbox if you want to match the styling.
Styling
The widget can work with the same classes Mendix provides for the default group box widget. To make this easier you can adjust the settings.json file to add design properties for the widget. The test project in the GitHub repository has an example
Have a look at the Mendix documentation page on design properties for more information.
The design properties for the widget:
"itvisors.customgroupboxwidget.CustomGroupBoxWidget": [ { "name": "Style", "type": "Dropdown", "description": "Choose one of the following styles to change the appearance of the groupbox.", "options": [ { "name": "Brand Default", "class": "groupbox-default" }, { "name": "Brand Primary", "class": "groupbox-primary" }, { "name": "Brand Inverse", "class": "groupbox-inverse" }, { "name": "Brand Info", "class": "groupbox-info" }, { "name": "Brand Success", "class": "groupbox-success" }, { "name": "Brand Warning", "class": "groupbox-warning" }, { "name": "Brand Danger", "class": "groupbox-danger" }, { "name": "Transparent", "class": "groupbox-transparent" } ] }, { "name": "Callout style", "type": "Toggle", "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.", "class": "groupbox-callout" } ]