Dropdown Custom Element

Create a dropdown with text and images using a custom element.

上級

13K

出版された：

February 25, 2020

によって

アンカー 1

開発者を雇う

説明例

This example demonstrates how to use a custom element (web component) to implement a dropdown where each option contains a text label and an image.

The custom dropdown can be customized by tweaking some of the example's code.

Note: This is an advanced example, requiring an understanding of HTML, CSS, and JavaScript.

Note: Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.

コード例

タブ1

タブ2

タブ3

このコードによる解決は複雑になる可能性がある。

信頼できるベロ開発者を雇う

どのように構築したか

コレクション

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

ページ要素

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.