Jak dostosować przycisk Czytnik immersyjny

W tym artykule pokazano, jak dostosować przycisk uruchamiający Czytnik immersyjny zgodnie z potrzebami aplikacji.

Dodaj przycisk Czytnik immersyjny

SDK Czytnik Immersyjny zapewnia domyślny styl przycisku uruchamiającego Czytnik Immersyjny. Aby włączyć ten styl, użyj atrybutu immersive-reader-button klasy.

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

Dostosowywanie stylu przycisku

Aby ustawić styl przycisku, użyj atrybutu data-button-style . Dozwolone wartości to icon, texti iconAndText. Domyślna wartość to icon.

Przycisk ikony

Użyj poniższego kodu, aby wyrenderować przycisk ikony.

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

Przycisk tekstowy

Użyj poniższego kodu, aby renderować tekst przycisku.

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

Ikona i przycisk tekstowy

Użyj poniższego kodu, aby renderować zarówno przycisk, jak i tekst.

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

Dostosowywanie tekstu przycisku

Aby skonfigurować język i tekst alternatywny dla przycisku, użyj atrybutu data-locale . Domyślnym językiem jest angielski.

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

Dostosowywanie rozmiaru ikony

Aby skonfigurować rozmiar ikony Czytnik immersyjny, użyj atrybutu data-icon-px-size . Spowoduje to ustawienie rozmiaru ikony w pikselach. Domyślny rozmiar to 20 pikseli.

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

Następny krok