Comment personnaliser le bouton Lecteur immersif
Cet article montre comment personnaliser le bouton qui lance Immersive Reader, afin de répondre aux besoins de votre application.
Ajouter le bouton Lecteur immersif
Le kit SDK Immersive Reader fournit le style par défaut du bouton qui lance Immersive Reader. Pour activer ce style, utilisez l’attribut de classe immersive-reader-button.
<div class='immersive-reader-button'></div>
Personnaliser le style du bouton
Pour définir le style du bouton, utilisez l’attribut data-button-style. Les valeurs autorisées sont icon, text et iconAndText. La valeur par défaut est icon.
Bouton icône
Utilisez le code suivant pour afficher le bouton d’icône.
<div class='immersive-reader-button' data-button-style='icon'></div>
Bouton texte
Utilisez le code suivant pour afficher le texte du bouton.
<div class='immersive-reader-button' data-button-style='text'></div>
Bouton icône et texte
Utilisez le code suivant pour afficher le bouton et le texte.
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
Personnaliser le texte du bouton
Pour configurer la langue et le texte de remplacement du bouton, utilisez l’attribut data-locale. La langue par défaut est l'anglais.
<div class='immersive-reader-button' data-locale='fr-FR'></div>
Personnaliser la taille de l’icône
Pour configurer la taille de l’icône Immersive Reader, utilisez l’attribut data-icon-px-size. La taille de l’icône est définie en pixels. La taille par défaut est de 20 pixels.
<div class='immersive-reader-button' data-icon-px-size='50'></div>