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>