类型

下拉菜单

下拉菜单。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

选择

下拉菜单可用于在表单中选择选项。

搜索选择

选择下拉菜单允许用户搜索大量选项。

多重选择

选择下拉菜单允许多重选择。

多重搜索选择

选择下拉菜单允许多重搜索选择。

可清除的2.4.0

使用可清除设置将允许用户从下拉菜单中删除他们的选择。

搜索下拉菜单

下拉菜单可以是可搜索的。

菜单内搜索

下拉菜单可以在其菜单内包含一个搜索提示。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

具有多重选择的下拉菜单可以在其菜单内包含一个搜索提示。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

内联

下拉菜单可以格式化为在其他内容中内联显示。

指向

下拉菜单可以格式化为使其菜单指向。

下面的示例显示了(大致)所需的标记,但它不具有功能性,因为我们目前不支持嵌套下拉菜单。

如果没有为此打开的拉取请求,您应该 贡献!

浮动

下拉菜单可以显示为浮动在某个元素下方。

简单

简单的下拉菜单无需 Javascript 即可打开。

内容

标题

下拉菜单可以包含一个标题。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

分隔线

下拉菜单可以包含分隔线以分隔相关内容。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

图标

下拉菜单可以包含一个图标。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

描述

下拉菜单可以包含一个描述。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

标签

下拉菜单可以包含一个标签。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

消息

下拉菜单可以包含一个消息。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

浮动内容

下拉菜单可以包含浮动内容。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

输入

下拉菜单可以包含一个输入。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

图像

下拉菜单可以包含一个图像。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

状态

加载中

下拉菜单可以显示它当前正在加载数据。

错误

发生错误的下拉菜单可以提醒用户存在问题。

活动

活动的 dropdown 的菜单处于打开状态。

禁用

禁用的 dropdown 菜单不允许用户交互。

禁用的 dropdown 项目不允许用户交互。

变体

滚动

下拉菜单可以使其菜单滚动。

当使用子组件 API 时,下拉菜单的状态不会完全管理。简写属性 API 完全管理状态,但需要扩展以支持此处显示的标记。

如果没有为此打开的拉取请求,您应该 贡献!

紧凑

紧凑的 dropdown 没有最小宽度。

流体

dropdown 可以占据其父元素的全部宽度。

菜单方向

dropdown 菜单或子菜单可以指定其应打开的方向。

下面的示例显示了(大致)所需的标记,但它不具有功能性,因为我们目前不支持嵌套下拉菜单。

如果没有为此打开的拉取请求,您应该 贡献!

用法

聚焦时打开

一个当聚焦时打开的下拉菜单。

失去焦点时关闭

一个当失去焦点时关闭的下拉菜单

按 Esc 键关闭

一个当用户按下 Esc 键时关闭的下拉菜单。

更改时关闭

一个多重选择 dropdown 可以在用户更改其值时关闭。

导航时选择

下拉菜单可以选择是否在使用箭头键导航菜单时更改值。

受控

dropdown 可以表现得像受控输入。

不受控

dropdown 可以表现得像不受控输入。

无结果消息

您可以更改无结果消息。

您可以删除无结果消息。

远程

dropdown 的选项可以根据搜索更改从外部控制。

允许添加

使用 allowAdditions 使用户能够添加自己的选项。

allowAdditions 可以与 multiple 一起使用。

您可以提供一个自定义的 additionLabel 作为字符串。

或者提供 additionLabel 作为组件。

触发器

dropdown 可以渲染一个节点来代替文本。

多重自定义标签

"multiple" dropdown 可以为选定的项目渲染自定义标签。

项目内容

dropdown 项目可以在菜单内以不同的方式渲染。

搜索输入

dropdown 实现了一个搜索输入简写。

搜索查询

dropdown 允许您传递搜索查询。

此示例还展示了如何覆盖搜索查询的默认行为,并在选择后保留输入的值。

自定义搜索函数

dropdown 允许您提供自己的搜索函数。

向上

dropdown 可以向上打开其菜单。

环绕选择

dropdown 可以启用或禁用当选择到达末尾时将其环绕到开头,反之亦然。

这是底部
由以下提供闪电般的部署 Vercel.