Compartilhar via


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>

Captura de tela do ícone do botão renderizado.

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>

Captura de tela do texto no botão.

Í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>

Captura de tela do ícone e texto juntos.

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>

Próxima etapa