Use the slot property

Slot is one type of component properties.

Component creators can designate specific parts within a component as slots, which can be customized by designers based on specific scenarios. Component creators can also use slots to define layout template components, allowing other designers to implement these guided layouts.

With the slot feature, we can enhance the flexibility in components, simplify the building and maintenance of design systems, and better balance the consistency and flexibility.

Slots can be created and managed just like any other component properties. More tips about component properties in Component properties.

Case 1: Enhance flexibility of components

When creating components, designers can draw frames in specific areas that require flexible design based on business scenarios (such as the content area of a dialog component) . These frames can be linked to slot properties.

Component users can design within slots in an instance, tailoring their designs to fit specific needs.

Tips：Only frames can be linked to slot properties. You can add or delete layers within slots in an instance. The instance will not be detached from its main component.

Case 2: Define layout templates

Component creators can define layout templates in components by using slots. For instance, you define the layout of a dashboard assigning specific slots for the navigation bar, sidebar, and content area, as demonstrated in the example below.

Designers can design within slots of corresponding instances, ensuring consistency with pre-established layout guides.

Tip：Component creators can add smart layout to slots. When users drop objects into instance slots, the objects automatically adjust to follow the smart layout settings (direction, gap, fill, etc.).

Case 3: Simplify the building and maintenance of design systems

Before the slot feature was introduced, building a component for complex scenarios often involves enumerating common cases with component variants and other properties. There can still be edge cases that are not adequately addressed. Both creation and usage can be complex, involving using multiple component properties and nested instances simultaneously. For example, without slots, creating a tab bar component requires enumerating scenarios with different numbers of tabs.

Now with slots, you can create a slot in the appropriate area within the tab bar component and add smart layout to the slot. When users invoke the tab bar component, they can simply add or remove tabs within the slot to obtain a tab bar instance with varying numbers of tabs, all while adhering to the design guides required for tab bars.

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful