Add a slot
Canvas guides how business users work with your front-end design. Configure your project's design system and style guide so Canvas can make composing pages and experiences intuitive and consistent.
Manage this configuration through slots (or placeholders) and slot restrictions. In the previous lesson, you created a new component for your project. Now you'll walk through creating a new slot in that component.
For this exercise you'll add a new, related content slot in the Video Player component. With this, users can add related content (such as a CTA) to a video. During the lesson you will:
Goals
- Add a slot to the component definition (Related)
- Add a slot to the component source code
- Configure the slot in Uniform (allowed components)
- Add a component to the new slot in the composition
Add a slot to the Uniform component definition#
- In Uniform, navigate to Content > Components.
- Open the component Video Player.
- Click Slots.
- Click Add slot.
- Enter the following values:
Field Value Slot Name Related
Public ID related
Allowed Components Specify allowed components - From the list of components, select Call to Action.
- Click OK.
- Click Save and close.
Add slot to front-end component#
- In your source code, update the following file:
src/canvas/VideoPlayer.tsx
Add components to slot#
- In Uniform, open the project map.
- Navigate to Home > Articles > The Golden Ratio of Coffee.
- Under the video player component, click the + next to VideoPlayer Related.
- Add one or two new component using Call to Action.
- Click Publish.