Offcanvas

CDN 复制说明：示例默认使用 unpkg，并保留 jsdelivr 注释备用。

css: https://unpkg.com/[email protected]/dist/sodialog.css

js: https://unpkg.com/[email protected]/dist/sodialog.es.js

Offcanvas Playground

Open in New Tab

Source Code

Level 1. Basic placement usage

位置与动画

import { openOffcanvas } from 'sodialog'

const openPanel = (placement: 'start' | 'end' | 'top' | 'bottom') => {
  openOffcanvas({
    title: `Offcanvas ${placement}`,
    placement,
    animation: placement === 'top' || placement === 'bottom' ? 'fade' : 'slide',
    content: `<p>当前位置：${placement}</p>`,
  })
}

Level 2. Lifecycle hooks

生命周期通知

import { openOffcanvas, pushMessage } from 'sodialog'

openOffcanvas({
  title: '高级 Offcanvas',
  placement: 'end',
  animation: 'slide',
  draggable: true,
  content: '<p>带生命周期通知。</p>',
  onAfterOpen: () => pushMessage('success', 'Offcanvas 已打开', { duration: 1100 }),
  onAfterClose: () => pushMessage('info', 'Offcanvas 已关闭', { duration: 1100 }),
})

Level 3. Practical patterns

使用建议

• 顶部/底部：更适合移动端操作面板。
• 左右：更适合筛选、详情、配置等辅助区域。
• 可把 onAfterClose 用于回收状态或触发列表刷新。

Related API

• Dialog API
• Adapter API

更多可视化示例见 Examples Hub。