イマーシブ リーダーのボタンをカスタマイズする方法

この記事では、イマーシブ リーダーの起動ボタンをアプリケーションのニーズに合わせてカスタマイズする方法について説明します。

イマーシブ リーダーのボタンを追加する

イマーシブ リーダー SDK には、イマーシブ リーダーの起動ボタンに使用される既定のスタイルが用意されています。 このスタイルを有効にするには、immersive-reader-button クラス属性を使用します。

<div class='immersive-reader-button'></div>

ボタンのスタイルをカスタマイズする

ボタンのスタイルを設定するには、data-button-style 属性を使用します。 使用できる値は、icontexticonAndText です。 既定値は icon です。

アイコン ボタン

<div class='immersive-reader-button' data-button-style='icon'></div>

これは次のようにレンダリングされます。

This is the rendered Text button

テキスト ボタン

<div class='immersive-reader-button' data-button-style='text'></div>

これは次のようにレンダリングされます。

This is the rendered Immersive Reader button.

アイコンとテキスト ボタン

<div class='immersive-reader-button' data-button-style='iconAndText'></div>

これは次のようにレンダリングされます。

Icon button

ボタンのテキストをカスタマイズする

ボタンの言語と代替テキストは、data-locale 属性を使用して構成します。 既定の言語は English (英語) です。

<div class='immersive-reader-button' data-locale='fr-FR'></div>

アイコンのサイズをカスタマイズする

イマーシブ リーダー アイコンのサイズは、data-icon-px-size 属性を使用して構成できます。 アイコンのサイズがピクセル単位で設定されます。 既定のサイズは 20px です。

<div class='immersive-reader-button' data-icon-px-size='50'></div>

次のステップ