折旧

此组件已移至 anypoint-web-components/awc。 。 。 .

本组件以"材料设计"菜单为主,并被调整为"任意点"平台组件.

任意点网络组件是允许在开源项目中构建任意点启用的UI的组件集.

已曝光的下放菜单显示菜单上方当前选中的菜单项目 . 它们只有在一次可以选择单一菜单项时才能被使用.

样式选项

该元素有三个内在主题:

• 材料设计 - 已填充
• 材料设计 - 外观
• 任意点设计 - 兼容性

默认输入生成 filled 放下名单.

当 outlined 属性设置.

当 compatibility 属性设置.

OSS应用程序不应使用基于任意点的造型,因为它受到MuleSoft版权的保护. 此属性被保留给嵌入Anypoint平台的OSS应用程序.

使用量

安装

npm install --save @anypoint-web-components/anypoint-dropdown

在 HTML 文件内

<html>
  <head>
    <script type="module">
      import "@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js";
      import "@anypoint-web-components/anypoint-listbox/anypoint-listbox.js";
      import "@anypoint-web-components/anypoint-item/anypoint-item.js";
    </script>
  </head>
  <body>
    <anypoint-dropdown-menu
      aria-label="Select dinosaur from the list of available options"
    >
      <label slot="label">Selected dinosaur</label>
      <anypoint-listbox slot="dropdown-content" tabindex="-1">
        <anypoint-item>item 1</anypoint-item>
        <anypoint-item>item 2</anypoint-item>
        <anypoint-item>item 3</anypoint-item>
      </anypoint-listbox>
    </anypoint-dropdown-menu>
  </body>
</html>

联合国 anypoint-listbox 元素

使用不同元素的可能性大于 anypoint-listbox。替换应使用 任意点MenuMixin 它提供了 API 供下拉元素工作.

数值选择

当用户在下拉菜单中选择一个选项时,列表被关闭,并给定的标签是以下之一(按顺序):

• label 选定项目的属性
• label 或者说 data-label 属性 io 选定项目
• innerText 选定项目

设定的数值与 value 属性.

选择可以通过设置来控制 selected 属性/财产 anypoint-listbox 或执行要素 AnypointMenuMixin。 。 。 .

<anypoint-dropdown-menu
  aria-label="Select dinosaur from the list of available options"
>
  <label slot="label">Selected dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1" selected="0">
    <anypoint-item label="My item 1">item 1</anypoint-item>
    <anypoint-item label="My item 2">item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

默认情况下,选定值设定为 My item 1当选择选项3时,标签值变为 item 3。 。 。 .

辅助文本

辅助文本可以让用户更好地了解需要什么样的输入. 无效时可以是信息消息或无效消息 已检测到输入 .

信息消息

信息信息为用户提供了额外的字段描述. 当标签可能混淆或确保用户了解收集输入的原因时,应当使用.

<anypoint-dropdown-menu infomessage="Will be added to your order.">
  <label slot="label">Select a dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

不要试图提供过于详细的信息。 用户应当能够以一秒之差扫描消息. 将其作为标签的附加文本.

无效的消息

出错消息应当帮助用户从出错状态中恢复. 使用清晰的信息, 并简单说明如何解决问题, 例如 Only letters are allowed。 。 。 .

<anypoint-dropdown-menu
  invalidmessage="This value is required"
  invalid
  required
>
  <label slot="label">Select a dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

形式相关自定义要素

这个 窗体关联自定义元素 允许将自定义元素与 <form> 键。 原始自定义元素 spec 不允许这样做 . 某些浏览器可能不支持与窗体相关的自定义元素,因此可能需要使用自定义形式元素(例如: 铁制) (中文(简体) ).

该元素支持在浏览器中执行此API的API. 这意味着元素的行为就像 <select> 元素插入窗体元素时。 例如,请见演示页.

验证

构成部分支助 required 财务报告和审定财务报表 autoValidate 属性。 当元素是 required 然后它使状态无效,当 validate() 或者说 checkValidity() 函数调用. 这个 validate() 函数由 验证混合剂 用于自定义元素. checkValidity() 函数调用 validate() 函数,如果有的话,内部 checkValidity() 函数由窗体关联自定义元素 API提供.

这个 autoValidate 选项允许在值变化时自动调用验证函数。 它可以在自定义验证器执行时使用 验证器Mixin。 。 。 .

<anypoint-dropdown-menu required autovalidate>
  <label slot="label">Selected dinosaur</label>
  <anypoint-listbox slot="dropdown-content">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

无障碍

元素与 anypoint-listbox 共同创建一个可访问选项列表。 列表框可以被支持类似功能的其他任何元素所取而代之,但要确保它有合适的aria支持.

发展

git clone https://github.com/anypoint-web-components/anypoint-dropdown-menu
cd anypoint-dropdown-menu
npm install

本地运行演示

npm start

运行测试

npm test