Skip to content

Pane 与 Overlay

Pane

mayflyPanes 支持 headerleftrightbottom 四个 placement。

ts
export const inject = ['mayflyPanes']

export function apply(ctx: Context): void {
  const pane = ctx.mayflyPanes.register({
    id: 'acme.inspector',
    title: 'Inspector',
    placement: 'right',
    size: { min: 20, preferred: 30, max: 40 },
    narrow: 'bottom',
  }, { kind: 'text', content: 'healthy' })

  // 领域状态变化后调用:
  pane.set({ kind: 'text', content: 'updated' })
}

narrow 可设为 bottomoverlayhidden。Handle 另有 set(null) 会释放 lane,直到下一次发布非 null snapshot。

Overlay

ts
export const inject = ['commands', 'mayflyOverlays']

export function apply(ctx: Context): void {
  ctx.commands.register({
    name: 'health',
    description: 'Open health details',
    handler: () => {
      ctx.mayflyOverlays.close('acme.health')
      ctx.mayflyOverlays.open({
        id: 'acme.health',
        title: 'Health',
        capturing: true,
        anchor: 'center',
        width: '70%',
      }, { kind: 'text', content: 'healthy' })
      return { kind: 'success', text: 'opened health details' }
    },
  })
}

Capturing overlay 取得 focus,默认可由 Escape 关闭;只有显式 dismissible: false 才禁用。非 capturing overlay 不得包含交互控件。

Pane/overlay id 在 registry 内唯一。Snapshot 与 event callback 产生的数据仍会 经过 core admission。Fiber unload 会移除 pane,并关闭该 Fiber 打开的 overlay。

预览版 · v0.1.0-alpha.1