Como personalizar o botão Leitor Imersivo

Este artigo demonstra como personalizar o botão que inicia o Leitor Imersivo, para atender às necessidades do seu aplicativo.

Adicionar o botão Leitor Imersivo

O SDK do Leitor Imersivo fornece estilo padrão para o botão que inicia o Leitor Imersivo. Para habilitar esse estilo, use o immersive-reader-button atributo class.

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

Personalizar o estilo do botão

Para definir o estilo do botão, use o data-button-style atributo. Os valores permitidos são icon, texte iconAndText. O valor predefinido é icon.

Botão Ícone

Use o código a seguir para renderizar o botão de ícone.

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

Botão de texto

Use o código a seguir para renderizar o texto do botão.

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

Ícone e botão de texto

Use o código a seguir para renderizar o botão e o texto.

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

Personalizar o texto do botão

Para configurar o idioma e o texto alternativo para o botão, use o data-locale atributo. O idioma padrão é o inglês.

<div class='immersive-reader-button' data-locale='fr-FR'></div>

Personalizar o tamanho do ícone

Para configurar o tamanho do ícone do Leitor Imersivo, use o data-icon-px-size atributo. Isso define o tamanho do ícone em pixels. O tamanho padrão é 20 px.

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

Próximo passo