De knop Insluitende lezer aanpassen

In dit artikel wordt beschreven hoe u de knop aanpast waarmee de Insluitende lezer wordt gestart, zodat deze voldoet aan de behoeften van uw toepassing.

De knop Insluitende lezer toevoegen

De Insluitende lezer SDK biedt standaardstijl voor de knop waarmee de Insluitende lezer wordt gestart. Als u deze stijl wilt inschakelen, gebruikt u het immersive-reader-button klassekenmerk.

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

De knopstijl aanpassen

Als u de stijl van de knop wilt instellen, gebruikt u het data-button-style kenmerk. De toegestane waarden zijn icon, texten iconAndText. De standaardwaarde is icon.

Pictogramknop

Gebruik de volgende code om de pictogramknop weer te geven.

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

Screenshot of the rendered button icon.

Knop Tekst

Gebruik de volgende code om de knoptekst weer te geven.

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

Screenshot of the text in the button.

Knop Pictogram en tekst

Gebruik de volgende code om zowel de knop als de tekst weer te geven.

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

Screenshot of the icon and text together.

De knoptekst aanpassen

Gebruik het data-locale kenmerk om de taal en de alternatieve tekst voor de knop te configureren. De standaardtaal is Engels.

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

De grootte van het pictogram aanpassen

Gebruik het data-icon-px-size kenmerk om de grootte van het Insluitende lezer-pictogram te configureren. Hiermee stelt u de grootte van het pictogram in pixels in. De standaardgrootte is 20 px.

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

Volgende stap