下拉菜单¶
下拉菜单可用于切换通常 非必要 的内容，并且仅在用户点击标题面板时显示。
下拉菜单可以拥有标题，作为指令的参数，并且可以使用 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 选项来为隐藏内容的展现添加动画效果。
Dropdown 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.
父级下拉菜单标题
子级下拉菜单标题
下拉菜单内容
Dropdown Column 1
下拉菜单内容
Dropdown Column 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
Additional CSS classes for the container element.
- class-title
Additional CSS classes for the title element.
- class-body
Additional CSS classes for the body element.
