Skip to main content
Question

Component with child components

  • November 12, 2021
  • 2 replies
  • 5700 views

James_Jara

Hello, I have tried several several strategies without a solution.

We are trying to implement the following 2 components both having the same issue, they are containers in mobile app.

  1. Carousel > (N) cards
  2. Screen > (N) child

Case #1.
I want to create a component called Carousel with variants like showCounter, border, etc and another component called card, or could called View.
How I can create a component that can accept childs node like other components?

case #2
I want to create a component called screen with variants like fullscreen,fixed, scroll, this screen is the main screen component in the mobile app, new screen will be using the screen component as parent and as childs any other component, how can archive this using components? I want to use components because Screen it’s a component not a group either a Layer

layout example:
<Screen …variants>



This topic has been closed for comments

2 replies

AlicePackard

Hey James, if I understand correctly it sounds like you’d like to use components to hold a wide variety of nested components (the “Screen” component is a great example).

A method I’ve found success with is using “Placeholder” components that you can swap out with any other component (like child component instances inside a main “Screen” parent component, or child “Card” component instances inside of a “Carousel” parent component). @Adam_Ruthendorf-Przewoski made a really helpful video tutorial where he demonstrates how to apply this method.

I’m also really curious to know what strategies you’ve already attempted that didn’t give you the results you were looking for 👀

Hope the “Placeholder component” one does the trick for you!


  • 0 replies
  • December 15, 2021

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings