 |
الملخص | يجعل أيقونة تبديل الشريط الجانبي ديناميكية وقابلة للتخصيص |
 |
المستودع | https://github.com/Lillinator/discourse-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 الأخرى الخاصة بي