下拉菜单¶
下拉菜单可用于切换通常是*非必要*的内容，并在用户点击标题面板时才显示它。
下拉菜单可以有一个标题（作为指令参数），并且可以使用 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 类。