参考组件

<Panel />

GitHub 上的源代码

<Panel /> 组件可以帮助您将内容放置在视窗上方。它在内部由 <MiniMap /><Controls /> 组件使用。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Panel } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <Panel position="top-left">top-left</Panel>
  <Panel position="top-center">top-center</Panel>
  <Panel position="top-right">top-right</Panel>
  <Panel position="bottom-left">bottom-left</Panel>
  <Panel position="bottom-center">bottom-center</Panel>
  <Panel position="bottom-right">bottom-right</Panel>
</SvelteFlow>

属性

对于 TypeScript 用户,<Panel /> 组件的属性类型导出为 PanelProps

#position
PanelPosition
#children