Hi, we are trying to implement in Plasmic a Slider Component with two sub Components: a SliderBox Component with images at the top, and a Navigator Component with navigation buttons at the bottom. The SiderBox Component has a variant group called with 5 states (1,2,3,4,5) same with the Navigator Component. In Figma we were able to implement transitions (between slides) using Figma Interactions. How can we do the same in Plasmic? What we want to accomplish: every time someone clicks on a navigation button (inside the Navigator Component) the State (curret slide) of the SliderBox component changes. We are thinking about implementing the Navigator Component as a Code-Component exposing a DataProvider so that it can be used a dynamic value to activate the SliderBox Component. Is this the only way? Thanks.
Hi, it depends a bit on your goals and how editable you want things to be in plasmic. I would probably approach it similarly to our slider carousel components:
• Make the component take children. These are the individual slides. The component knows how to programmatically switch among these.
• You only need to expose the navigator component and slider box component as separate components if you want your plasmic editors to be able to change up the design and layout of the navigator separately. If they don’t need to do that and it’s relatively unchanging, then you can just leave it as one atomic component.
• You may want to render things a bit differently in edit mode versus live mode for easier editing and manipulation. You can consult plasmic canvas context
• No need for dynamic values
(and if you do want to deconstruct the component into a family of components like that, then you can make them communicate via context, so that the click event on the navigator dispatches the correct action/state update to the slider box)
