Настройка кнопки "Иммерсивное средство чтения"

В этой статье показано, как настроить кнопку, которая запускает Иммерсивное средство чтения, в соответствии с потребностями приложения.

Добавление кнопки "Иммерсивное средство чтения"

Пакет SDK для Иммерсивного режима чтения предоставляет стили по умолчанию для кнопки, запускающей Иммерсивный режим чтения. Чтобы включить этот стиль, используйте атрибут класса immersive-reader-button.

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

Настройка стиля кнопки

Чтобы задать стиль кнопки, используйте data-button-style атрибут. Допустимые значения: icon, text и iconAndText. Значение по умолчанию — icon.

Кнопка со значком

Используйте следующий код для отрисовки кнопки значка.

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

Снимок экрана: значок отрисоченной кнопки.

Кнопка "Текст"

Используйте следующий код для отображения текста кнопки.

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

Снимок экрана: текст в кнопке.

Кнопка со значком и текстом

Используйте следующий код для отрисовки кнопки и текста.

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

Снимок экрана: значок и текст вместе.

Настройка текста кнопки

Чтобы настроить язык и замещающий текст кнопки, используйте data-locale атрибут. По умолчанию используется английский язык.

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

Настройка размера значка

Чтобы настроить размер значка Иммерсивное средство чтения, используйте data-icon-px-size атрибут. Задает размер значка в пикселях. Размер по умолчанию составляет 20 пикселей.

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

Следующий шаг