8.6 Calcite Design System

One recent development associated with the Maps SDK for JavaScript is the Calcite Design System.  This is a set of Esri resources, including a web component library, that simplify the development of rich user interfaces.  Web components are defined by the Mozilla Development Network as:

a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps (https://developer.mozilla.org/en-US/docs/Web/API/Web_components).

If it wasn’t clear, we’re talking about custom HTML elements, which can be implemented in a similar way to native HTML elements.  To give an example, one commonly used Calcite component is the Panel, which can be instantiated in your HTML code like so:

    <calcite-panel>
    ...
    </calcite-panel>

An important concept to understand in dealing with web components is that of the slot, which is a placeholder for defining content associated with an element.  Slots are implemented in native HTML too.  For example, the select element discussed earlier in the lesson is used to display dropdown lists:

    <select>
        <option value="psu">Penn State</option>
        <option value="osu">Ohio State</option>
        <option value="um">Michigan</option>
    </select>

The embedded child option elements in the code above can be said to be in the select element’s default slot.  Returning to the Calcite Panel component, it similarly has a default slot.  Here, we’re putting an h3 element in a Panel’s default slot:

    <calcite-panel>
        <h3>Layer Filter Options</h3>
    </calcite-panel>

In addition to the default slot, web components can be programmed with other named slots.  The Calcite Panel component has several including, for example, “footer.”  As you may have guessed, this slot can be used to add content to the bottom of the Panel element.  Here, we’re putting a Calcite Button component in a Panel’s footer slot:

    <calcite-panel>
        <calcite-button slot="footer">Cancel</calcite-button>
    </calcite-panel>

In this section of the lesson, we'll see a few example apps that implement Calcite.  We'll start by walking step by step through the creation of a simple app built from some Calcite components.  Later, I’ll discuss a few other finished apps that demonstrate the implementation of some other components.  As part of the discussion, I’ll be referring to Esri’s Calcite Design System documentation:
https://developers.arcgis.com/calcite-design-system/