Personalización del botón del Lector inmersivo
En este artículo se muestra cómo personalizar el botón que inicia Immersive Reader, para ajustarse a las necesidades de la aplicación.
Agregar el botón del Lector inmersivo
El SDK de Immersive Reader proporciona el estilo predeterminado para el botón que inicia Immersive Reader. Para habilitar este estilo, use el atributo de clase immersive-reader-button.
<div class='immersive-reader-button'></div>
Personalizar el estilo del botón
Para establecer el estilo del botón, use el atributo data-button-style. Los valores permitidos son: icon, text y iconAndText. El valor predeterminado es icon.
Botón de icono
Use el siguiente código para representar el botón del icono.
<div class='immersive-reader-button' data-button-style='icon'></div>
Botón de texto
Use el siguiente código para representar el texto del botón.
<div class='immersive-reader-button' data-button-style='text'></div>
Botón de icono y texto
Use el siguiente código para representar tanto el botón como el texto.
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
Personalizar el texto del botón
Para configurar el idioma y el texto alternativo del botón, use el atributo data-locale. El idioma predeterminado es el inglés.
<div class='immersive-reader-button' data-locale='fr-FR'></div>
Personalizar el tamaño del icono
Para configurar el tamaño del icono de Immersive Reader, use el atributo data-icon-px-size. Esto establece el tamaño del icono en píxeles. El tamaño predeterminado es de 20 px.
<div class='immersive-reader-button' data-icon-px-size='50'></div>