カスタムUI

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

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

UIテーマ

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

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

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

UI言語とラベル

注記

ラベルカスタマイズ機能はまだ実装されていません。 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関数を使用してラベルを取得します。Playgroundコードの署名プラグインの実装を参照してください。

UI最大ズームレベル

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

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