Freigeben über


Vorgehensweise: Anpassen der Schaltfläche des plastischen Readers

In diesem Artikel wird veranschaulicht, wie Sie die Schaltfläche anpassen, die den plastischen Reader startet, um die Anforderungen Ihrer Anwendung zu erfüllen.

Hinzufügen der Plastischer Reader-Schaltfläche

Das SDK für den plastischen Reader stellt einen Standardstil für die Schaltfläche zum Starten des plastischen Readers bereit. Verwenden Sie das Klassenattribut immersive-reader-button, um diesen Stil zu aktivieren.

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

Anpassen des Schaltflächenstils

Verwenden Sie das Attribut data-button-style, um den Stil der Schaltfläche festzulegen. Zulässige Werte sind icon, text und iconAndText. Standardwert: icon.

Symbolschaltfläche

Verwenden Sie den folgenden Code, um die Symbolschaltfläche zu rendern.

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

Screenshot: Gerendertes Schaltflächensymbol

Textschaltfläche

Verwenden Sie den folgenden Code, um den Schaltflächentext zu rendern.

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

Screenshot: Text auf der Schaltfläche

Symbol- und Textschaltfläche

Verwenden Sie den folgenden Code, um sowohl die Schaltfläche als auch den Text zu rendern.

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

Screenshot: Symbol und Text zusammen

Anpassen des Schaltflächentexts

Verwenden Sie das Attribut data-locale, um die Sprache und den Alternativtext für die Schaltfläche zu konfigurieren. Die Standardsprache ist Deutsch.

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

Anpassen der Größe des Symbols

Verwenden Sie das Attribut data-icon-px-size, um die Größe des Symbols für den plastischen Reader zu konfigurieren. Dies legt die Größe des Symbols in Pixeln fest. Die Standardgröße beträgt 20 px.

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

Nächster Schritt