Plugin pane

Basic usage

4 predefined tabs (ids: card, manifest, permission, marketplace). Each tab’s content is filled in by the consumer via the named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). You can also override the default list via the tabs prop.

Source: plugins.html.

<CfPluginPane>
<template #panel-card>...</template>
<template #panel-manifest>...</template>
</CfPluginPane>

<CfPluginPane slots={{
'panel-card': <PanelA />,
'panel-manifest': <PanelB />,
}} />

API

The preset tab id lists are exported as constants PROTOCOL_TABS / NETWORK_TABS / SQL_TABS, ready to reuse when customizing tabs.

Template components are a thin semantic wrapper over CfTabs. If you don’t need a predefined tab set, use CfTabs directly.