下拉菜单¶
下拉菜单可以用于切换内容，通常是非必要的内容，并且仅在用户单击标题面板时显示它。
下拉菜单可以有一个标题，作为指令参数，并且可以使用 open 选项来初始化为打开状态的下拉菜单。
下拉菜单内容
下拉菜单标题
下拉菜单内容
打开的下拉菜单
下拉菜单内容
语法
:::{dropdown}
Dropdown content
:::
:::{dropdown} Dropdown title
Dropdown content
:::
:::{dropdown} Open dropdown
:open:
Dropdown content
:::
.. dropdown::
Dropdown content
.. dropdown:: Dropdown title
Dropdown content
.. dropdown:: Open dropdown
:open:
Dropdown content
打开动画¶
使用 :animate: fade-in 或 :animate: fade-in-slide-down 选项来动画显示隐藏内容。
下拉菜单 fade-in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis arcu vitae odio gravida congue. Donec porttitor ac risus et condimentum. Phasellus bibendum ac risus a sollicitudin. Proin pulvinar risus ac mauris aliquet fermentum et varius nisi. Etiam sit amet metus ac ipsum placerat congue semper non diam. Nunc luctus tincidunt ipsum id eleifend. Ut sed faucibus ipsum. Aliquam maximus dictum posuere. Nunc vitae libero nec enim tempus euismod. Aliquam sed lectus ac nisl sollicitudin ultricies id at neque. Aliquam fringilla odio vitae lorem ornare, sit amet scelerisque orci fringilla. Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. Etiam quis nunc at ligula tincidunt eleifend.
更多示例¶
带有图标的下拉菜单
下拉菜单内容
带有图标和非常长标题的下拉菜单，lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nunc nec fermentum ultricies, nunc sapien ultricies nunc, nec ultricies sapien sapien nec sapien
下拉菜单内容
使用选项 :chevron: down-up
下拉菜单内容
其他组件中的下拉菜单¶
下拉菜单可以嵌套在其他组件中，例如在父下拉菜单内或在 网格项目 中。
这是一个带有下拉菜单的提示框
提示框内容
提示框内的下拉菜单
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis arcu vitae odio gravida congue. Donec porttitor ac risus et condimentum. Phasellus bibendum ac risus a sollicitudin. Proin pulvinar risus ac mauris aliquet fermentum et varius nisi. Etiam sit amet metus ac ipsum placerat congue semper non diam. Nunc luctus tincidunt ipsum id eleifend. Ut sed faucibus ipsum. Aliquam maximus dictum posuere. Nunc vitae libero nec enim tempus euismod. Aliquam sed lectus ac nisl sollicitudin ultricies id at neque. Aliquam fringilla odio vitae lorem ornare, sit amet scelerisque orci fringilla. Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. Etiam quis nunc at ligula tincidunt eleifend.
父下拉菜单标题
子下拉菜单标题
下拉菜单内容
下拉菜单列 1
下拉菜单内容
下拉菜单列 2
下拉菜单内容
dropdown 选项¶
- open
默认打开下拉菜单。
- color
设置下拉菜单标题的颜色（背景和字体）。语义颜色名称之一：
primary、secondary、success、danger、warning、info、light、dark、muted。- icon
设置一个 octicon 图标 以作为下拉菜单标题的前缀。
- chevron
chevron 的打开-关闭方向。选项之一：
right-down、down-up。- animate
动画显示下拉菜单的打开（
fade-in或fade-in-slide-down）。- margin
网格的外边距。一个（全部）或四个（上 下 左 右）值，取值范围：0, 1, 2, 3, 4, 5, auto。
- name
为下拉菜单容器设置一个可引用的名称。
- class-container
容器元素的其他 CSS 类。
- class-title
标题元素的其他 CSS 类。
- class-body
主体元素的其他 CSS 类。
