Preview Updated 2026-05-10

Plugin pane

Plugin center pane with Card / Manifest / Permission / Marketplace tabs.

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.

背景

PluginCard 列表 / 网格视图。

<script setup lang="ts">
import { CfPluginPane } from '@chufix-design/vue';
</script>

<template>
  <div style="height: 280px;">
    <CfPluginPane>
      <template #panel-card><p style="color: var(--fg-2);">PluginCard 列表 / 网格视图。</p></template>
      <template #panel-manifest><pre style="font-family: var(--font-mono); font-size: 11px;">{
  "name": "@chufix-design/plugin-foo",
  "version": "1.0.0",
  "permissions": ["read:requests"]
}</pre></template>
      <template #panel-permission><p style="color: var(--fg-2);">权限申请对话框（CfConfirmDialog 派生）。</p></template>
      <template #panel-marketplace><p style="color: var(--fg-2);">插件市场搜索 + 列表 + 详情。</p></template>
    </CfPluginPane>
  </div>
</template>

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

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	First tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

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.