ال حقل علامات التبويب ينظم عناصر التحكم في عنصر واجهة المستخدم في علامات تبويب اللوحة، وهي نفس البنية التي تستخدمها عناصر واجهة المستخدم الخاصة بـ Elementor لتصميم الحالة العادية وحالة التمرير. داخل الإضافات الرئيسية منشئ القطعة، يمكنك تحديد علامات التبويب، ووضع عناصر تحكم فرعية في كل منها، وتعرضها لوحة Elementor كشريط علامات تبويب مدمج بدلاً من تمرير طويل واحد للحقول.
يدعم التحكم في علامات التبويب شروط مثل كل حقل، ويتم قراءة أطفاله من خلال محرك قالب بناء جملة الغصين مع رمز من ثلاثة أجزاء، {{ tabs.tab_1.field }}، لا توجد حلقة مطلوبة. يغطي كلا الدليلين التفاصيل والقيود.
علامات التبويب هي حقل هيكلي. لا يحمل أي قيمة خاصة به؛ تنتمي القيم إلى الأطفال، ويقرأ القالب الخاص بك كل واحدة من خلال مسار متداخل يسمي حقل علامات التبويب، وعلامة التبويب، والحقل الموجود بداخله. لا حلقات، لا حيل، فقط عناوين.
ما يفعله حقل علامات التبويب #
- يعرض شريط علامات التبويب في لوحة عنصر واجهة المستخدم، المبنية على آلية علامات تبويب التحكم الخاصة بـ Elementor.
- يحمل مجموعة من علامات التبويب، ولكل منها اسمها الخاص، وتسميتها، وقائمة عناصر التحكم الفرعية.
- يحافظ على الدول ذات الصلة معًا، الاقتران الكلاسيكي هو الإصدار العادي والإصدار المتحرك لنفس الإعدادات.
- يعرض القيم الفرعية من خلال مسارات متداخلة في القالب الخاص بك: اسم حقل علامات التبويب، ثم علامة التبويب، ثم الحقل.
- يسمح بنفس أسماء الأطفال عبر علامات التبويب، لذلك يمكن أن يعكس Normal وHover بعضهما البعض بشكل نظيف.
إذا كنت قد بدأت للتو مع المنشئ، فاقرأ نظرة عامة على منشئ القطعة قبل هذا.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة زر تحتوي على حقل علامات تبويب مسمى
statesعقد علامة تبويب عادية وعلامة تبويب تحوم، ولكل منهما حقل ألوان مسمىbg.
كيفية إضافة حقل علامات التبويب #
في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد علامات التبويب الحقل، مدرج مع المجالات الهيكلية الأخرى مثل Popover Toggle وRepeater.
اسحبه إلى قسم أسفل أسلوب علامة التبويب، حيث يعيش تصميم الحالة، ثم حدد علامات التبويب وأسقط عناصر التحكم الفرعية في كل واحدة منها. تفتح خيارات الحقل على اليسار بمجرد هبوطه.
تم شرح خيارات حقل علامات التبويب #
- ملصق: العنوان الموضح أعلى شريط علامات التبويب في Elementor.
- اسم: المعرف الفريد لمجموعة علامات التبويب بأكملها والحروف والأرقام والتسطير فقط، على سبيل المثال
states. إنه الجزء الأول من مسار القالب الخاص بكل طفل. - علامات التبويب: قائمة علامات التبويب. تحمل كل علامة تبويب اسمًا (يستخدم في مسارات القالب، على سبيل المثال
normal)، وملصق (موضح على الشريط، على سبيل المثال “Normal”)، ومجموعة عناصر التحكم الفرعية الخاصة به. - ضوابط الطفل: الحقول الموجودة داخل كل علامة تبويب. تعمل أنواع حقول القيمة هنا، ويحتفظ كل منها بخياراته وشكل القيمة الخاص به.
- الوصف وإظهار الملصق والفاصل والشروط هي نفس خيارات العرض كما هو الحال في أي مكان آخر.
قراءة قيم علامة التبويب من خلال المسارات المتداخلة #
تتم معالجة عناصر حقل علامات التبويب بمسار نقطي مكون من ثلاثة أجزاء: اسم حقل علامات التبويب، واسم علامة التبويب، ثم اسم الحقل الفرعي.
{{ tabsname.tabname.fieldname }}لا يوجد تكرار عبر علامات التبويب. تتم قراءة كل قيمة بالضبط حيث تحتاج إليها. بالنسبة لمثال الزر، أ states حقل علامات التبويب مع علامات التبويب العادية وعلامات التبويب المتحركة، كل منها يحمل علامة تبويب bg مجال اللون، والأسلاك في لوحة CSS مثل هذا:
.ma-btn {
background: {{ states.normal.bg }};
}
.ma-btn:hover {
background: {{ states.hover.bg }};
}تسمية الطفل بنفس الطريقة في كلتا علامتي التبويب أمر متعمد ومدعوم. داخليًا، يقوم المنشئ بإلغاء نسخ المفاتيح المكررة باستخدام عداد، لكن مسار القالب يظل لكل علامة تبويب، لذلك bg في عادي و bg تظل في Hover قيمتين متميزتين يتم تناولهما بشكل نظيف. الأسماء المعكوسة هي النمط الذي يجب استهدافه: من يقرأ القالب يرى أن القواعد العادية وقواعد Hover تختلف بمقدار مقطع مسار واحد فقط.
انتبه: الرمز المسطح {{ bg }} لا يحل شيئا، وكذلك الجزءان {{ normal.bg }}. يبدأ المسار دائمًا بالاسم الخاص بحقل علامات التبويب. عندما تطبع قيمة علامة التبويب فارغة، قم بحساب المقاطع أولاً. تؤدي إعادة تسمية علامة التبويب إلى كسر المسارات بنفس الطريقة الصامتة؛ يستمر CSS في التجميع، وتتوقف القيمة عن الوصول، لذا قم بالاستقرار على أسماء علامات التبويب قبل كتابة القواعد.
استخدم عنصر التحكم في علامات التبويب في Elementor #
أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor (أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل). يتم عرض شريط علامات التبويب في اللوحة مع تسميات علامات التبويب الخاصة بك، والنقر فوق علامة تبويب يكشف عن عناصر التحكم الفرعية الخاصة به.
يقوم المحرر بتعيين الخلفية العادية في علامة التبويب الأولى، ويتحول إلى Hover، ويعين اللون الثاني. يؤدي تحريك الزر في المعاينة إلى إظهار الانتقال على الفور، نظرًا لأن كلا القيمتين موجودتان بالفعل في قواعد CSS الخاصة بالعنصر واجهة المستخدم.
حالات الاستخدام الشائعة #
- التصميم العادي والتحويم بالنسبة للأزرار والبطاقات والروابط، الاقتران الكلاسيكي.
- الحالات النشطة وغير النشطة للتبديل والمرشحات وعناصر التنقل.
- الإعدادات قبل وبعد بالمقارنة أو الكشف عن الحاجيات.
- المتغيرات الفاتحة والداكنة، السماح للمحررين بضبط كلا المخططين من قسم واحد.
- تصميم الصف الفردي والمتساوي في القائمة وعناصر واجهة المستخدم الجدول.
نصائح للعمل مع حقل علامات التبويب #
- قيم العناوين مع المسار الكامل المكون من ثلاثة أجزاء.
{{ states.hover.bg }}يعمل؛{{ bg }}و{{ hover.bg }}لا. - قم بتوضيح أسماء الأطفال عبر علامات التبويب. نفس الحقول، نفس الأسماء، مقطع مسار واحد مختلف؛ يظل القالب قابلاً للقراءة وتظل علامات التبويب قابلة للمقارنة.
- احتفظ بأسماء علامات التبويب قصيرة وصغيرة. إنها معرفات القالب، لذلك
normalوhoverفاز على “Tab 1” و“Tab 2”. - استخدم علامات التبويب للحالات والأقسام للموضوعات. ينتمي متغيران من نفس الإعدادات إلى علامات التبويب؛ تنتمي الإعدادات غير ذات الصلة إلى أقسام منفصلة.
- تذكر أن كل طفل يحتفظ بشكل قيمة نوعه. لا يزال شريط التمرير الموجود داخل علامة التبويب يقرأ كـ
{{ states.normal.gap.size }}{{ states.normal.gap.unit }}.
الأسئلة المتداولة #
ما هو حقل علامات التبويب في Master Addons Widget Builder؟
إنه حقل هيكلي يقسم عناصر التحكم في عنصر واجهة المستخدم إلى علامات تبويب لوحة، مبنية على آلية علامات تبويب التحكم الخاصة بـ Elementor. تحتوي كل علامة تبويب على عناصر التحكم الفرعية الخاصة بها، وتقرأ القوالب كل طفل من خلال مسار متداخل {{ tabsname.tabname.fieldname }}.
كيف أقرأ قيمة من علامة تبويب معينة؟
استخدم مسار النقطة الكاملة: اسم حقل علامات التبويب، واسم علامة التبويب، ثم اسم الطفل. ل states حقل يحتوي على علامة تبويب تحوم bg، هذا هو {{ states.hover.bg }}. المسارات الأقصر لا تحل بأي شيء.
هل يمكنني تكرار علامات التبويب الموجودة في القالب الخاص بي؟
لا، ولست بحاجة إلى ذلك. تنظم علامات التبويب عناصر التحكم بدلاً من الاحتفاظ بقائمة، لذلك تتم معالجة كل قيمة مباشرة حيث يستخدمها الترميز أو CSS، على عكس المكرر حيث تقوم حلقة for بطباعة الصفوف.
هل يمكن أن تحتوي علامتا التبويب على حقول تحمل نفس الاسم؟
نعم، وهو النمط الموصى به. يتم إلغاء رفع المفاتيح الداخلية تلقائيًا، بينما يظل مسار القالب لكل علامة تبويب، لذلك {{ states.normal.bg }} و {{ states.hover.bg }} هي قيم منفصلة عن الحقول ذات الأسماء المتطابقة.
كيف يمكنني بناء التصميم العادي والحوم المعتاد؟
إنشاء علامتي تبويب مسماة normal و hover باستخدام الحقول الفرعية المطابقة، اكتب كلتا القاعدتين في لوحة CSS: يقرأ المحدد الأساسي القيم العادية والقيم العادية :hover يقرأ المحدد قيم التمرير.
لماذا لا يطبع الرمز المميز لحقل علامة التبويب أي شيء؟
إما أن يكون المسار غير مكتمل أو أن هناك خطأ إملائيًا في المقطع. ليس لحقل علامات التبويب نفسه أي قيمة، لذلك يجب على الرمز المميز تسمية الأجزاء الثلاثة، باستخدام اسم علامة التبويب بدلاً من تسميتها.
إلتحاق بالركب #
يحول حقل علامات تبويب Widget Builder تصميم الحالة إلى نمط لوحة مرتب: حدد normal و hover مرة واحدة، قم بعكس أسماء الأطفال، وستقرأ CSS الخاصة بك {{ states.normal.bg }} ضد {{ states.hover.bg }} مع عدم تغيير أي شيء آخر. لتكرار المحتوى بدلاً من الحالات المقترنة، فإن مجال المكرر هو الأخ الهيكلي للوصول إليه. استكشاف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
