分享方式:


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

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

新增沉浸式閱讀程式按鈕

沈浸式閱讀程式 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>

已轉譯按鈕圖示的螢幕擷取畫面。

文字按鈕

使用下列程式碼來轉譯按鈕文字。

<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 屬性。 它會以像素為單位來設定圖示大小。 預設大小為 20 px。

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

後續步驟