4.1.2.3. 可下拉选项卡#
下拉框可以用来切换内容,通常是非必要的,并且只有当用户点击标题面板时才会显示。
下拉菜单可以有一个标题,作为指令参数,并且打开选项可以用来初始化下拉菜单的打开状态。
Dropdown content
Dropdown title
Dropdown content
Open dropdown
Dropdown content
:::{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
4.1.2.3.1. 下拉框打开时的动画#
使用 :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.
4.1.2.3.2. 在其他组件下的下拉框#
Parent dropdown title
Dropdown content
Dropdown Column 1
Dropdown content
Dropdown Column 2
Dropdown content
4.1.2.3.3. dropdowns 可选项#
- open
Open the dropdown by default.
默认打开下拉菜单。
- color
Set the color of the dropdown header (background and font). One of the semantic color names:
primary
,secondary
,success
,danger
,warning
,info
,light
,dark
,muted
.设置下拉标题的颜色(背景和字体)。其中一个语义色彩名称:主要的,次要的,成功的,危险的,警告的,信息的,光明的,黑暗的,柔和的。
- icon
Set an octicon icon to prefix the dropdown header.
设置一个 octicon icon 作为下拉标题的前缀。
- animate
Animate the dropdown opening (
fade-in
orfade-in-slide-down
).动画下拉菜单( fade-in 淡入或淡入- fade-in-slide-down 滑动)。
- margin
Outer margin of grid. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
网格的外缘。 一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5、auto。
- name
Set a reference-able name for the dropdown container.
为下拉容器设置一个可引用的名称。(ref)
- class-container
Additional CSS classes for the container element.
容器的其他CSS类。
- class-title
Additional CSS classes for the title element.
title元素的其他CSS类。
- class-body
Additional CSS classes for the body element.
body元素的其他CSS类。