Come personalizzare il pulsante dello strumento di lettura immersiva
Questo articolo illustra come personalizzare il pulsante che avvia lo strumento di lettura immersiva in base alle esigenze dell'applicazione.
Aggiungere il pulsante dello strumento di lettura immersiva
Immersive Reader SDK offre uno stile predefinito per il pulsante che avvia lo strumento di lettura immersiva. Usare l'attributo della classe immersive-reader-button per abilitare questo stile.
<div class='immersive-reader-button'></div>
Personalizzare lo stile del pulsante
Utilizzare l'attributo data-button-style per impostare lo stile del pulsante. I valori consentiti sono icon, text, e iconAndText. Il valore predefinito è icon.
Pulsante con icona
Usare il codice seguente per eseguire il rendering del pulsante icona.
<div class='immersive-reader-button' data-button-style='icon'></div>
Pulsante Testo
Usare il codice seguente per eseguire il rendering del testo del pulsante.
<div class='immersive-reader-button' data-button-style='text'></div>
Pulsante Icona e testo
Usare il codice seguente per eseguire il rendering del pulsante e del testo.
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
Personalizzare il testo del pulsante
Per configurare la lingua e il testo alternativo per il pulsante usare l'attributo data-locale. La lingua predefinita è l'italiano.
<div class='immersive-reader-button' data-locale='fr-FR'></div>
Personalizzare le dimensioni dell'icona
Per configurare le dimensioni dell'icona dello strumento di lettura immersiva, usare l'attributo data-icon-px-size. In questo modo vengono impostate le dimensioni dell'icona in pixel. Le dimensioni predefinite sono 20 px.
<div class='immersive-reader-button' data-icon-px-size='50'></div>