تستخدم أداة علامات التبويب العنصر المخصص في <devsite-selector> لتنظيم البيانات التي تتضمن تمثيلات متعددة، مثل أمثلة الرموز في لغات البرمجة أو بنى البيانات المختلفة التي تمثلها تنسيقات مختلفة (مثل JSON وYAML و أو XML).
الاستخدام العام
يستخدم المثال التالي العنصر <devsite-selector> المخصّص لعرض ثلاثة أقسام من علامات التبويب باستخدام HTML.
عنوان علامة التبويب 1
محتوى التبويب 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec dictum sagittis. Nun Masa ipsum وmollis non neque sed, vulputate digissim odio.
عنوان علامة التبويب 2
محتوى التبويب 2
Curabitur semper tortor nec dicta sagittis. NUN Masa ipsum وmollis non neque sed, vulputate digissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
عنوان علامة التبويب 3
علامة التبويب 3 المحتوى
Nun Masa ipsum, mollis non neque sed, vulputate dgenissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
nec dictum sagittis.
يستخدم المثال التالي بنية Markdown لعرض علامات التبويب الثلاث نفسها.
عنوان علامة التبويب 1
محتوى التبويب 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tocor nec dictum sagittis. نونك ماسا إيبسوم، مولس غير نيكي،
أوديوتي ديجينيم.
عنوان علامة التبويب 2
علامة التبويب 2 المحتوى
Curabitur semper torta dictum sagittis. نونك ماسترا بيسوم، مولي غير نرويد، فلبيت ديني أوديو. أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
عنوان علامة التبويب 3
علامة التبويب 3 المحتوى
Nun Masa ipsum, mollis non neque sed, vulputate dgnissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper torte
nec dictum sagittis.
أداة علامات تبويب مع قائمة كاملة
يستخدم المثال التالي العنصر المخصص في <devsite-selector>، إلا أنه يحتوي على عدد كبير جدًا من علامات التبويب التي لا يمكن وضعها على الشاشة، كما أنها تتدفق تلقائيًا إلى القائمة المنسدلة المزيد.
تفاح
محتوى عن التفاح
بالمشمش
محتوى عن المشمش
أفوكادو
محتوى عن الأفوكادو
التين
محتوى عن التين
عنب
محتوى عن العنب
فاكهة بنكهة الكيوي
محتوى عن فاكهة الكيوي
ليمون
محتوى عن الليمون
ليمون حامض
محتوى عن الليمون الحامض
بالمانجو
محتوى عن المانجو
درّاق
محتوى عن الخوخ
يستخدم المثال التالي بنية Markdown لعرض القائمة الكاملة نفسها.
تفاح
محتوى عن التفاح
بالمشمش
محتوى عن المشمش
أفوكادو
محتوى عن الأفوكادو
التين
محتوى عن التين
عنب
محتوى عن العنب
فاكهة بنكهة الكيوي
محتوى عن فاكهة الكيوي
ليمون
محتوى عن الليمون
ليمون حامض
محتوى عن الليمون الحامض
بالمانجو
محتوى عن المانجو
درّاق
محتوى عن الخوخ
تكرار أسماء علامات التبويب في أدوات علامات تبويب متعددة
ويؤثر النقر على علامة التبويب في جميع علامات التبويب الأخرى في الصفحة التي تتضمن النص نفسه في البنية نفسها. على سبيل المثال، سيؤدي النقر على التفاح أو المشمش في الأداة أدناه إلى التأثير أيضًا في الأداة الثانية في القسم السابق لأنه تم إنتاجهما باستخدام Markdown.
تفاح
مزيد من المحتوى حول التفاح
بالمشمش
مزيد من المحتوى حول المشمش أيضًا
تخصيص أدوات علامات التبويب
بينما يمكنك إنشاء أداة علامات التبويب باستخدام Markdown، عليك استخدام بنية HTML لتخصيص السمات المخصّصة.
التفاف النص داخل علامة تبويب
يتم اقتصاص النص الذي يتجاوز الحد الأقصى لعرض علامة تبويب والذي تم تحديده بواسطة مطوّري البرامج وإلحاقه بعلامات حذف. يستخدم المثال التالي الفئة two-line-tab ضمن العنصر المخصّص <devsite-selector> لالتفاف النص ضمن علامة التبويب الثانية.
هذا تصنيف طويل لا يتم إغلاقه.
ولا يتم التفاف هذا التصنيف إلى سطر آخر.
يمتد هذا التصنيف على السطر الثاني
يمتد تصنيف علامة التبويب هذه إلى سطر ثانٍ.
التفاف النص داخل علامة تبويب بتصنيف أصغر
يحدّد المثال التالي two-line-tab في السطر الأول وtab-label إلى السطر الثاني ضمن العنصر المخصّص <devsite-selector> لعرض تصنيف أصغر في السطر الثاني لعلامة تبويب مكوّنة من سطرين. 158
Swift
تحمل علامة التبويب هذه تصنيف Swift.
Java
تحتوي علامة التبويب هذه المكوّنة من سطرين على تصنيف Android أصغر أسفل تصنيف Java.
Kotlin
تحتوي علامة التبويب هذه المكوّنة من سطرين على تصنيف Android أصغر أسفل تصنيف Kotlin.
Java
تحتوي علامة التبويب هذه على تصنيف Java.
الربط المباشر بعلامة تبويب محدّدة
يؤدي المثال التالي إلى ربط علامة تبويب محدّدة وفتحها مباشرةً عن طريق تحديد id ضمن العنصر المخصّص <devsite-selector>.
كوبول
علامة التبويب هذه هي علامة التبويب التلقائية، ولكن يمكنك استخدام علامة الارتساء #cobol.
Fortran
ويمكنك الربط مباشرةً بعلامة التبويب هذه من خلال إلحاق علامة الارتساء #fortran برابطك.
Haskell
ستستخدم علامة التبويب هذه علامة الارتساء #haskell في الرابط.
إنشاء رابط يحتوي على كل الأدوات المفتوحة في علامة التبويب نفسها
يؤدي الرابط التالي إلى إلحاق معلّمة طلب البحث ?tab=Apricots بعنوان URL الخاص بهذه الصفحة وتحميل الصفحة باستخدام علامة التبويب المشمش عند فتح جميع أدوات الاختيار:
https://www.devsitetest.how/integration-tests/Widgetets/tabs?tab=Apricots