Edit Page

4 Edges

Developers who want to add the 4 Edges to their Cards should check out ember-toolbars and cardstack-edges.

While Cardstack has a very strong design philosophy about "edges" and how they should be used, there is not very much that is technically complicated/specific in the implementation. The main implementation that drives the edge system is provided by ember-toolbars which is an external dependency (albeit maintained by Cardstack). The only Cardstack-specific concept that I have come across with edges is the idea of registerTopLevelComponent() on the cardstack-edges service (which is provided by the @cardstack/edges package). Essentially if an Ember addon wants to implement a new edge it will "register itself" on init with the cardstack-edges service and tell cardstack-edges what top-level component it would like to register, and this top-level component expresses the addon's use of the ember-toolbars package. For a better example of how this works you can look at the @cardstack/card-picker package, and specifically the cardstack-card-picker service and the card-picker-edges component. The card-picker has a service that maintains internal state of whether the card-picker UI (via the bottom edge) is active/visible. This card-picker service can be used in and editor (and is evident in the cardstack-card-editor field editor in the same package) to open and close the bottom edge based on the internal logic of @cardstack/card-picker Ember addon.