组件

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 按钮。

链接 A · 链接 B

<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`	打开时锁滚动