PrintAs you've no doubt seen as an end user of graphical user interfaces, tabs are often provided for switching between parts of the interface. Calcite provides a Tabs component for developers to implement this sort of design. The Tabs component has a child Tab Nav component, which defines the navigation piece of the interface (i.e., the tab headings/labels). The headings are defined using Tab Title components. In addition to the Tab Nav, the Tabs component also contains multiple child Tab components (one for each Tab Title).
Here's an example that demonstrates the implementation of the Tabs component:
See the Pen calcite tabs by Jim Detwiler (@jimdetwiler) on CodePen.
This app is used to present data from a set of related AGO web maps, each web map being displayed through a different tab. Note in the HTML the use of the calcite-tabs, calcite-tab-nav, calcite-tab-title, and calcite-tab elements, corresponding to the components discussed above. Also note that each calcite-tab contains a div that is used as a container for a WebMap. The JS code is fairly straightforward. A separate WebMap and MapView object is created for each race category that had a tab configured for it in the HTML.
The coding of this app is not particularly graceful as it contains a lot of copy/pasted lines in both the HTML and JS. Here's a version of the app that handles the creation of the tabs more elegantly:
See the Pen calcite tabs array by Jim Detwiler (@jimdetwiler) on CodePen.
In this version, note the following:
- Only the Tabs component is defined in the HTML at design time; its child components are created dynamically by the JS.
- The child components are created and added to the page using the DOM createElement() and appendChild() methods introduced earlier in the lesson.
- An object -- stored in the groups constant -- is used to define the racial groups to be displayed by the app along with their portal IDs. The group names are the object properties, while the portal IDs are the associated values.
- A loop is used to iterate over each property/value pair in the groups object.
- Within the loop, the key variable stores the group name on the current iteration. Retrieving the portal ID for that group is done using the expression groups[key].
- With this version of the app, adding other racial groups is as simple as adding the name and portal ID to the groups variable (as opposed to copying/modifying several lines in both the HTML and JS).