Add Slots to a Fragment

As a fragment author, you can add one or more slots to your fragment as placeholders, so those who consume the fragment can drop in their own components or content. Let's say you want a greeting area for users to add their own content. To do this, you'd define a slot where your fragment's consumers can add whatever they want, be it text or images.

Fragment slots are similar to component slots. They can be used—or left unused—just like component slots. The only difference is that fragment slots cannot have a "default" slot.

To add slots to a fragment:

1. Open your fragment in the Fragment Designer. For demo purposes, let's assume you're working with the greeting fragment to define an area for your users to provide some greeting text on a page.
2. From the Components palette, drag and drop a Fragment Slot onto the fragment.
   
   
   Description of the illustration fragmentslot-dnd.png
   
   
3. In the Fragment Slot's Properties pane, enter a slot name in the Name property (for example, greetingArea).
4. Define other properties as needed:
   1. To use a more descriptive identifier instead of the slot name, enter a Display Name that will appear in the slot's placeholder area as well as wherever the slot name is shown.
   2. To provide a visual cue to users that something can be dropped into the area, select Default Placeholder to generate a placeholder for the slot based on its name or display name.
   3. To let fragment users know what the fragment is meant for, provide a Description.
   4. To indicate the type of content that the slot can contain, select from the Preferred Content list. For example, if you expect the slot to hold image elements, you might search and select the Avatar and Image components.
   5. To allow fragment users to see actual data in the custom slot component, set up the Context.
   
   

   
   Description of the illustration fragmentslot-defaultplaceholder.png

   
   
5. It's also possible to add a fragment slot to a slot inside another component (for example, a slot inside a button), allowing fragment users to customize those slots in the fragment. To do this:
   1. Drag and drop a Button onto the fragment canvas, then set it up as desired.
   2. Drag a Fragment Slot and drop it onto the Button, then select a slot in the button (for example, startIcon):
      
      
      Description of the illustration fragmentslot-buttonslot.png
      
      
   3. Enter a name for the fragment slot in the button's slot (for example, buttonIcon); optionally, define other properties:
      
      
      Description of the illustration fragmentslot-buttonslot-name.png
      
      

Now when the fragment is used on a page, it reveals its slots (greeting and buttonIcon in our example) on the page canvas, the page structure (shown here with Show Slots selected), and the fragment's properties:

Description of the illustration fragmentslot-page.png

As a fragment consumer, you can now add the component of your choice to the slots revealed in the fragment. For demo purposes, let continue our greeting example and add a heading to the fragment slot on the canvas.

1. Drag and drop a Heading onto the Fragment Slot (greeting, for example).

   Tip:

   You can add components to a fragment slot on the canvas and in Structure view just as you would component slots. For example, when you drag a Heading component and drop it directly onto the fragment in the canvas, you'll be prompted to select a slot declared in your fragment. This way, you'll be able to drop content into slots that don't include a default placeholder:
   

   
   Description of the illustration fragmentslot-canvas.png

   
   
2. Update the slotted component's properties as needed. For example, you might update the Heading's text to display your greeting:
   
   
   Description of the illustration fragmentslot-paragraph.png
   
   
3. To customize the fragment slot in the slot inside the button, select the fragment to view the fragment's Properties pane, then simply drag and drop a component of choice onto the fragment slot. For example, drag an Icon from the Components palette onto the buttonIcon.
   
   
   Description of the illustration fragmentslot-propertiespane-dnd.png
   
   

   Alternatively, hover over the buttonIcon slot in the fragment's Properties pane and click the Insert Component icon (). Components marked as Preferred Components for the slot show in this view. Select a preferred component or any other component of your choice.
   
   Description of the illustration fragmentslot-propertiespane.png
   

4. After you've dropped the icon to the fragment slot, you can select the icon to further customize it:
   
   
   Description of the illustration fragmentslot-buttonicon-custom.png