<Background />

<Background /> 元件可以方便地渲染基於節點的 UI 中常見的不同類型背景。它帶有三個變體：lines、dots 和 cross。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Background, BackgroundVariant } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <Background bgColor="#ccc" variant={BackgroundVariant.Dots} />
</SvelteFlow>

屬性

名稱	類型	預設
#`id?`	`string`
#`class?`	`string`
#`bgColor?`	`string`
#`patternColor?`	`string`
#`patternClass?`	`string`
#`gap?`	`number \| [number, number]` 圖案之間的間隙。傳入一個元組可以讓您獨立控制 x 和 y 間隙。	`28`
#`size?`	`number` 如果使用 BackgroundVariant.Dots 或 BackgroundVariant.Cross，則每個點的半徑或每個矩形的大小。預設值分別為 1 或 6，如果使用 BackgroundVariant.Lines，則會忽略此值。
#`lineWidth?`	`number`	`1`
#`variant?`	`BackgroundVariant`	`BackgroundVariant.Dots`

元件類型