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 of the rendered button icon.

Textschaltfläche

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

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

Screenshot of the text in the button.

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 of the icon and text together.

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