Is it possible to have container components?

Ask the community
1

I’m a SW developer, so I don’t know, if my question makes sense from a design perspective…
I try to design a UI for some application where some information is shown as cards. Thus, i created components for the different types of cards I want to support and show.
As there will be an overview of the available cards, I also created a container-component (dashboard) to arrange several cards. To hold the cards, I added a board element with a flex layout (content-board).
When I now add cards to that content-board, they are arranged according to the flex-layout parameters given.

When I now register the container component (it’s planned to have that in different views) with an empty content-board as a penpot-component (v2), it gets visible in the assets list, and I can create instances in my design - but I can no longer add any components (esp. the card-components) to the content board of the instances of the container-component. When I add them, they get placed hierarchically parallel to the dashboard component and thus do not get automatically arranged by the flex-layout of the content-board.

The current solution, I see, is to cover only the static parts as components (e.g. dashboard-header), but create all the container-elements (boards) as individual boards in the main design and assure consoistent parameter settings manually…

Does any one have a suggestion? (Maybe I miss some feature of penpot…)

Thanks in advance!

Thomas

2

Hi tko! you can have a container component, creating an empty grid layout board with the layout that you want, and making it a component. After that you can place inside the grid whatever you want :slight_smile:

Hope that helps you!

C.

1 Like
3

Hi claragv, many thanks for your reply!
I tested it, and it allows me to add anything to the main component’s grid which then of course affects all instances. (This is the same, I already had with the empty flex-layout board, but of course with a grid-layout)
In my design the same container component should be used to show different collections. Thus, I would like to add different elements to the different instances of the component:
E.g. container A shows a list of person-cards, while container B shows a list of device cards, but both containers are of the same kind/design (same headers, same layout requirements)…

Thanks

Thomas

4

I do it in a dirty way. Right Click on the component > Detach instance.
Official Penpot Tutorial

5

Hello @claragv , I tried, but it doesn’t works.

I opened an issue on GitHub: feature: permit to add objects into a instanced component · Issue #4631 · penpot/penpot · GitHub

Best regards