Passing Patterns into Other Patterns

By leveraging Slots, you can pass pattern examples into other pattern examples. This can be useful for demonstrating use cases and even for prototyping purposes.

Preparing a Pattern with Slots

Refer to the Defining Props & Slots for a Pattern guide to understand how to declare a pattern’s Slots.

Depending on the templating language you are using, Slots may be implemented in different ways in your code. In React, for example, children would be a default Slot.

Using the Slots portion of the Schema Form

Once a pattern has a Slot declared, the Schema Form will display a “+ Pattern Example” button for the Slot. Once clicked, a select menu will allow you to select a pattern and subsequent example to be passed in.

Pattern Slot Form