组件

Notification 通知

吐司通知；角落固定，可手动或 JS 关闭。

语义吐司

保存成功

磁盘空间不足

同步失败

<div class="pvs-stack" style="max-width:20rem">
  <div class="pvs-toast pvs-toast--success">
    <p class="pvs-toast__body">保存成功</p>
    <button type="button" class="pvs-close pvs-close--sm" data-pvs-toast-dismiss>×</button>
  </div>
  <div class="pvs-toast pvs-toast--warning">
    <p class="pvs-toast__body">磁盘空间不足</p>
  </div>
  <div class="pvs-toast pvs-toast--danger">
    <p class="pvs-toast__body">同步失败</p>
  </div>
</div>

固定容器

页面级固定容器：pvs-toast-container--top-end / --bottom-end。

右上角吐司

<div class="pvs-toast-container pvs-toast-container--top-end" style="position:relative;inset:auto;width:auto">
  <div class="pvs-toast pvs-toast--success">
    <p class="pvs-toast__body">右上角吐司</p>
  </div>
</div>

JavaScript API

PivCss.toast(message, { variant, duration, position }) 动态插入；文档演示按钮用 data-pvs-toast-demo。

<button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm" data-pvs-toast-demo="保存成功" data-pvs-toast-variant="success">PivCss.toast 演示</button>

数据属性

类名	说明
`data-pvs-toast-dismiss`	关闭该条 toast
`data-pvs-toast-demo`	文档演示按钮文案
`PivCss.toast()`	API · variant / duration / position

类名速查

类名	说明
`pvs-toast`	单条通知
`pvs-toast--success / --warning / --danger`	语义色
`pvs-toast__body`	文案
`pvs-toast-container`	固定定位容器
`pvs-toast-container--top-end / --bottom-end`	角落位置
`PivCss.toast(msg, opts)`	JS 动态通知