Protocol pane

Basic usage

4 predefined tabs (ids: sse, mqtt, kafka, grpc). 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: protocols.html.

<CfProtocolPane>
<template #panel-sse>...</template>
<template #panel-mqtt>...</template>
</CfProtocolPane>

<CfProtocolPane slots={{
'panel-sse': <PanelA />,
'panel-mqtt': <PanelB />,
}} />

Real content composition

Replace the placeholders with concrete visualizations — one per tab: SSE timeline / MQTT topic tree / Kafka partition table / gRPC method list.

<CfProtocolPane>
<template #panel-sse><EventList /></template>
<template #panel-mqtt><CfTreeView ... /></template>
<template #panel-kafka><CfDataGrid ... /></template>
<template #panel-grpc><CfList ... /></template>
</CfProtocolPane>

<CfProtocolPane slots={{...}} />

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.