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