Components · Off-canvas

组件

Off-canvas 侧滑

侧滑抽屉;左右方向,带遮罩。

左侧滑出

菜单

<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-offcanvas-open="demo-offcanvas">打开左侧抽屉</button>
<div class="pvs-offcanvas-backdrop" data-pvs-offcanvas-backdrop="demo-offcanvas">
</div>
<div class="pvs-offcanvas pvs-offcanvas--start" id="demo-offcanvas">
  <div class="pvs-offcanvas__header">
    <h3 class="pvs-offcanvas__title">菜单</h3>
    <button type="button" class="pvs-close" data-pvs-offcanvas-close>×</button>
  </div>
  <div class="pvs-offcanvas__body">
    <ul class="pvs-list pvs-list--unstyled">
      <li>
        <a class="pvs-link" href="#">首页</a>
      </li>
      <li>
        <a class="pvs-link" href="#">设置</a>
      </li>
    </ul>
  </div>
</div>

右侧滑出

pvs-offcanvas--end 从右侧滑入。

购物车

右侧抽屉 · 常用于购物车、筛选面板。

<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-offcanvas-open="demo-offcanvas-end">打开右侧抽屉</button>
<div class="pvs-offcanvas-backdrop" data-pvs-offcanvas-backdrop="demo-offcanvas-end">
</div>
<div class="pvs-offcanvas pvs-offcanvas--end" id="demo-offcanvas-end">
  <div class="pvs-offcanvas__header">
    <h3 class="pvs-offcanvas__title">购物车</h3>
    <button type="button" class="pvs-close" data-pvs-offcanvas-close>×</button>
  </div>
  <div class="pvs-offcanvas__body">
    <p class="pvs-m-0 pvs-text-sm">右侧抽屉 · 常用于购物车、筛选面板。</p>
  </div>
</div>

Off-canvas keyboard

打开后焦点进入抽屉;Tab 在抽屉内循环;Esc 回到 data-pvs-offcanvas-open 按钮。

导航

<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-offcanvas-open="demo-offcanvas-kb">键盘抽屉</button>
<div class="pvs-offcanvas-backdrop" data-pvs-offcanvas-backdrop="demo-offcanvas-kb">
</div>
<div class="pvs-offcanvas pvs-offcanvas--start" id="demo-offcanvas-kb">
  <div class="pvs-offcanvas__header">
    <h3 class="pvs-offcanvas__title">导航</h3>
    <button type="button" class="pvs-close" data-pvs-offcanvas-close aria-label="关闭">×</button>
  </div>
  <div class="pvs-offcanvas__body">
    <a class="pvs-link" href="#">链接 A</a> · <a class="pvs-link" href="#">链接 B</a>
  </div>
</div>

数据属性

类名说明
data-pvs-offcanvas-open值为 offcanvas id
data-pvs-offcanvas-close关闭
data-pvs-offcanvas-backdrop遮罩,值为 id
Off-canvas 键盘Tab 陷阱 · Esc 回触发器

类名速查

类名说明
pvs-offcanvas抽屉根
pvs-offcanvas--start / --end左 / 右
pvs-offcanvas__header / __title标题区
pvs-offcanvas__body内容
pvs-offcanvas-backdrop遮罩层
body.pvs-offcanvas-open打开时锁滚动