Click to Create - Lightning Design System

Jump to Navigation

This contextual action opens a modifiable, movable components list.

Click to Create Header

Introduction

With click to create, users click (or use a keyboard) to open a contextual list of components that can be added to a selected position on the canvas.

Design Resources

Download Sketch Kit

Usage

Insertion Points (Nodes)

Click to create insertion points appear:

In empty columns
Below each row (there isn’t a node for click to create at the top of the canvas)

On an empty/default canvas, include a node in any empty row/column, allowing a layout component to be selected.

A wireframe showing a click to create insertion point or node in an empty column — Click to create insertion point or node in an empty column

In a popover menu, clicking the node icon (a plus sign) changes it into a close icon. Clicking again changes it back and closes the menu.
Alslds-p-bottom_nonel menu options should map to available components in the left-hand component panel.

A wireframe showing a click to create popover — Click to create popover

Canvas Updates

When content is added to an empty canvas, add a node for click to create below each new row.
Clicking to add a component selects that component and shows its property sheet (just as when dropping a component onto the canvas).

A wireframe showing click to create being used to add a component below an existing row — Use click to create to add a component below an existing row

Next: Connectors