 |
ملخص | يجعل أيقونة تبديل الشريط الجانبي ديناميكية وقابلة للتخصيص |
 |
مستودع | https://github.com/Lillinator/dynamic-sidebar-icon |
 |
معاينة | https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon |
 |
دليل التثبيت | كيفية تثبيت سمة أو مكون سمة |
تثبيت مكون السمة هذا
نظرة عامة
مكون سمة Discourse خفيف الوزن يغير ديناميكيًا أيقونة تبديل الشريط الجانبي في الرأس بناءً على ما إذا كان الشريط الجانبي مفتوحًا أم مغلقًا.
بشكل افتراضي، يعرض المكون أيقونة قائمة هامبرغر القياسية (bars) عندما يكون الشريط الجانبي مغلقًا، وينتقل إلى أيقونة إغلاق X (xmark) عندما يكون الشريط الجانبي مفتوحًا.
يمكن للمسؤولين تحديد أيقونات مخصصة بدلاً من ذلك إذا رغبوا في ذلك، ويمكنهم أيضًا اختيار تمكينها لعرض الهاتف المحمول (بينما ينطبق الجانب الديناميكي للمكون فقط على أحجام العرض غير المحمولة، قد يرغب المسؤولون الذين يغيرون أيقونة “مفتوح” في تحقيق اتساق مع تجربة المستخدم على الهاتف المحمول).
الميزات
- يوفر للمستخدمين تغذية راجعة بصرية واضحة حول كيفية التفاعل مع الشريط الجانبي.
- يمكن للمسؤولين استبدال الأيقونات الافتراضية بسهولة بأي أيقونة FontAwesome عبر إعدادات السمة.
- يسمح بتمكين أيقونة شريط جانبي مخصصة لاتساق تجربة المستخدم على عرض الهاتف المحمول.
لقطات فيديو
الإعدادات الافتراضية للمكون:
باستخدام أيقونات dog وcat:
الإعدادات
قم بتخصيص الأيقونات المستخدمة لفتح وإغلاق الشريط الجانبي عن طريق تعديل إعدادات المكون:
| الإعداد | الوصف |
|---|---|
Icon_to_open_the_sidebar |
الأيقونة المعروضة عندما يكون الشريط الجانبي مضغوطًا (الافتراضي: bars) |
Icon_to_close_the_sidebar |
الأيقونة المعروضة عندما يكون الشريط الجانبي موسعًا (الافتراضي: xmark) |
Apply_open_icon_on_mobile |
تطبيق أيقونة “مفتوح” المخصصة على عرض الهاتف المحمول (الافتراضي: false) |
ملاحظات
- إذا كنت تستخدم أيقونات مخصصة غير مدرجة بالفعل في Discourse الأساسي، فستظهر فارغة؛ لإصلاح ذلك، يجب عليك إضافة الأيقونات المخصصة (مثل
rocket،cat) إلى إعداد الموقعمجموعة أيقونات SVG الفرعيةفي إعدادات المسؤول الخاصة بـ Discourse (انظرجميع إعدادات الموقع→مجموعة أيقونات SVG الفرعية). - لا يعمل هذا المكون مع وضع القائمة المنسدلة في الرأس.
تحقق من أشياء Discourse الأخرى الخاصة بي