Como personalizar o botão da Leitura Avançada
Este artigo demonstra como personalizar o botão que inicia a Leitura Avançada para atender às necessidades do seu aplicativo.
Adicionar o botão Leitura Avançada
O SDK da Leitura Avançada fornece o estilo padrão para o botão que inicia a Leitura Avançada. Use o atributo de classe immersive-reader-button
para habilitar esse estilo.
<div class='immersive-reader-button'></div>
Personalizar o estilo do botão
Use o atributo data-button-style
para definir o estilo do botão. Os valores permitidos são icon
, text
e iconAndText
. O valor padrão é icon
.
Botão de ícone
Use o código a seguir para renderizar o botão í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
Use o atributo data-locale
para configurar o idioma e o texto alternativo do botão. O idioma padrão é inglês.
<div class='immersive-reader-button' data-locale='fr-FR'></div>
Personalizar o tamanho do ícone
Para configurar o tamanho do ícone Leitura Avançada, use o atributo data-icon-px-size
. Ele define o tamanho do ícone em pixels. O tamanho padrão é 20 px.
<div class='immersive-reader-button' data-icon-px-size='50'></div>