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>

Screenshot of the rendered button icon.

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>

Screenshot of the text in the button.

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>

Screenshot of the icon and text together.

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>

Paso siguiente