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

  1. Add a slot to the component definition (Related)
  2. Add a slot to the component source code
  3. Configure the slot in Uniform (allowed components)
  4. Add a component to the new slot in the composition
  1. In Uniform, navigate to Experience > Components.
  2. Open the component Video Player.
  3. Click Slots.
  4. Click Add slot.
  5. Enter the following values:
    FieldValue
    Slot NameRelated
    Public IDrelated
    Allowed ComponentsSpecify allowed components
  6. From the list of components, select Call to Action.
  7. Click OK.
  8. Click Save and close.
  1. In your source code, update the following file:

    src/canvas/VideoPlayer.tsx

    /* eslint-disable */ // @ts-nocheck import { FC } from 'react'; import classNames from 'classnames'; import { UniformText, UniformSlot } from '@uniformdev/canvas-react'; import { getTextClass } from '@/utils/styling'; export type Props = ComponentProps<{ id: string; source: string; title: string; description: string; }>; const VideoPlayer: FC<Props> = ({ title, description, source, id, }) => { return ( <div className={classNames('hero min-h-[500px] relative', 'text-secondary-content')}> <div className={classNames('hero-content text-center p-0')}> <div className={classNames('flex flex-col mx-1 md:mx-10')}> <h1 className={classNames('font-bold', getTextClass('h5'))}> <UniformText parameterId='title' /> </h1> <div className={classNames('py-6')}> <UniformText parameterId='description' /> </div> <div className='border-dashed border-4 border-gray-300 p-5 text-gray-300'> {source === 'YouTube' && <iframe width="560" height="315" src={`https://www.youtube.com/embed/${id}`} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> } {source === 'Loom' && <iframe width="640" height="360" src={`https://www.loom.com/embed/${id}`} frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> } {!source && <div className=' text-gray-300'>Select a video source</div> } </div> <UniformSlot name='related' /> </div> </div> </div> ); }; registerUniformComponent({ type: 'videoPlayer', component: VideoPlayer, }); export default VideoPlayer;
  1. In Uniform, open the project map.
  2. Navigate to Home > Articles > The Golden Ratio of Coffee.
  3. Under the video player component, click the + next to VideoPlayer Related.
    empty-slot
    The video player rendered in the preview panel in Canvas.
  4. Add one or two new component using Call to Action.
  5. Click Publish.