Let's understand the interface:
- Expand/Collapse arrow - If the Component accepts children or has composition, it will have a leading expand/ collapse-arrow indicator.
- Component type icon - There are three different components to work with in Clutch.
- A Cloud component
cloud icon(components installed from the component cloud)
- A Composition Component
building block icon(a component defined by other components).
- A Code Component
code icon(a component defined by React.js code)
- A Cloud component
- Component Name - The Name of the Component at creation.
- Close Composition Icon - If a composition component shows its composition, this icon will indicate that the components below are part of the composition. Close it if you do not want to edit it.
- Component Instance Name - You can add an instance name to any component. The instance name is a unique name you can change to help keep your component tree organized or provide a clearer understanding of what that 'branch' of components does. If you do not provide an instance name, it will default to the
- Component in composition - Will be outlined in a violet color when hovered and solid violet when selected.
Components are the building blocks of Clutch and creating your application.
The Clutch Team creates cloud components installed in your project from the Clutch Cloud these components for ease of use. The cloud icon identifies these components.
A Composition Component is a component created from other components. In the example below the
MyCustomComponent is made of 3 different components that define it. Composition components are identified by the building block icon, signifying that the Component contains other components. The building block icon identifies these components.
Code components are custom components you can create in any project. These components allow you to write your custom code to define it. The code icon identifies these components.
Components that accept children will have a collapsible arrow indicator to the left of their name.
Some components accept multiple children in various slots, for example, the
Input component from Clutch UI Kit has numerous places that render an adornment in either the tailing or leading position (or, in this example, both).
A Slot will have the slot icon (dashed box).
When you double-click a composition component to edit/alter the composition, the Component will have an
x to signify that you are in the composition and provide a way to close it. The Composition tree will highlight the Composition Components in violet rather than blue.
Right-clicking, or clicking on the context menu of each Component's row, presents the following actions:
- New Component - Takes the selected Component and creates a new one from it and its children.
- Wrap in - Choose to wrap the Component in an
Looplogic primitive (This is discussed more in the logic primitives section)
- Apply Component preset - This will set the selected Component to the default options applied on the preset Component marked for the library.
Add to library - This will add the Component to the library
- Rename Instance - Change the component instance name in the project
- Remove Template - Deletes the Template.
- Change component type- Allows you to change the component type. For example, you can select a
Boxcomponent and change it to a
- Delete Instance - Removes Instance from the composition but does not delete the Component from the project.
If the composition of your Component is showing and you right-click the Component, The Component Actions menu will show you some additional options.
- 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 component documentation viewer.
- Remove Component - removes the Component from the project.
Proper Component naming convention
When creating and naming a
new componentusers will need to create a name in PascalCase.
Watch on YouTube an overview of Composition Panel
Updated 2 months ago