テーマ設定

Svelte Flow は最小限のデフォルトスタイルで提供され、完全にカスタマイズできるように設計されています。多くのユーザーが、Svelte Flow のルックアンドフィールを独自のブランドやデザインシステムに合わせて完全に変換しています。このガイドでは、Svelte Flow の外観をカスタマイズできるさまざまな方法を紹介します。

デフォルトのスタイル

Svelte Flow のデフォルトスタイルは、組み込みノードを使用するには十分です。パディング、ボーダー半径、アニメーション化されたエッジなどのスタイルに、いくつかの適切なデフォルト値が提供されています。以下のようになります。

import '@xyflow/svelte/dist/style.css';

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

基本スタイル

Svelte Flow の動作に不可欠な非常に基本的なスタイルのみを読み込みたい場合は、代わりに基本スタイルをインポートできます。

import '@xyflow/svelte/dist/base.css';

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

カスタマイズ

Svelte Flow の外観をカスタマイズするには、さまざまな方法があります。

• カスタムノードとエッジ内でスコープ付き CSS を使用する
• 組み込みクラスをカスタム CSS でオーバーライドする
• Svelte Flow が使用する CSS 変数をオーバーライドする
• style プロップスを介してインラインスタイルを渡す

組み込みクラスの操作

デフォルトのスタイルをオーバーライドする場合は、組み込み CSS クラスをオーバーライドすることで実行できます。Svelte Flow で使用されるすべてのクラスのリストを以下に示します。

CSS 変数

デフォルトのスタイル全体を置き換えるのではなく、全体的なルックアンドフィールを微調整したいだけの場合は、ライブラリ全体で使用している CSS 変数のいくつかをオーバーライドできます。

これらの変数は、ほとんどが自明です。以下は、微調整が必要なすべての変数とそのデフォルト値の表です。

これらの変数は、Svelte Flow の様々な要素の *デフォルト* を定義するために使用されます。つまり、インラインスタイルやカスタムクラスによって要素ごとに上書きすることができます。変数を上書きする場合は、以下を追加することで可能です。

.svelte-flow {
  --xy-node-background-color-default: #ff5050;
}

Tailwind

Tailwind CSS

カスタムノードとエッジは単なる Svelte コンポーネントであり、好きなスタイリングソリューションを使用してスタイルを設定できます。たとえば、Tailwind を使用してノードのスタイルを設定することができます。

<script lang="ts">
  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
  type $$Props = NodeProps;
  export let data: $$Props['data'];
</script>
 
<div class="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
  <div class="flex">
    <div class="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">
      {data.emoji}
    </div>
    <div class="ml-2">
      <div class="text-lg font-bold">{data.name}</div>
      <div class="text-gray-500">{data.job}</div>
    </div>
  </div>
  <Handle
    type="target"
    position={Position.Top}
    class="w-16 !bg-teal-500 rounded-none border-none"
  />
  <Handle
    type="source"
    position={Position.Bottom}
    class="w-16 !bg-teal-500 rounded-none border-none"
  />
</div>

import '@xyflow/svelte/dist/style.css';
import 'tailwind.css';

Tailwind と Svelte Flow を使用した完全な例については、Tailwind の例をご覧ください。