Click to Create

Click to Create

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

Popover Menu

  • 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