[W3C新提案] Select 标签升级版 Selectmenu

鲁宽宽
466 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
——Bug修复员-鲁宽宽

背景

对于尝试使用浏览器的内置表单控件（如select标签）的开发人员来说，一个常见的挫折是他们无法自定义这些控件的外观以适合其网站的设计或用户体验。

select现状

 这里列举两个不友好的点：

  • 无法识别option内嵌套的标签
<select>
    <option value="1">
        <div style="color: red;">Option 1</div>
    </option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

 期望: [Option 1]文本为红色

 结果: 依旧是默认颜色（非红色）

 原因: 浏览器在解析option时会移除内部标签

  • 无法对select内部元素扩展
<select>
    <div class="scroll-to-top">向上滑动</div>
    <option value="1"></option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <div class="scroll-to-bottom">向下滑动</div>
</select>

 期望：当option元素过多时，展示顶部与底部的操作按钮，控制元素滑动

 结果: 并未符合预期,如下图

 原因: 浏览器在解析select时会移除非option标签

图一

 为了不仅实现上述功能，还有更好的视觉呈现。

因此，设计系统和组件库一直在推出自己的选择，使用自定义 HTML 标记、CSS 以及通常大量的 JavaScript 从头开始制作，以便与其他组件很好地集成，如antd、element-ui等。

 也是由于这些开源的组件库，减少了使用者心智负担。那有没有一种更友好的内置插件来减少大家的负担呢。是时候聊聊标签了。

selectmenu标签

可以自由地设置select各个部分的样式，且支持自定义dom扩展。

  此提案由open-ui（UI 缺失的行业标准定义）维护组向W3C组织发起的，并chrome维护团队纳入计划之中。

  我们先来了解此UI控件的结构。 图2

  • <select>- 包含按钮和列表框的根元素。
  • <button>- 触发列表框可见性的按钮元素。
  • <selected-value>- 显示当前选定选项值的元素（可选）。请注意，此部分不一定必须位于该部分内。
  • <listbox>- 包含<option>(s) 和<optgroup>(s) 的包装器。
  • <optgroup>- 组<option>和标签（可选）。
  • <option>- 可以有一个或多个，代表用户可以选择的潜在值。

  百说不如一试，先来看看简单的效果。

1、常规使用

<selectmenu class="selectmenu-one">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
 </selectmenu>

效果如下：

图三

  可以发现视觉上与普通的select有些不同之外，也没有什么特殊的。

  既然select有存在咱们上面说的两个问题，那来看下selecemenu是否可以解决呢？

2、自定义内部元素

<selectmenu class="selectmenu">
    <div slot="listbox">
      <popup behavior="listbox">
        <div class="top">向上滑动</div>
        <div class="wrap">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>
        </div>
        <div class="bottom">向下滑动</div>
      </popup>
    </div>
</selectmenu>

效果如下（忽略样式~）：

图三

  当然它的功能远不止这些，有兴趣的伙伴，可以亲自体验体验。

体验selectmenu标签

环境：谷歌浏览器
访问：chrome://flags/#enable-experimental-web-platform-features
如下图选择，刷新浏览器就可以体验这一功能。 图三

结语

  今天的分享就到此结束了，感谢陌生的你耐心阅读~

参考资料：
1、css-tricks.com/the-selectm…
2、chromestatus.com/feature/573…
3、open-ui.org/components/…
4、microsoftedge.github.io/Demos/selec…

avatar
文章
阅读
粉丝