<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