イマーシブ リーダーのボタンをカスタマイズする方法
この記事では、Immersive Reader の起動ボタンをアプリケーションのニーズに合わせてカスタマイズする方法について説明します。
イマーシブ リーダーのボタンを追加する
Immersive Reader SDK には、Immersive Reader の起動ボタンに使用される既定のスタイルが用意されています。 このスタイルを有効にするには、immersive-reader-button クラス属性を使用します。
<div class='immersive-reader-button'></div>
ボタンのスタイルをカスタマイズする
ボタンのスタイルを設定するには、data-button-style 属性を使用します。 使用できる値は、icon、text、iconAndText です。 既定値は icon です。
アイコン ボタン
次のコードを使用して、アイコン ボタンをレンダリングします。
<div class='immersive-reader-button' data-button-style='icon'></div>
テキスト ボタン
次のコードを使用して、ボタン テキストをレンダリングします。
<div class='immersive-reader-button' data-button-style='text'></div>
アイコンとテキスト ボタン
次のコードを使用して、ボタンとテキストの両方をレンダリングします。
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
ボタンのテキストをカスタマイズする
ボタンの言語と代替テキストを構成するには、data-locale 属性を使用します。 既定の言語は English (英語) です。
<div class='immersive-reader-button' data-locale='fr-FR'></div>
アイコンのサイズをカスタマイズする
Immersive Reader のアイコンのサイズを構成するには、data-icon-px-size 属性を使用します。 アイコンのサイズがピクセル単位で設定されます。 既定のサイズは 20 px です。
<div class='immersive-reader-button' data-icon-px-size='50'></div>