The Scrollable Area Pattern is a simple scrollable block with a placeholder for content. You can use this pattern to display multiple elements in a single, scrollable row or column.
How to use the Separator UI Pattern
In Service Studio, in the Toolbox, search for
The Scrollable Area is displayed.
From the Toolbox, drag the Scrollable Area widget into the Main Content area of your application's screen,
By default, the Scrollable Area widget contains a Content placeholder.
Add the relevant content to the Content placeholder.
In this example, we add some images by dragging the Image widget into the Content placeholder, and on the Properties tab, from the Image dropdown, select the relevant images.
On the Properties tab, you can customize the Scrollable Area's look and feel by setting any of the optional properties, for example, the height and width of the scrollable area.
After following these steps and publishing the module, you can test the pattern in your app.
|Orientation (Orientation Identifier): Optional||Set the orientation to either horizontal or vertical. Note that, when the Orientation is set to vertical, a fixed height value must be added.|
|Height (Text): Optional||Define the height of the scrollable area. If not defined, the height of the of the parent wrapper is used (100%).|
|Width (Text): Optional||Define the width of the scrollable area. If not defined, the width of the parent wrapper is used (100%).|
|ScrollbarType (ScrollbarType Identifier): Optional||Choose between different scrollbar types - Compact, Default, and None. If None is selected, the scrollbar is invisible, but you can still scroll. Horizontal scroll is not enabled with the mouse wheel but can be done with mousepad gestures.|
|ExtendedClass (Text): Optional||Add custom style classes to the Scrollable Area UI Pattern. You define your custom style classes in your application using CSS.