The composition panel reflects the component hierarchy of frames in a workspace.
The first item in the composition panel the workspace switcher. It shows the currently active workspace and when expanded, shows a list of available workspaces. Workspaces can be re-arranged and created here as well.
Right clicking, or clicking on the context menu of each Workspace row, presents the following actions:
Frames are the only top-level items allowed in compositions. Frames are spaces into which you can drop components to see them rendered. They cannot be nested into other items and may contain only components. In the composition view, frames are labelled with the Frame icon followed by the frame name.
Right clicking, or clicking on the context menu of each Frame's row, presents the following actions:
- Frame Settings - Access the current frames properties.
- Set as Project Cover - Choose a frame to use as the project tile in your dashboard.
Components in a composition view may exist in frames, nested in other components as children, or as part of a component's composition. Components in the composition view are shown as rows which feature the Component Name in a pill alongside the instance name. If the component accepts children, it will have a leading collapse-arrow indicator. Likewise, if the component has its own composition, the pill will be solid instead of outlined, meaning this component can edited.
Components that accept children will be denoted with a collapsible arrow indicator to the left of their name.
Some components accept multiple children in various slots, a common example would be something like an
IfElse component that renders one set of children if a condition is met and a whole other set of children otherwise.
Components whose compositions can be edited in the current project can be double clicked to be edited. At this point, instead of showing the components children, the hierarchy of its composition will be shown instead. The component label will feature a "back" button to allow users to exit the in-context editing experience.
Right clicking, or clicking on the context menu of each Component's row, presents the following actions:
- Create New Component - Take the current selected component and create a new component from it and its children.
- Rename Instance - Change the component instance name in the project
- Remove Template - If component is marked as a template, delete the template.
- Set as (Default) Template - If no templates for the component exist it will say "default" otherwise, it will set additional templates.
- Delete Instance - Removes instance from the composition but does not delete the component from the project.
Additionally, if the current selected component is being edited, meaning its composition is showing, additional options will be present in the context menu:
- Hide composition - This is the same as clicking the back arrow.
- Rename Component - this renames the component, not the instance, project-wide.
- Edit documentation - opens the documentation pane.
- Edit definition - opens the component code
- Remove component - removes the component from the project.
Updated 3 months ago