Offcanvas

最短可运行示例

import { openOffcanvas } from 'sodialog'
import 'sodialog/style.css'

openOffcanvas({
  title: 'Filters',
  placement: 'end',
  content: '<p>Filter controls go here.</p>',
})

自定义标题内容

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>',
})

Demo / Playground

Offcanvas Playground

Ready. Open a panel from this page.

位置与动画

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(...)。

生命周期通知

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 }),
})

常见业务场景

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

可访问性

Offcanvas 同样基于 <dialog>，打开后应有清晰标题，并在关闭后把焦点恢复到触发按钮。顶部/底部面板在窄屏更自然，左右面板更适合桌面筛选或详情。

Offcanvas ​

最短可运行示例 ​

自定义标题内容 ​

Demo / Playground ​

Offcanvas Playground

位置与动画 ​

生命周期通知 ​

常见业务场景 ​

可访问性 ​

相关 API ​