现代下拉组件 HTML

长话短说

我想挑战自己构建一个自定义下拉组件，该组件可与 HTML 表单配合使用，并且在所有平台和浏览器上看起来都相同。我终于成功制作了一个，这是如何...

代码

代码可以在这支代码笔上找到。

它是如何完成的

• 创建一个扩展 HTML 元素的本机 Web 组件。
• 赋予它拥有多个主题的能力（使用 CSS 中预定义的颜色）。
• 允许使用 setAttribute 或通过触发其中包含项目的事件来设置其项目。
• 监听指示何时选择项目的自定义事件。
• 让它能够成为任何 HTML 表单的一部分。请注意，在撰写本文时，需要 element-internals-polyfill 才能在某些浏览器（例如 Safari）上运行。

下拉组件的UI

它由三个元素组成。

1. 显示当前所选项目的只读输入元素。
2. 一个（最初隐藏的）div，其中包含下拉菜单中的项目。
3. 指示下拉菜单状态（打开或关闭）的图标。请注意，使用的 svg 改编自 Bootstrap 图标。

业务逻辑

1. 连接后，在其选定的主题中显示组件。如果没有选择，请选择默认的。
2. 注册以声明方式创建组件时传递的下拉列表和项目选择事件。
3. 触发下拉事件后，捕获项目并将它们添加到列表中。
4. 提供以编程方式设置所选项目的能力。当服务提供商预先知道当前选择的项目时，这特别有用。例如，预订网站中的位置列表，理想情况下应该显示用户当前居住的城市。

看起来怎么样

结论

我们使用浏览器可用的工具创建了一个现代的可定制下拉组件，它在任何地方看起来都一样。如果您有任何补充或疑问，请随时告诉我。

祝您开发愉快！

以上是现代下拉组件 HTML的详细内容。更多信息请关注PHP中文网其他相关文章！