Dropdown 下拉菜单

通常是一个下拉列表，显示为一个可点击的按钮或文本，当用户点击或者鼠标 hover它时，会在下方或上方弹出一个列表，用户可以从中选择一个选项，下拉菜单通常不显示以选项的文本。

figma 组件

构成

请输入内容

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

1: 前缀

可选

2.搜索框

可选，当选项超过 7 个时建议带上搜索

3: 容器

必有

4: 滚动条

超过 7 个选项时出现

5: 文字

必有

6: 后缀

可选

类型/变体

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

123456

暂无订单

基础单选

前缀单选

前后缀单选

后缀单选

多选

无结果

自定义

+Slot

补充

当基础下拉菜单不满足业务场景时，支持业务设计师自定义下拉菜单内容，容器上下左右 padding 保持 8px。

注：解组自定义后需要和开发说明使用基建 dropdown 组件做。

使用场景

Select

Texttext

标注

Texttext

Text

请输入内容

Texttext

Text

Texttext

Text

Texttext

Text

Select

请输入内容

Texttext

Text

Texttext

Text

Texttext

Text

xxsm

补充

和选择器搭配使用时，与选择器的间距为 8 px

多语言适配

TexttextTextt…

Text

TexttextTextt…

Text

Texttext

Text

Texttext

Text

Texttext

Text

Texttext

Text

补充

下拉菜单的宽度一般由设计师根据实际场景定义，当宽度设置好后下拉菜单内的文字超长末尾……截断

RTL

请输入内容

Texttext

Text

Texttext

Text

Texttext

Text

LTR

الرجاء إدخال المحتوى

نص

ترتيب

ترتيب العقود الآجلة

نص

RTL

用法

请输入内容

Texttext

正确

Texttext

慎用

当选项过多时建议搭配搜索，并且不建议一次性展示超过 7 个以上

DESIGN

产品设计

品牌设计

技能库

Select Language

中文