Skip to main content

 

 

 

 
Language:
 
Applies only to Traditional Web Apps
 
 
OutSystems

Stacked Icon

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

    1. 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.

    2. From the Toolbox, drag the Stacked Icon widget into the Main Content area of your application's screen.

    3. 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:

    • Android
    • Bell
    • Camera
    • Desktop
    • Envelope

    Examples

    • Blank - Displays a camera icon (default value).
    • Entities.IconName.instagram - Displays the Instagram icon.
    IconBack (IconName Identifier): Optional The icon that displays behind the icon. Some of the predefined values include:

    • Circle
    • Square
    • Heart

    Examples

    • Blank - Displays a ban icon.
    • Entities.IconName.birthday_cake - Displays a birthday cake icon.
    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

    • Blank - Displays a black (Neutral10) icon (default value).
    • Entities.Color.Red - Displays a red icon.
    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

    • Blank - Displays a black (Neutral10) icon (default value).
    • Entities.Color.Green - Displays a green icon.
    IconSize (IconSize Identifier): Optional Sets the icon size. The predefined values are:

    • Size_2x
    • Size_3x
    • Size_4x
    • Size_5x
    • Percent_33

    Examples

    • Entities.IconSize.Size_2x - Increases the font to two times larger relative to the icon container.
    • Entities.IconSize.Size_Percent_33 - Increases the font to 33% larger relative to the icon container.
    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

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?