Foundation Sites 下拉面板(Dropdown)组件完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00862/article/details/148360063

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

foundation-sites foundation/foundation-sites: Foundation Sites 是一个响应式前端框架，基于CSS Grid布局，提供了一系列可重用的UI组件和灵活的网格系统，帮助开发者快速构建适应各种设备和屏幕尺寸的现代网站。项目地址: https://gitcode.com/gh_mirrors/fo/foundation-sites

什么是下拉面板？

下拉面板是Foundation框架中一个非常实用的交互组件，它可以在用户点击或悬停时显示隐藏的内容区域。与下拉菜单不同，下拉面板更适合展示表单、富文本或其他复杂内容。

基础用法

创建下拉面板非常简单，只需遵循以下步骤：

创建触发器：使用<button>元素并添加data-toggle属性，其值为下拉面板的ID
创建面板：使用<div>元素并添加.dropdown-pane类和data-dropdown属性，同时设置唯一ID

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

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

高级功能

悬停触发

除了点击触发，下拉面板还支持鼠标悬停触发：

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

自动聚焦

添加data-auto-focus="true"可以让面板打开时自动聚焦到第一个可交互元素：

<div class="dropdown-pane" id="auto-focus-dropdown" 
     data-dropdown data-auto-focus="true">
  <input type="text" placeholder="自动获得焦点">
</div>

定位控制

Foundation提供了多种方式来控制下拉面板的显示位置。

基础定位

通过添加方向类来控制面板相对于触发器的位置：

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

<div class="dropdown-pane top" id="top-dropdown" data-dropdown>
  显示在上方的面板
</div>

精确位置控制（v6.4+）

Foundation 6.4引入了更精确的定位系统，使用data-position和data-alignment属性：

<!-- 底部居中 -->
<div class="dropdown-pane" 
     data-position="bottom" 
     data-alignment="center" 
     id="precise-dropdown" 
     data-dropdown>
  精确控制位置的面板
</div>

可用的位置和对齐方式组合：

| 位置(position) | 对齐(alignment) | 效果描述 | |---------------|----------------|---------| | top/bottom | left | 面板左边缘对齐触发器左边缘 | | top/bottom | center | 面板水平居中于触发器 | | top/bottom | right | 面板右边缘对齐触发器右边缘 | | left/right | top | 面板顶部对齐触发器顶部 | | left/right | center | 面板垂直居中于触发器 | | left/right | bottom | 面板底部对齐触发器底部 |