ویجت برگه‌ها از عنصر سفارشی <devsite-selector> برای سازماندهی داده‌هایی استفاده می‌کند که چندین نمایش دارند، مانند نمونه‌های کد در زبان‌های برنامه‌نویسی مختلف یا ساختارهای داده‌ای که با فرمت‌های مختلف (مانند JSON، YAML، یا XML) نمایش داده می‌شوند.
استفاده عمومی
مثال زیر از عنصر سفارشی <devsite-selector> برای ارائه سه بخش برگه با استفاده از HTML استفاده می کند.
عنوان برگه 1
محتوای برگه 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio.
عنوان برگه 2
محتوای برگه 2
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
عنوان برگه 3
محتوای برگه 3
Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
مثال زیر از دستور Markdown برای ارائه همان سه تب استفاده می کند.
عنوان برگه 1
محتوای برگه 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio.
عنوان برگه 2
محتوای برگه 2
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
عنوان برگه 3
محتوای برگه 3
Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
ویجت برگه ها با منوی سرریز
مثال زیر از عنصر سفارشی <devsite-selector> استفاده می‌کند، اما دارای برگه‌های زیادی است که نمی‌تواند روی صفحه قرار بگیرد و به طور خودکار در منوی کشویی More سرریز می‌شود.
سیب
مطالب در مورد سیب
زردآلو
مطالبی در مورد زردآلو
آووکادوها
مطالبی در مورد آووکادو
انجیر
مطالبی در مورد انجیر
انگور
مطالبی در مورد انگور
کیوی
مطالبی در مورد کیوی
لیمو
مطالبی در مورد لیمو
لیموترش سبز
مطالبی در مورد لیموترش
انبه
مطالبی در مورد انبه
هلو
مطالبی در مورد هلو
مثال زیر از دستور Markdown برای نمایش همان منوی سرریز استفاده می کند.
سیب
مطالب در مورد سیب
زردآلو
مطالبی در مورد زردآلو
آووکادوها
مطالبی در مورد آووکادو
انجیر
مطالبی در مورد انجیر
انگور
مطالبی در مورد انگور
کیوی
مطالبی در مورد کیوی
لیمو
مطالبی در مورد لیمو
لیموترش سبز
مطالبی در مورد لیموترش
انبه
مطالبی در مورد انبه
هلو
مطالبی در مورد هلو
نام برگه‌های تکراری در ویجت‌های چند تب
کلیک کردن بر روی یک برگه بر روی سایر برگه‌های صفحه با متن مشابه در همان نحو تأثیر می‌گذارد. به عنوان مثال، کلیک کردن بر روی Apples یا Apricots در ویجت زیر روی ویجت دوم در بخش قبل نیز تاثیر می گذارد زیرا هر دو با Markdown ساخته شده اند.
سیب
مطالب بیشتر در مورد سیب!
زردآلو
مطالب بیشتر در مورد زردآلو نیز!
سفارشی کردن ویجت برگه ها
در حالی که می توانید ویجت برگه ها را با Markdown بسازید، باید از نحو HTML برای اختصاص ویژگی های سفارشی استفاده کنید.
بسته بندی متن در یک برگه
متنی که بیش از حداکثر عرض یک برگه تنظیم شده توسط DevSite است، بریده شده و با بیضی اضافه می شود. مثال زیر از کلاس two-line-tab در عنصر سفارشی <devsite-selector> برای قرار دادن متن در برگه دوم استفاده می کند.
این یک برچسب بلند است که بسته بندی نمی شود
این برچسب به خط دیگری بسته نمی شود.
این برچسب به خط دوم بسته می شود
برچسب این برگه به خط دوم بسته می شود.
بسته بندی متن در یک برگه با یک برچسب کوچکتر
مثال زیر two-line-tab را به خط اول و tab-label را به خط دوم در عنصر سفارشی <devsite-selector> می کند تا یک برچسب کوچکتر در خط دوم یک برگه دو خطی نمایش داده شود.
سریع
این برگه دارای برچسب سوئیفت است.
جاوا
این تب دو خطی دارای یک برچسب اندرویدی کوچکتر در زیر برچسب جاوا است.
کاتلین
این برگه دو خطی دارای یک برچسب اندرویدی کوچکتر در زیر برچسب Kotlin است.
جاوا
این برگه دارای یک برچسب جاوا است.
پیوند مستقیم به یک تب خاص
مثال زیر مستقیماً با تعیین id در عنصر سفارشی <devsite-selector> به یک برگه خاص پیوند داده و آن را باز می کند.
کوبول
این تب پیش‌فرض است، اما می‌توانید از #cobol anchor استفاده کنید.
فرترن
با افزودن #fortran anchor به پیوند خود مستقیماً به این برگه پیوند می دهید.
هاسکل
این تب از لنگر #haskell در پیوند شما استفاده می کند.
ایجاد یک پیوند با تمام ویجت های باز شده در یک تب
پیوند زیر پارامتر پرس و جو ?tab=Apricots را به URL این صفحه اضافه می کند و صفحه را با برگه Apricots باز در همه انتخابگرها بارگیری می کند:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots
، ویجت برگه‌ها از عنصر سفارشی <devsite-selector> برای سازماندهی داده‌هایی استفاده می‌کند که چندین نمایش دارند، مانند نمونه‌های کد در زبان‌های برنامه‌نویسی مختلف یا ساختارهای داده‌ای که با فرمت‌های مختلف (مانند JSON، YAML، یا XML) نمایش داده می‌شوند.
استفاده عمومی
مثال زیر از عنصر سفارشی <devsite-selector> برای ارائه سه بخش برگه با استفاده از HTML استفاده می کند.
عنوان برگه 1
محتوای برگه 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio.
عنوان برگه 2
محتوای برگه 2
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
عنوان برگه 3
محتوای برگه 3
Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
مثال زیر از دستور Markdown برای ارائه همان سه تب استفاده می کند.
عنوان برگه 1
محتوای برگه 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio.
عنوان برگه 2
محتوای برگه 2
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
عنوان برگه 3
محتوای برگه 3
Nunc massa ipsum، mollis non neque sed، vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
ویجت برگه ها با منوی سرریز
مثال زیر از عنصر سفارشی <devsite-selector> استفاده می‌کند، اما دارای برگه‌های زیادی است که نمی‌تواند روی صفحه قرار بگیرد و به طور خودکار در منوی کشویی More سرریز می‌شود.
سیب
مطالب در مورد سیب
زردآلو
مطالبی در مورد زردآلو
آووکادوها
مطالبی در مورد آووکادو
انجیر
مطالبی در مورد انجیر
انگور
مطالبی در مورد انگور
کیوی
مطالبی در مورد کیوی
لیمو
مطالبی در مورد لیمو
لیموترش سبز
مطالبی در مورد لیموترش
انبه
مطالبی در مورد انبه
هلو
مطالبی در مورد هلو
مثال زیر از دستور Markdown برای نمایش همان منوی سرریز استفاده می کند.
سیب
مطالب در مورد سیب
زردآلو
مطالبی در مورد زردآلو
آووکادوها
مطالبی در مورد آووکادو
انجیر
مطالبی در مورد انجیر
انگور
مطالبی در مورد انگور
کیوی
مطالبی در مورد کیوی
لیمو
مطالبی در مورد لیمو
لیموترش سبز
مطالبی در مورد لیموترش
انبه
مطالبی در مورد انبه
هلو
مطالبی در مورد هلو
نام برگه‌های تکراری در ویجت‌های چند تب
کلیک کردن بر روی یک برگه بر روی سایر برگه‌های صفحه با متن مشابه در همان نحو تأثیر می‌گذارد. به عنوان مثال، کلیک کردن بر روی Apples یا Apricots در ویجت زیر روی ویجت دوم در بخش قبل نیز تاثیر می گذارد زیرا هر دو با Markdown ساخته شده اند.
سیب
مطالب بیشتر در مورد سیب!
زردآلو
مطالب بیشتر در مورد زردآلو نیز!
سفارشی کردن ویجت برگه ها
در حالی که می توانید ویجت برگه ها را با Markdown بسازید، باید از نحو HTML برای اختصاص ویژگی های سفارشی استفاده کنید.
بسته بندی متن در یک برگه
متنی که بیش از حداکثر عرض یک برگه تنظیم شده توسط DevSite است، بریده شده و با بیضی اضافه می شود. مثال زیر از کلاس two-line-tab در عنصر سفارشی <devsite-selector> برای قرار دادن متن در برگه دوم استفاده می کند.
این یک برچسب بلند است که بسته بندی نمی شود
این برچسب به خط دیگری بسته نمی شود.
این برچسب به خط دوم بسته می شود
برچسب این برگه به خط دوم بسته می شود.
بسته بندی متن در یک برگه با یک برچسب کوچکتر
مثال زیر two-line-tab را به خط اول و tab-label را به خط دوم در عنصر سفارشی <devsite-selector> می کند تا یک برچسب کوچکتر در خط دوم یک برگه دو خطی نمایش داده شود.
سریع
این برگه دارای برچسب سوئیفت است.
جاوا
این تب دو خطی دارای یک برچسب اندرویدی کوچکتر در زیر برچسب جاوا است.
کاتلین
این برگه دو خطی دارای یک برچسب اندرویدی کوچکتر در زیر برچسب Kotlin است.
جاوا
این برگه دارای یک برچسب جاوا است.
پیوند مستقیم به یک تب خاص
مثال زیر مستقیماً با تعیین id در عنصر سفارشی <devsite-selector> به یک برگه خاص پیوند داده و آن را باز می کند.
کوبول
این تب پیش‌فرض است، اما می‌توانید از #cobol anchor استفاده کنید.
فرترن
با افزودن #fortran anchor به پیوند خود مستقیماً به این برگه پیوند می دهید.
هاسکل
این تب از لنگر #haskell در پیوند شما استفاده می کند.
ایجاد یک پیوند با تمام ویجت های باز شده در یک تب
پیوند زیر پارامتر پرس و جو ?tab=Apricots را به URL این صفحه اضافه می کند و صفحه را با برگه Apricots باز در همه انتخابگرها بارگیری می کند:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots