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.

HTML

<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.

HTML

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

Bouton texte

Utilisez le code suivant pour afficher le texte du bouton.

HTML

<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.

HTML

<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.

HTML

<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.

HTML

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

Étape suivante

Explorer la documentation de référence du kit de développement logiciel (SDK) Immersive Reader