How to Create Overlapping Instances in Ignition Flex Repeater (Avatar Stack Style)

Ignition
1

I'm working with the Flex Repeater component in Ignition Perspective, and I need to overlap each instance (like avatar circles) slightly over the previous one—similar to the image I’ve attached.
image

Is there a way to achieve this within a Flex Repeater? Has anyone implemented something like this before? Any suggestions or ideas would be greatly appreciated.

Thank you!

2

No, but I'd try negative margins first.

5 Likes
3

Check Pikaview resource by IA on Exchange. Ignition Exchange | Inductive Automation
It will be good starting point.
image

1 Like
4

You can use overflow: visible to achieve this:

image
image523×370 18.9 KB

Repeater:

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "FlexRepeater"
        },
        "position": {
          "basis": "100px",
          "shrink": 0
        },
        "props": {
          "elementPosition": {
            "basis": "16px",
            "grow": 0,
            "shrink": 0
          },
          "elementStyle": {
            "overflow": "visible"
          },
          "instances": [
            {
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            }
          ],
          "path": "icon",
          "useDefaultViewWidth": false
        },
        "type": "ia.display.flex-repeater"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

Embedded icon:

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 28,
      "width": 20
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Icon"
        },
        "position": {
          "basis": "34px",
          "shrink": 0
        },
        "props": {
          "path": "material/insert_emoticon",
          "style": {
            "width": "34px"
          }
        },
        "type": "ia.display.icon"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible"
      }
    },
    "type": "ia.container.flex"
  }
}