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.
-
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 | Add custom style classes to the Separator UI Pattern. You define your custom style classes in your application using CSS. Examples
|