Components · Dropdown
下载

组件

Dropdown 下拉

下拉菜单原子；pivcss.min.js 负责开关、点外关闭与方向键导航。

容器 pvs-dropdown；触发器加 data-pvs-dropdown-toggle。

项一项二退出
<div class="pvs-dropdown">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-dropdown__toggle" data-pvs-dropdown-toggle aria-expanded="false">菜单 ▾</button>
  <div class="pvs-dropdown__menu">
    <a class="pvs-dropdown__item" href="#">项一</a>
    <a class="pvs-dropdown__item" href="#">项二</a>
    <span class="pvs-dropdown__divider">
    </span>
    <a class="pvs-dropdown__item" href="#">退出</a>
  </div>
</div>

--right 右对齐；--up 向上展开。

A
B
<div class="pvs-flex pvs-gap-6 pvs-flex-wrap">
  <div class="pvs-dropdown pvs-dropdown--right">
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm" data-pvs-dropdown-toggle>右对齐 ▾</button>
    <div class="pvs-dropdown__menu">
      <a class="pvs-dropdown__item" href="#">A</a>
    </div>
  </div>
  <div class="pvs-dropdown pvs-dropdown--up" style="margin-top:4rem">
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm" data-pvs-dropdown-toggle>向上 ▴</button>
    <div class="pvs-dropdown__menu">
      <a class="pvs-dropdown__item" href="#">B</a>
    </div>
  </div>
</div>

pvs-dropdown__item--has-submenu + 嵌套 pvs-dropdown__submenu；hover/focus-within 展开。

概览
HTMLPDF
<div class="pvs-dropdown">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-dropdown-toggle>更多 ▾</button>
  <div class="pvs-dropdown__menu">
    <a class="pvs-dropdown__item" href="#">概览</a>
    <div class="pvs-dropdown__item--has-submenu">
      <button type="button" class="pvs-dropdown__item">导出</button>
      <div class="pvs-dropdown__submenu">
        <a class="pvs-dropdown__item" href="#">HTML</a>
        <a class="pvs-dropdown__item" href="#">PDF</a>
      </div>
    </div>
  </div>
</div>

触发器 ↓/Enter 打开并聚焦首项；菜单内 ↑↓ 移动，Esc 关闭并回到触发器。

项一项二项三
<div class="pvs-dropdown">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-dropdown-toggle aria-haspopup="true">键盘试试 ▾</button>
  <div class="pvs-dropdown__menu">
    <a class="pvs-dropdown__item" href="#">项一</a>
    <a class="pvs-dropdown__item" href="#">项二</a>
    <a class="pvs-dropdown__item" href="#">项三</a>
  </div>
</div>

轻量弹出说明 pvs-popover；data-pvs-popover-toggle 开关。

12 轨栅格

原生 CSS Grid 分栏，非 flex 列。

<div class="pvs-popover">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm pvs-popover__toggle" data-pvs-popover-toggle aria-expanded="false">什么是 Grid？</button>
  <div class="pvs-popover__bubble">
    <p class="pvs-popover__title">12 轨栅格</p>
    <p class="pvs-m-0 pvs-text-sm">原生 CSS Grid 分栏，非 flex 列。</p>
  </div>
</div>

pvs-popover--top 向上；--end 右对齐。

气泡在按钮上方

气泡右缘对齐触发器

<div class="pvs-flex pvs-gap-6 pvs-flex-wrap pvs-items-center" style="padding-top:5rem">
  <div class="pvs-popover pvs-popover--top">
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm" data-pvs-popover-toggle>向上 ▴</button>
    <div class="pvs-popover__bubble">
      <p class="pvs-m-0 pvs-text-sm">气泡在按钮上方</p>
    </div>
  </div>
  <div class="pvs-popover pvs-popover--end">
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm" data-pvs-popover-toggle>右对齐</button>
    <div class="pvs-popover__bubble">
      <p class="pvs-m-0 pvs-text-sm">气泡右缘对齐触发器</p>
    </div>
  </div>
</div>

触发器 Enter/Space 切换；Esc 关闭并回焦（与 Dropdown 一致）。

标题

Enter 开关 · Esc 关闭

<div class="pvs-popover">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-popover-toggle aria-expanded="false">键盘 Popover</button>
  <div class="pvs-popover__bubble">
    <p class="pvs-popover__title">标题</p>
    <p class="pvs-m-0 pvs-text-sm">Enter 开关 · Esc 关闭</p>
  </div>
</div>

div.pvs-dropdown → toggle + div.pvs-dropdown__menu → a.pvs-dropdown__item

类名说明
data-pvs-dropdown-toggle点击展开/收起菜单
键盘↓/Enter 打开 · ↑↓ 项间移动 · Esc 关闭
data-pvs-popover-toggle点击展开/收起弹出层
Popover 键盘Enter/Space 切换 · Esc 回触发器
类名说明
pvs-dropdown根容器；打开时加 is-open
pvs-dropdown__toggle触发按钮（可选）
pvs-dropdown__menu菜单面板
pvs-dropdown__item菜单项
pvs-dropdown__divider项间分隔线
pvs-dropdown--right / --up对齐与方向
pvs-dropdown__item--has-submenu多级子菜单容器
pvs-dropdown__submenu右侧飞出子菜单
pvs-popover / __bubble弹出说明层
pvs-popover--top / --end向上 / 右对齐
data-pvs-popover-toggle弹出层开关