# Dropdowns > 下拉菜单，一个可以切换显示和隐藏下拉列表的组件。 ## 总览 `` (简写 `` ) 是一个可以显示隐藏下拉列表的组件, 可以通过点击，悬浮，聚焦等操作对其显示和隐藏 ```html
First Action Second Action Third Action Active action Disabled action
``` ## Button content 插槽 可以用 `text` prop 或者 用 `button-content` 插槽 来代替 `text` prop 来设置下拉菜单的内容。 `button-content` 插槽允许使用 HTML 语言和 icon 等其他组件。 `button-content` 插槽 会覆盖 `text` prop ```html
An item Another item An item Another item
``` ## 定位 下拉菜单支持列表展示在各种位置，还支持列表自适应翻滚。 ### 对齐 下拉菜单支持左右对齐，设置 `right` prop 为右对齐， 设置 `left` prop 为左对齐 ```html
Action Another action Something else here Action Another action Something else here
``` ### Dropup 下拉菜单默认是底部显示，设置 `dropup` prop，列表顶部显示。 ```html
Action Another action Something else here
``` ### Drop right or left 可以设置 `dropright` prop 或者 `dropleft` prop 来使得列表出现在右侧或者左侧。 `dropup` 会覆盖 `dropright` 和 `dropleft` ， `dropright` 会覆盖 `dropleft` ```html
Action Another action Something else here Action Another action Something else here
``` ### 自动翻滚 下拉菜单默认是自动翻滚的，即自适应上下左右距离来自动变换位置，如果需要关闭，请设置 `no-flip` prop。 ### offset `offset` prop 用来设置列表和下拉菜单按钮的位置偏移量 - 可以设置为正负数，整数右偏，负数左偏 - 可以设置 css 中的写法作为偏移，此时应该是传入字符串 比如 `0.3rem` , `4px` , `1.2em` 等等 ```html
Action Another action Something else here
``` ### boundary 边界(容器) 可以设置下拉菜单列表出现的相对定位的容器 可选 'scrollParent', 'window', 'viewport', 或着自行指定的 dom。详情请参考 https://popper.js.org/" ## Split button 模式 `split` 模式 会将下拉菜单按钮拆分为两个按钮，右侧按钮为一个具有 toggle icon 的按钮 ```html
Action Another action Something else here...
``` ### Split button 模式支持 link 路由 `spilt` 模式下，左侧按钮默认 type 是 `