下拉菜单组件
下拉菜单是一种常见的用户界面元素，用于在有限空间内显示多个选项，允许用户从中选择一个选项。本组件提供多种样式和形式的下拉菜单，适用于导航菜单、选择操作、筛选等多种场景。
基本用法
最基本的下拉菜单组件，点击按钮后显示一个下拉选项列表。
HTML
<div class="dropdown" id="basic-dropdown">
<button class="dropdown-toggle">
下拉菜单
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">
<i class="mdi mdi-home"></i>首页
</a>
<a href="javascript:void(0)" class="dropdown-item">
<i class="mdi mdi-account"></i>个人中心
</a>
<a href="javascript:void(0)" class="dropdown-item">
<i class="mdi mdi-cog"></i>设置
</a>
<div class="dropdown-divider"></div>
<a href="javascript:void(0)" class="dropdown-item">
<i class="mdi mdi-logout"></i>退出登录
</a>
</div>
</div>不同样式的下拉菜单
下拉菜单提供多种预设样式，包括主题色、大小和触发方式等。
HTML
<!-- 主题色下拉菜单 -->
<div class="dropdown dropdown-primary">
<button class="dropdown-toggle">
主题色下拉菜单
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
<a href="javascript:void(0)" class="dropdown-item">选项 3</a>
</div>
</div>
<!-- 小型下拉菜单 -->
<div class="dropdown dropdown-sm">
<button class="dropdown-toggle">
小型
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
</div>
</div>
<!-- 大型下拉菜单 -->
<div class="dropdown dropdown-lg">
<button class="dropdown-toggle">
大型
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
</div>
</div>下拉菜单方向
下拉菜单可以在不同方向打开，适应不同的布局需求。
HTML
<!-- 向下弹出 (默认) -->
<div class="dropdown">
<button class="dropdown-toggle">
向下弹出 (默认)
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
</div>
</div>
<!-- 向上弹出 -->
<div class="dropdown dropdown-up">
<button class="dropdown-toggle">
向上弹出
<i class="mdi mdi-chevron-up"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
</div>
</div>
<!-- 向右弹出 -->
<div class="dropdown dropdown-right">
<button class="dropdown-toggle">
向右弹出
<i class="mdi mdi-chevron-right"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
</div>
</div>可搜索的下拉菜单
当选项较多时，提供搜索功能可以帮助用户快速找到所需的选项。
HTML
<div class="dropdown">
<button class="dropdown-toggle">
可搜索下拉菜单
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<input type="text" class="dropdown-search-input" placeholder="搜索...">
<a href="javascript:void(0)" class="dropdown-item">苹果</a>
<a href="javascript:void(0)" class="dropdown-item">香蕉</a>
<a href="javascript:void(0)" class="dropdown-item">橙子</a>
<a href="javascript:void(0)" class="dropdown-item">葡萄</a>
<a href="javascript:void(0)" class="dropdown-item">西瓜</a>
<a href="javascript:void(0)" class="dropdown-item">草莓</a>
<a href="javascript:void(0)" class="dropdown-item">蓝莓</a>
<a href="javascript:void(0)" class="dropdown-item">芒果</a>
</div>
</div>级联下拉菜单
级联下拉菜单允许在下拉菜单中嵌套子菜单，适用于多层级的导航结构。
HTML
<div class="dropdown">
<button class="dropdown-toggle">
级联下拉菜单
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">选项 2</a>
<div class="dropdown-item dropdown-submenu">
<span>子菜单 <i class="mdi mdi-chevron-right"></i></span>
<div class="dropdown-menu submenu">
<a href="javascript:void(0)" class="dropdown-item">子选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">子选项 2</a>
<div class="dropdown-item dropdown-submenu">
<span>次级菜单 <i class="mdi mdi-chevron-right"></i></span>
<div class="dropdown-menu submenu">
<a href="javascript:void(0)" class="dropdown-item">次级选项 1</a>
<a href="javascript:void(0)" class="dropdown-item">次级选项 2</a>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="dropdown-item">选项 3</a>
</div>
</div>API 文档
下拉菜单组件的属性、类名和方法的详细说明。
CSS 类名
| 类名 | 描述 | 默认值 |
|---|---|---|
| dropdown | 应用于下拉菜单容器的基本类 | - |
| dropdown-toggle | 下拉菜单的触发按钮 | - |
| dropdown-menu | 下拉菜单内容容器 | - |
| dropdown-item | 下拉菜单中的单个选项 | - |
| dropdown-divider | 下拉菜单中的分隔线 | - |
| dropdown-primary | 应用主题色样式的下拉菜单 | - |
| dropdown-sm | 小尺寸的下拉菜单 | - |
| dropdown-lg | 大尺寸的下拉菜单 | - |
| dropdown-up | 向上弹出的下拉菜单 | - |
| dropdown-right | 向右弹出的下拉菜单 | - |
| dropdown-search-input | 下拉菜单中的搜索输入框 | - |
| dropdown-submenu | 级联下拉菜单的子菜单项 | - |
| submenu | 子菜单的容器 | - |
方法
| 方法名 | 描述 | 参数 |
|---|---|---|
| show() | 显示下拉菜单 | - |
| hide() | 隐藏下拉菜单 | - |
| toggle() | 切换下拉菜单的显示/隐藏状态 | - |
| disable() | 禁用下拉菜单 | - |
| enable() | 启用下拉菜单 | - |