Jak dostosować przycisk Czytnik immersyjny
W tym artykule pokazano, jak dostosować przycisk uruchamiający Czytnik immersyjny zgodnie z potrzebami aplikacji.
Dodaj przycisk Czytnik immersyjny
Zestaw 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 Ikona
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>