Section Group
You can use the Section Group UI Pattern to keep the context of the header while scrolling through content.
How to use the Section Group UI Pattern
-
In Service Studio, in the Toolbox, search for
Section Group.The Section Group widget is displayed.
-
To From the Toolbox, drag the Section Group widget into the Main Content area of your application's screen.
By default, the Section Group widget contains 3 Section widgets which contain Title and Content placeholders.
-
Add your content to the placeholders.
In this example, we add a title to the Title placeholder and some text to the Content placeholder.
-
On the Properties tab, you can customize the Section Group's look and feel by setting any of the (optional) properties.
HasStickyTitles = False
HasStickyTitles = True
After following these steps and publishing the module, you can test the pattern in your app.
Properties
| Property | Description |
|---|---|
| HasStickyTitles (Boolean): Optional | If set to True, the section titles stay at the top of the page while the user scrolls through the content. If false, the section titles scroll with the content. |
| TopPosition (Integer): Optional | Sets the position of the first section title. Only applicable when HasStickyTitles property is set to True. |
| ExtendedClass (Text): Optional | Add custom style classes to the Section Group UI Pattern. You define your custom style classes in your application using CSS. Examples
|