Dropdown Custom Element

Collection

This example uses a database collection of countries, their labels, and images to display as  dropdown options.

Page Elements

We added a custom element to the page. The code for the custom element can be found in the Public section of the site in a file named custom-elements/dropdown.js.

Public Files

 

The design for the custom element is defined in the dropdown-design.js module, also in the Public section of the site. It contains the CSS and HTML that define the dropdown's look and feel. You can customize this code to adjust the custom dropdown to fit with your site's design.

 

To use the the custom dropdown, we've created an API in the dropdown-api.js module, also in the Public section of the site.

 

The DropdownAPI class has a constructor that takes three parameters:

• elem: The custom element the API will control.

• itemTemplate: A function that renders the HTML for a single item in the dropdown. It is called for each item in the data array set using the data property.

• globalTemplate: A function that renders the full HTML of the dropdown. This HTML is used for both the element's SEO and for displaying the dropdown itself. The function receives an array of HTML fragments generated by calling the itemTemplate function on each item in the data array associated with the custom element.

The DropdownAPI class has two properties:

• data: The data to display in the dropdown. The data is assumed to be an array of objects.

• css: A CSS string used to set the style tag of the custom element.