Components for Embedding

Embark on embedding components within one another to construct and maintain intricate layouts more effectively. As an illustration, consider transforming a button into a component. Later on, you can embed this button component into various other components across your site. Placing it within your navigation component, hero section component, or feature card component grants you the flexibility to individually update each component in a centralized location and witness the changes cascade through every other instance.

This session will teach you:

1. Techniques for embedding an existing component
2. Procedure to design a new nested component from portions of an existing component
3. Establishing links between nested component attributes and parent component attributes

Embedding an Existing Component

To embed an existing component within another component:

1. Choose the desired component for placing another component
2. Modify the primary component
3. Access the Componentspanel (alternatively, utilize the keyboard shortcut Shift + A)
4. Drag a component from the panel and release it into the selected component on the canvas or in the Navigator

Creating a New Nested Component from Existing Elements

To craft a fresh component within an existing component:

1. Select the component where you wish to insert another component
2. Modify the main component
3. Select the desired element for conversion into a component
4. Access the Stylepanel or the Element settingspanel
5. Click the icon labeled “create component” at the panel’s top
6. Name your new component and hit Create

Furthermore, it’s possible to generate a component from a parent element that already hosts a component, leading to a child component nested inside a parent component.

Aligning Nested Component Attributes with Parent Component Attributes

Upon embedding a component — which already features defined component attributes — within another component that also holds component attributes, the choice arises to link the nested component’s attributes to the parent component’s attributes. This paves the way for the nested component attributes to leverage altered values from the parent component instances.

For instance, envision having a card containing a header, body text, and a button. The card functions as a component, while the button element within the card serves as a component (i.e., a nested component). You retain the option to link the button text to any text within the card, provided that each element within the component comes with defined component attributes.

To establish connections between a nested component’s attributes and a parent component’s attributes:

1. Select the parent component housing the nested component and modify its main component
2. Modify the main component of the nested component that includes the element(s) requiring linkage to a parent component attribute
3. Click on the element
4. Navigate to the Element settingspanel and create an attribute
5. Exit the main component of the nested component
6. Move to the primary component of the parent component
7. Access the panel on the right
8. Click the purple “dot” icon adjacent to the attribute for linkage
9. Select “Create & connect new attribute” and create an attribute
10. Exit the main component of the parent component
11. Choose the parent component’s instance
12. Visit the panel on the right
13. Allocate a value to the attribute