Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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.

    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 Add custom style classes to the Separator 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 Stacked Icon UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Stacked Icon UI styles being applied.
    • Was this article helpful?