<Background />

<Background />コンポーネントは、ノードベースのUIで一般的なさまざまなタイプの背景をレンダリングするのに便利です。3つのバリアント、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`

コンポーネント型