Offcanvas

CDN 复制说明：生产示例固定当前文档版本，不建议使用 @latest。

css: https://cdn.jsdelivr.net/npm/[email protected]/dist/sodialog.css

js: https://cdn.jsdelivr.net/npm/[email protected]/dist/sodialog.es.js

Offcanvas Playground

Ready. Open a panel from this page.

自訂標題內容

title 也可傳入 HTMLElement。節點會原樣置於標題區域，適合將編輯連結或狀態標記放在標題前方。

const title = document.createElement('span')
const editLink = document.createElement('a')
editLink.href = '/documents/guide/edit'
editLink.textContent = '編輯'
title.append(editLink, document.createTextNode(' · 使用說明'))

openOffcanvas({
  title,
  placement: 'end',
  content: '<p>文件內容</p>',
})

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',
    width: placement === 'start' || placement === 'end' ? 480 : '100vw',
    height: placement === 'top' || placement === 'bottom' ? '40vh' : '100vh',
    content: `<p>当前位置：${placement}</p>`,
  })
}

width 和 height 接受数字或 CSS 尺寸字符串。数字按像素处理，例如 width: 480；字符串可使用 40vw、75vh 或 calc(...)。

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。