Come personalizzare il pulsante Strumento di lettura immersiva
Questo articolo illustra come personalizzare il pulsante che avvia il Strumento di lettura immersiva in base alle esigenze dell'applicazione.
Aggiungere il pulsante Strumento di lettura immersiva
L'SDK di Strumento di lettura immersiva fornisce uno stile predefinito per il pulsante che avvia il Strumento di lettura immersiva. Usare l'attributo immersive-reader-button della classe per abilitare questo stile.
<div class='immersive-reader-button'></div>
Personalizzare lo stile del pulsante
Usare l'attributo data-button-style per impostare lo stile del pulsante. I valori consentiti sono icon, texte iconAndText. Il valore predefinito è icon.
Pulsante Icona
<div class='immersive-reader-button' data-button-style='icon'></div>
In questo modo viene eseguito il rendering seguente:
Pulsante Testo
<div class='immersive-reader-button' data-button-style='text'></div>
In questo modo viene eseguito il rendering seguente:
Pulsante Icona e testo
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
In questo modo viene eseguito il rendering seguente:
Personalizzare il testo del pulsante
Configurare la lingua e il testo alternativo per il pulsante usando l'attributo data-locale . La lingua predefinita è l'italiano.
<div class='immersive-reader-button' data-locale='fr-FR'></div>
Personalizzare le dimensioni dell'icona
Le dimensioni dell'icona Strumento di lettura immersiva possono essere configurate usando l'attributo data-icon-px-size . In questo modo vengono impostate le dimensioni dell'icona in pixel. La dimensione predefinita è 20px.
<div class='immersive-reader-button' data-icon-px-size='50'></div>