如何自訂沉浸式閱讀程式按鈕

本文會示範如何自訂啟動沈浸式閱讀程式的按鈕，以滿足您的應用需求。

新增沉浸式閱讀程式按鈕

沈浸式閱讀程式 SDK 會提供啟動沈浸式閱讀程式之按鈕的預設樣式。 使用 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 屬性來設定按鈕的語言和替代文字。 預設語言為英文。

<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>

後續步驟

• 探索沈浸式閱讀程式 SDK 參考