Personalización del botón del Lector inmersivo

En este artículo se muestra cómo personalizar el botón que inicia el Lector inmersivo para ajustarse a las necesidades de la aplicación.

Agregar el botón del Lector inmersivo

El SDK del Lector inmersivo proporciona el estilo predeterminado para el botón para iniciar el Lector inmersivo. Use el atributo de clase immersive-reader-button para habilitar este estilo.

<div class='immersive-reader-button'></div>

Personalizar el estilo del botón

Utilice el atributo data-button-style para establecer el estilo del botón. Los valores permitidos son: icon, text y iconAndText. El valor predeterminado es icon.

Botón de icono

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

Esto representa lo siguiente:

This is the rendered Text button

Botón de texto

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

Esto representa lo siguiente:

This is the rendered Immersive Reader button.

Botón de icono y texto

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

Esto representa lo siguiente:

Icon button

Personalizar el texto del botón

Configure el idioma y el texto alternativo para el botón mediante 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

El tamaño del icono del Lector inmersivo se puede configurar mediante el atributo data-icon-px-size. Esto establece el tamaño del icono en píxeles. El tamaño predeterminado es de 20px.

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

Pasos siguientes