So passen Sie die Schaltfläche des Immersive Readers an

Um die Anforderungen Ihrer Anwendung zu erfüllen, wird in diesem Artikel veranschaulicht, wie Sie den Button anpassen, der den Immersive Reader startet.

Fügen Sie die Immersive Reader-Schaltfläche hinzu

Das Immersive Reader SDK stellt einen Standardstil für die Schaltfläche bereit, die den Immersive Reader startet. 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>

Textschaltfläche

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

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

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>

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 Immersive 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

Erkunden Sie die Immersive Reader SDK-Referenz