Stacked Icon
You can use the Stacked Icon UI Pattern to stack one icon on top of another, thus creating a new icon with its own distinctive meaning.
How to use the Stacked Icon UI Pattern
In this example, we create a NO PHOTOGRAPHY icon by stacking a ban icon on top of a camera icon.
-
In Service Studio, in the Toolbox, search for
Stacked Icon.The Stacked Icon widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
-
From the Toolbox, drag the Stacked Icon widget into the Main Content area of your application's screen.
-
On the Properties tab, select the relevant icons. In this example, we select a ban icon for the front icon, and a camera icon for the back icon. We also set the front and back icon colors and size.
After following these steps and publishing the module, you can test the pattern in your app.
Properties
| Property | Description |
|---|---|
| IconFront (IconName Identifier): Optional | The icon that displays in front of the other icon. Some of the predefined values include:
Examples
|
| IconBack (IconName Identifier): Optional | The icon that displays behind the icon. Some of the predefined values include:
Examples
|
| IconFrontColor (Color Identifier): Optional | Front icon color. Red, orange, yellow, lime, green, blue, violet, and pink are just some of predefined colors available for the badge. Examples
|
| IconBackColor (Color Identifier): Optional | Back Icon color. Red, orange, yellow, lime, green, blue, violet, and pink are just some of predefined colors available for the badge. Examples
|
| IconSize (IconSize Identifier): Optional | Sets the icon size. The predefined values are:
Examples
|
| InvertSize (Boolean): Optional | If True, the icon sizes are swapped. If False, they are not swapped. |
| ExtendedClass (Text): Optional | Adds custom style classes to the UI Pattern. You define your custom style classes in your application using CSS. Examples
|