当前位置: 首页 > 科技观察

可自定义的选择控件:-selectmenu-

时间:2023-03-19 22:20:18 科技观察

今天我们将介绍一个实验性的HTML表单控件:.它比传统元素更容易设计风格。1.选择控件的现状对于浏览器内置的表单控件(尤其是),不可能自定义外观以适应其网站的设计或用户体验。据调查,Web开发人员对CSS样式问题最多的是控件。当开发人员从头开始重新实现表单控件时,无法利用浏览器来优化控件的性能、可靠性和可访问性。提供完全可定制的,允许Web开发人员对其进行更改以适合他们的站点,从而节省开发人员的时间并改善与控件交互的用户体验。虽然样式化按钮相对容易,但样式化选项几乎是不可能的:因此设计系统和组件库已经推出了自己的选项,用于使用自定义HTML、CSS和JavaScript从头开始??制作控件,以便能够更好地与其他组件集成.然而,正确定位弹出菜单并不容易。多年来,Web开发人员花费大量时间一遍又一遍地尝试解决相同的问题。现在,是时候拥有一个可以设置样式的内置选择控件,这样您就不需要编写这些额外的代码了。2.OpenUI控件由OpenUI提出。OpenUI是一组开发人员、设计人员和浏览器实现人员致力于解决这个问题,并且在他们解决这个问题时,其他缺失的控件。OpenUI的目标是最终使Web开发人员能够设计和扩展内置UI控件(这包括,还包括下拉菜单、复选框、单选按钮等)。为实现这一目标,他们制定了有关如何在Web平台中实施这些控件以及它们应满足的可访问性要求的规范。该项目仍处于起步阶段,但进展很快,正如我们将在下面看到的,令人兴奋的事情已经发生。OpenUI官网:https://open-ui.org/3.控件状态Chromium基于OpenUI的一样,它有一个显示所选值标签的按钮,单击按钮时出现的弹出窗口,以及显示的选项列表.那么为什么要用一个新名字呢?如果不直接替换现有的控件已经在网络上流行了很长时间,所以最好不要以任何方式更改它,以免引起重大的兼容性问题。因此,计划(这都是实验性的)是将作为一个独立于:包含按钮和列表框的根元素;选择一个选项

的slot="button"属性selectmenu>告诉
的内容替换它的默认按钮。内部
这里使用的也是由OpenUI并已在Chromium中实现。包含behavior="listbox"属性的元素必须是。behavior="listbox"属性告诉浏览器在点击按钮时打开这个元素,用户可以使用鼠标、方向键和触摸键选择其中的上述代码。定义标签以替换默认部分,并通过添加新元素来扩展控件的标签。这对于使用额外信息扩充列表框或按钮或添加新功能很有用。来看例子:选择植物

树木

在这里,使用自定义标签包裹选项列表并创建我们的自己的内容,效果如下:6.替换整个shadowDOM最后,如果上面的内容还不够,还可以调用attachShadow()来完全替换默认的shadowDOM来扩展控件的元素例如,上面的示例可以修改如下:这样写,的自定义元素被完全封装在它的shadowDOM中所以,可以放置在任何页面上而不受周围内容样式的干扰。V.总结正如我们所见,新的实验性控件在样式方面提供了很大的灵活性,甚至扩展了传统的