pdfme/website/i18n/ja/docusaurus-plugin-content-docs/current/custom-ui.md

カスタムUI

@pdfme/uiはオプションを通じてテーマとラベルのカスタマイズが可能です。
このページではこれらの要素をカスタマイズする方法を説明します。

サンプルコードはデザイナーを使用していますが、フォームとビューワーも同じ方法でカスタマイズできます。

UIテーマ

pdfmeは内部的にAnt Designを使用しています。 Ant Designのテーマをpdfme UIに適用することができます。

テーマのカスタマイズ方法についてはAnt Designのドキュメントを参照してください。
APIリファレンスはこちらをご覧ください。

new Designer({
  domContainer,
  template,
  options: {
    theme: {
      token: {
        colorPrimary: 'red',
      },
    },
  },
});

UI言語とラベル

:::note ラベルカスタマイズ機能はまだ実装されていません。 Custom Label for UI #107 :::

言語を変更するには、optionsのlangを変更します。（langのデフォルトはenです。） 現在、'en', 'ja', 'ar', 'th', 'pl', 'it'のみがサポートされています。 追加の言語をサポートするには、issueを作成するかプルリクエストを送信してください。

提供されているラベルの代わりにカスタムラベルを使用するには、optionsのlabelsを変更します。 サポートされているラベルについては、この i18n.tsを参照してください。

pdfmeはまずoptionsからlangを読み込み、次にoptionsのlabelsから読み込んで上書きします。

new Designer({
  domContainer,
  template,
  options: {
    lang: 'ja',
    labels: {
      fieldsList: '入力項目一覧ビュー', // 編集ボタンのラベルを上書き
      youCanCreateYourOwnLabel: '独自のラベルを作成できます', // カスタムプラグイン用の新しいラベルを追加
    },
  },
});

独自のラベルを作成し、プラグインからi18n関数を使用してラベルを取得します。@pdfme/schemas の公式署名プラグインの実装を参照してください。

UI最大ズームレベル

デフォルトでは、pdfmeは元のPDFサイズの最大200%までズームできます。 これを増やしたい場合は、新しい制限にしたいパーセンテージをmaxZoomオプションとしてデザイナー、フォーム、またはビューワーに渡すことができます。 この値は100より大きく、25の倍数である必要があります。

new Designer({
  domContainer,
  template,
  options: {
    maxZoom: 400,
  },
});

UIオプション

UIの状態をオプションで制御できます。

// 特定の状態で初期化（FormやViewerでも同様に使えます）:
const designer = new Designer({
  domContainer,
  template,
  options: {
    zoomLevel: 1.5,
    sidebarOpen: false,  // （Designerのみ）
  }
});

// 初期化後に状態を更新:
designer.updateOptions({
  zoomLevel: 2,
  sidebarOpen: true
});