Skip to content

panel-definition.md

Latest commit

 

History

History
115 lines (72 loc) · 2.79 KB

panel-definition.md

File metadata and controls

115 lines (72 loc) · 2.79 KB

PanelDefinition

Defines a panel that can be rendered in the UI at various breakpoints.

Properties

id

Type: string Required

Unique panel identifier. Use this ID to associate a button with the panel via the panelId property.

label

Type: string Required

Accessible label. Used as the panel heading.

mobile

Type: PanelBreakpointConfig Required

Mobile breakpoint configuration. See Breakpoint Configuration below.

tablet

Type: PanelBreakpointConfig Required

Tablet breakpoint configuration. See Breakpoint Configuration below.

desktop

Type: PanelBreakpointConfig Required

Desktop breakpoint configuration. See Breakpoint Configuration below.

render

Type: ComponentType

A React/Preact component to render as the panel content. Receives Context as props (or PluginContext when used in a plugin manifest).

const MyPanelContent = ({ context }) => {
  const { pluginState } = context
  return <div>Panel content here</div>
}

Note

Use render when defining panels in a plugin manifest. For API methods like addPanel(), use html instead.

html

Type: string

HTML content to render in the panel.

Note

Use html when adding panels via API methods like addPanel(). For plugin manifests with dynamic content, use render instead.

Breakpoint Configuration

Each breakpoint (mobile, tablet, desktop) accepts the following properties:

slot

Type: string Required

The slot where the panel should appear at this breakpoint. Slots are named regions in the UI layout.

dismissible

Type: boolean

Whether the panel can be dismissed (closed) by the user. When false and open is true, the panel is always visible at this breakpoint and any associated panel-toggle button is automatically suppressed.

exclusive

Type: boolean

Whether the panel is exclusive. An exclusive panel will hide other panels when it becomes visible.

open

Type: boolean

Whether the panel is open. When true and combined with dismissible: false, the panel is always visible at this breakpoint and will be restored automatically when the breakpoint is entered.

showLabel

Type: boolean Default: true

Whether to show the panel heading. If false, the heading is visually hidden but remains accessible to screen readers.

modal

Type: boolean

Whether the panel is modal. A modal panel overlays the map and requires user interaction to dismiss.

width

Type: string

Panel width. Accepts any valid CSS width value (e.g., '300px', '50%').