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

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

Isso renderiza o seguinte:

This is the rendered Text button

Botão de texto

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

Isso renderiza o seguinte:

This is the rendered Immersive Reader button.

Ícone e botão de texto

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

Isso renderiza o seguinte:

Icon button

Personalizar o texto do botão

Configure o idioma e o texto alternativo do botão usando o atributo data-locale. O idioma padrão é inglês.

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

Personalizar o tamanho do ícone

É possível configurar o ícone da Leitura Avançada com 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óximas etapas