ٹیبز ویجیٹ ڈیٹا کو منظم کرنے کے لیے <devsite-selector> کسٹم عنصر کا استعمال کرتا ہے جس کی متعدد نمائندگی ہوتی ہے، جیسے کہ مختلف پروگرامنگ زبانوں میں کوڈ کی مثالیں یا مختلف فارمیٹس (جیسے JSON، YAML، یا XML) کی نمائندگی کرنے والے ڈیٹا ڈھانچے۔
عام استعمال
مندرجہ ذیل مثال HTML کا استعمال کرتے ہوئے تین ٹیب سیکشنز پیش کرنے کے لیے <devsite-selector> کسٹم عنصر کا استعمال کرتی ہے۔
ٹیب 1 عنوان
ٹیب 1 مواد
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre tortor NEC dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
ٹیب 2 عنوان
ٹیب 2 کا مواد
Curabitur sempre 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 sempre tortor NEC dictum sagittis.
مندرجہ ذیل مثال ایک ہی تین ٹیبز کو رینڈر کرنے کے لیے مارک ڈاؤن نحو کا استعمال کرتی ہے۔
ٹیب 1 عنوان
ٹیب 1 مواد
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre tortor NEC dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
ٹیب 2 عنوان
ٹیب 2 کا مواد
Curabitur sempre 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 sempre tortor NEC dictum sagittis.
اوور فلو مینو کے ساتھ ٹیبز ویجیٹ
درج ذیل مثال میں <devsite-selector> کسٹم عنصر کا استعمال کیا گیا ہے لیکن اس میں اسکرین پر فٹ ہونے کے لیے بہت زیادہ ٹیبز ہیں اور خود بخود مزید ڈراپ ڈاؤن مینو میں اوور فلو ہوجاتا ہے۔
سیب
سیب کے بارے میں مواد
خوبانی
خوبانی کے بارے میں مواد
ایوکاڈو
ایوکاڈو کے بارے میں مواد
انجیر
انجیر کے بارے میں مواد
انگور
انگور کے بارے میں مواد
کیوی فروٹ
کیوی فروٹ کے بارے میں مواد
لیموں
لیموں کے بارے میں مواد
چونے
چونے کے بارے میں مواد
آم
آم کے بارے میں مواد
آڑو
آڑو کے بارے میں مواد
مندرجہ ذیل مثال اسی اوور فلو مینو کو رینڈر کرنے کے لیے مارک ڈاؤن نحو کا استعمال کرتی ہے۔
سیب
سیب کے بارے میں مواد
خوبانی
خوبانی کے بارے میں مواد
ایوکاڈو
ایوکاڈو کے بارے میں مواد
انجیر
انجیر کے بارے میں مواد
انگور
انگور کے بارے میں مواد
کیوی فروٹ
کیوی فروٹ کے بارے میں مواد
لیموں
لیموں کے بارے میں مواد
چونے
چونے کے بارے میں مواد
آم
آم کے بارے میں مواد
آڑو
آڑو کے بارے میں مواد
متعدد ٹیبز ویجٹ میں ٹیب کے ناموں کی نقل بنائیں
کسی ٹیب پر کلک کرنے سے صفحہ کے دیگر تمام ٹیبز ایک ہی نحو میں ایک ہی متن کے ساتھ متاثر ہوتے ہیں۔ مثال کے طور پر، نیچے دیے گئے ویجیٹ میں Apples یا Apricots پر کلک کرنے سے پچھلے حصے میں موجود دوسرے ویجیٹ پر بھی اثر پڑتا ہے کیونکہ یہ دونوں مارک ڈاؤن کے ساتھ بنائے گئے ہیں۔
سیب
سیب کے بارے میں مزید مواد!
خوبانی
خوبانی کے بارے میں مزید مواد بھی!
ٹیبز وجیٹس کو حسب ضرورت بنانا
جب کہ آپ مارک ڈاؤن کے ساتھ ٹیبز ویجیٹ بنا سکتے ہیں، آپ کو حسب ضرورت صفات تفویض کرنے کے لیے HTML نحو استعمال کرنے کی ضرورت ہے۔
ٹیب کے اندر متن کو لپیٹنا
DevSite کی طرف سے سیٹ کردہ ٹیب کے لیے زیادہ سے زیادہ چوڑائی سے متجاوز متن کو تراش کر بیضوی شکلوں کے ساتھ جوڑا جاتا ہے۔ درج ذیل مثال دوسرے ٹیب کے اندر متن کو لپیٹنے کے لیے <devsite-selector> کسٹم عنصر کے اندر two-line-tab کلاس کا استعمال کرتی ہے۔
یہ ایک لمبا لیبل ہے جو لپیٹتا نہیں ہے۔
یہ لیبل کسی اور لائن پر نہیں لپیٹتا ہے۔
یہ لیبل دوسری لائن میں لپیٹتا ہے۔
اس ٹیب کا لیبل دوسری لائن پر لپیٹ جاتا ہے۔
چھوٹے لیبل کے ساتھ ٹیب کے اندر متن کو لپیٹنا
مندرجہ ذیل مثال two-line-tab کو پہلی لائن پر اور tab-label کو دوسری لائن پر سیٹ کرتی ہے <devsite-selector> کسٹم عنصر کے اندر دو لائن والے ٹیب کی دوسری لائن پر چھوٹا لیبل ظاہر کرنے کے لیے۔
تیز رو
اس ٹیب میں سوئفٹ کا لیبل ہے۔
جاوا
اس دو لائن والے ٹیب میں جاوا لیبل کے نیچے ایک چھوٹا اینڈرائیڈ لیبل ہے۔
کوٹلن
اس دو لائن والے ٹیب میں کوٹلن لیبل کے نیچے ایک چھوٹا اینڈرائیڈ لیبل ہے۔
جاوا
اس ٹیب پر جاوا لیبل ہے۔
کسی مخصوص ٹیب سے براہ راست لنک کرنا
درج ذیل مثال <devsite-selector> کسٹم عنصر کے اندر id کی وضاحت کرکے ایک مخصوص ٹیب سے براہ راست لنک کرتی ہے اور اسے کھولتی ہے۔
کوبول
یہ ٹیب ڈیفالٹ ہے، لیکن آپ #cobol اینکر استعمال کر سکتے ہیں۔
فورٹران
آپ اپنے لنک پر #fortran اینکر کو شامل کرکے اس ٹیب سے براہ راست لنک کریں گے۔
ہاسکل
یہ ٹیب آپ کے لنک میں #haskell اینکر استعمال کرے گا۔
ایک ہی ٹیب پر کھولے گئے تمام ویجٹ کے ساتھ ایک لنک بنانا
مندرجہ ذیل لنک سوال پیرامیٹر ?tab=Apricots کو اس صفحہ کے URL میں شامل کرتا ہے اور تمام سلیکٹرز پر کھلے Apricots ٹیب کے ساتھ صفحہ لوڈ کرتا ہے۔
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots