Preview Updated 2026-05-10

NetworkPane

Network capture pane with HAR / Hex / PCAP / Cert / Cookie tabs.

Basic usage

Five predefined tabs (ids: har, hex, pcap, cert, cookie); the consumer fills each tab via a named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). The default list can also be overridden with the tabs prop.

Source: network.html.

HAR 请求瀑布图（基于 CfTimingBar + CfChartCrosshair）。

src/App.vue vue

<CfNetworkPane>
<template #panel-har>...</template>
<template #panel-hex>...</template>
</CfNetworkPane>

src/App.tsx tsx

<CfNetworkPane slots={{
'panel-har': <PanelA />,
'panel-hex': <PanelB />,
}} />

Realistic composition

Each of the 5 tabs hosts a corresponding atom: HAR Timeline uses CfTimingBar; the Hex Viewer uses pre + monospace font; cert fields use CfDescriptionList.

200OK/v1/orders · 312ms

src/App.vue vue

<CfNetworkPane>
<template #panel-har>...</template>
...
</CfNetworkPane>

src/App.tsx tsx

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

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 etc., and can be reused directly in custom tabs.

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