كيفية تخصيص زر القارئ الشامل

توضح هذه المقالة كيفية تخصيص الزر الذي يقوم بتشغيل القارئ الشامل، لتناسب احتياجات التطبيق الخاص بك.

إضافة زر القارئ الشامل

يوفر القارئ الشامل 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 px.

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