如何自訂沉浸式閱讀程式按鈕
本文會示範如何自訂啟動沈浸式閱讀程式的按鈕,以滿足您的應用需求。
新增沉浸式閱讀程式按鈕
沈浸式閱讀程式 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
屬性。 它會以像素為單位來設定圖示大小。 預設大小為 20 px。
<div class='immersive-reader-button' data-icon-px-size='50'></div>