Anpassa knappen Avancerad läsare

Den här artikeln visar hur du anpassar knappen som startar Avancerad läsare för att passa programmets behov.

Lägg till knappen Avancerad läsare

Avancerad läsare SDK tillhandahåller standardformatering för knappen som startar Avancerad läsare. Om du vill aktivera den här formateringen använder du klassattributet immersive-reader-button .

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

Anpassa knappformatet

Om du vill ange knappens format använder du attributet data-button-style . De tillåtna värdena är icon, textoch iconAndText. Standardvärdet är icon.

Knappen Ikon

Använd följande kod för att återge ikonknappen.

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

Screenshot of the rendered button icon.

Textknapp

Använd följande kod för att återge knapptexten.

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

Screenshot of the text in the button.

Ikon och textknapp

Använd följande kod för att återge både knappen och texten.

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

Screenshot of the icon and text together.

Anpassa knapptexten

Använd attributet för att konfigurera språket och alternativtexten för knappen data-locale . Standardspråket är engelska.

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

Anpassa storleken på ikonen

Använd attributet för att konfigurera storleken på ikonen Avancerad läsaredata-icon-px-size. Detta anger storleken på ikonen i bildpunkter. Standardstorleken är 20 px.

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

Gå vidare