Anpassa Avancerad läsare knappen

  • Artikel
  • 2 minuter för att läsa

Den här artikeln visar hur du anpassar knappen som startar Avancerad läsare för att passa behoven i ditt program.

Lägg till Avancerad läsare knappen

SDK:Avancerad läsare tillhandahåller standardformat för knappen som startar Avancerad läsare. Använd immersive-reader-button klassattributet för att aktivera det här format.

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

Anpassa knappformatet

Använd data-button-style attributet för att ange knappens format. Tillåtna värden är icon , text och iconAndText . Standardvärdet är icon.

Ikonknapp

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

Detta återger följande:

Det här är den renderade textknappen

Textknapp

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

Detta återger följande:

Det här är den renderade Avancerad läsare knappen.

Ikon och textknapp

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

Detta återger följande:

Ikonknapp

Anpassa knapptexten

Konfigurera språket och alternativtexten för knappen med hjälp av data-locale attributet . Standardspråk är engelska.

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

Anpassa storleken på ikonen

Storleken på ikonen Avancerad läsare kan konfigureras med hjälp av data-icon-px-size attributet . Detta anger ikonens storlek i bildpunkter. Standardstorleken är 20 bildpunkter.

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

Nästa steg