Foundation框架下拉面板(Dropdown)组件完全指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00458/article/details/148360069

Foundation框架下拉面板(Dropdown)组件完全指南

foundation-sites 项目地址: https://gitcode.com/gh_mirrors/fou/foundation-sites

什么是下拉面板？

下拉面板是Foundation框架中一个灵活的UI组件，它允许开发者在用户点击或悬停时显示隐藏的内容面板。与下拉菜单不同，下拉面板更适合展示表单、富文本或其他复杂内容。

基础用法

创建下拉面板需要两个核心元素：

触发器：通常是按钮元素，需要添加data-toggle属性
面板：带有.dropdown-pane类和data-dropdown属性的容器

<!-- 触发器按钮 -->
<button class="button" type="button" data-toggle="example-dropdown">
  点击显示下拉面板
</button>

<!-- 下拉面板 -->
<div class="dropdown-pane" id="example-dropdown" data-dropdown>
  这里可以放置任何内容，比如表单、文本或图片
</div>

悬停触发

除了点击触发，还可以通过添加data-hover="true"实现悬停触发：

<button class="button" type="button" data-toggle="hover-dropdown">
  悬停显示下拉面板
</button>
<div class="dropdown-pane" id="hover-dropdown" data-dropdown data-hover="true">
  悬停时显示的内容
</div>

定位选项

Foundation提供了多种定位方式，确保下拉面板能适应各种布局需求。

基本定位类

通过添加以下类名可以改变面板相对于触发器的位置：

.top - 面板出现在触发器上方
.right - 面板出现在触发器右侧
.left - 面板出现在触发器左侧
.bottom - 默认，面板出现在触发器下方

<button class="button" data-toggle="top-dropdown">上方面板</button>
<div class="dropdown-pane top" id="top-dropdown" data-dropdown>
  这个面板会出现在按钮上方
</div>

高级显式定位（v6.4+）

Foundation 6.4引入了更精确的定位系统，通过data-position和data-alignment属性可以精确控制面板位置。

垂直定位示例

<button data-toggle="explicit-dropdown">精确位置</button>
<div class="dropdown-pane" 
     id="explicit-dropdown" 
     data-dropdown 
     data-position="bottom" 
     data-alignment="center">
  这个面板会居中出现在按钮下方
</div>

可用定位组合

| 位置(position) | 对齐(alignment) | 效果描述 | |---------------|----------------|---------| | top | left | 面板左上角对齐触发器左上角 | | top | center | 面板水平居中于触发器上方 | | top | right | 面板右上角对齐触发器右上角 | | bottom | left | 面板左下角对齐触发器左下角 | | bottom | center | 面板水平居中于触发器下方 | | bottom | right | 面板右下角对齐触发器右下角 | | left | top | 面板左上角对齐触发器左上角 | | left | center | 面板垂直居中于触发器左侧 | | left | bottom | 面板左下角对齐触发器左下角 | | right | top | 面板右上角对齐触发器右上角 | | right | center | 面板垂直居中于触发器右侧 | | right | bottom | 面板右下角对齐触发器右下角 |

实际应用技巧

表单集成：下拉面板非常适合放置登录表单或搜索框

<div class="dropdown-pane" id="login-dropdown" data-dropdown>
  <form>
    <label>用户名
      <input type="text">
    </label>
    <label>密码
      <input type="password">
    </label>
    <button type="submit" class="button">登录</button>
  </form>
</div>