ট্যাব উইজেট <devsite-selector> কাস্টম উপাদান ব্যবহার করে ডেটা সংগঠিত করতে যাতে একাধিক উপস্থাপনা রয়েছে, যেমন বিভিন্ন প্রোগ্রামিং ভাষায় কোড উদাহরণ বা বিভিন্ন ফর্ম্যাট (যেমন JSON, YAML, বা XML) দ্বারা উপস্থাপিত ডেটা স্ট্রাকচার।
সাধারণ ব্যবহার
নিম্নলিখিত উদাহরণটি HTML ব্যবহার করে তিনটি ট্যাব বিভাগ রেন্ডার করতে <devsite-selector> কাস্টম উপাদান ব্যবহার করে।
ট্যাব 1 শিরোনাম
ট্যাব 1 বিষয়বস্তু
Lorem ipsum dolor sit amet, consectetur adipiscing elit. নিরবচ্ছিন্নভাবে tortor NEC আদেশ sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
ট্যাব 2 শিরোনাম
ট্যাব 2 বিষয়বস্তু
নিরবচ্ছিন্নভাবে tortor NEC আদেশ 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. নিরবচ্ছিন্নভাবে tortor NEC আদেশ sagittis.
নিম্নলিখিত উদাহরণটি একই তিনটি ট্যাব রেন্ডার করতে মার্কডাউন সিনট্যাক্স ব্যবহার করে।
ট্যাব 1 শিরোনাম
ট্যাব 1 বিষয়বস্তু
Lorem ipsum dolor sit amet, consectetur adipiscing elit. নিরবচ্ছিন্নভাবে tortor NEC আদেশ sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
ট্যাব 2 শিরোনাম
ট্যাব 2 বিষয়বস্তু
নিরবচ্ছিন্নভাবে tortor NEC আদেশ 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. নিরবচ্ছিন্নভাবে tortor NEC আদেশ sagittis.
একটি ওভারফ্লো মেনু সহ ট্যাব উইজেট
নিম্নলিখিত উদাহরণটি <devsite-selector> কাস্টম উপাদান ব্যবহার করে কিন্তু স্ক্রিনে ফিট করার জন্য অনেকগুলি ট্যাব রয়েছে এবং স্বয়ংক্রিয়ভাবে আরও ড্রপ-ডাউন মেনুতে ওভারফ্লো হয়।
আপেল
আপেল সম্পর্কে বিষয়বস্তু
এপ্রিকটস
এপ্রিকট সম্পর্কে বিষয়বস্তু
অ্যাভোকাডোস
avocados সম্পর্কে বিষয়বস্তু
ডুমুর
ডুমুর সম্পর্কে বিষয়বস্তু
আঙ্গুর
আঙ্গুর সম্পর্কে বিষয়বস্তু
কিউই ফল
কিউই ফল সম্পর্কে বিষয়বস্তু
লেবু
লেবু সম্পর্কে বিষয়বস্তু
চুন
চুন সম্পর্কে বিষয়বস্তু
আম
আম সম্পর্কে বিষয়বস্তু
পীচ
পীচ সম্পর্কে বিষয়বস্তু
নিম্নলিখিত উদাহরণটি একই ওভারফ্লো মেনু রেন্ডার করতে মার্কডাউন সিনট্যাক্স ব্যবহার করে।
আপেল
আপেল সম্পর্কে বিষয়বস্তু
এপ্রিকটস
এপ্রিকট সম্পর্কে বিষয়বস্তু
অ্যাভোকাডোস
avocados সম্পর্কে বিষয়বস্তু
ডুমুর
ডুমুর সম্পর্কে বিষয়বস্তু
আঙ্গুর
আঙ্গুর সম্পর্কে বিষয়বস্তু
কিউই ফল
কিউই ফল সম্পর্কে বিষয়বস্তু
লেবু
লেবু সম্পর্কে বিষয়বস্তু
চুন
চুন সম্পর্কে বিষয়বস্তু
আম
আম সম্পর্কে বিষয়বস্তু
পীচ
পীচ সম্পর্কে বিষয়বস্তু
একাধিক ট্যাব উইজেটে ডুপ্লিকেট ট্যাব নাম
একটি ট্যাবে ক্লিক করা একই সিনট্যাক্সে একই পাঠ্য সহ পৃষ্ঠার অন্যান্য সমস্ত ট্যাবকে প্রভাবিত করে। উদাহরণ স্বরূপ, নিচের উইজেটে Apples বা Apricots- এ ক্লিক করা পূর্ববর্তী বিভাগে দ্বিতীয় উইজেটকেও প্রভাবিত করে কারণ উভয়ই মার্কডাউন দিয়ে তৈরি।
আপেল
আপেল সম্পর্কে আরো কন্টেন্ট!
এপ্রিকটস
এপ্রিকট সম্পর্কে আরো কন্টেন্ট, খুব!
ট্যাব উইজেট কাস্টমাইজ করা
আপনি যখন মার্কডাউন দিয়ে ট্যাব উইজেট তৈরি করতে পারেন, তখন কাস্টম বৈশিষ্ট্য বরাদ্দ করতে আপনাকে HTML সিনট্যাক্স ব্যবহার করতে হবে।
একটি ট্যাবের মধ্যে পাঠ্য মোড়ানো
DevSite-এর দ্বারা সেট করা একটি ট্যাবের সর্বোচ্চ প্রস্থের চেয়ে বেশি টেক্সট ক্লিপ করা হয় এবং উপবৃত্তাকারে যুক্ত করা হয়। নিম্নলিখিত উদাহরণটি দ্বিতীয় ট্যাবের মধ্যে পাঠ্য মোড়ানোর জন্য <devsite-selector> কাস্টম উপাদানের মধ্যে two-line-tab শ্রেণী ব্যবহার করে।
এটি একটি দীর্ঘ লেবেল যা মোড়ানো হয় না
এই লেবেলটি অন্য লাইনে মোড়ানো হয় না।
এই লেবেলটি দ্বিতীয় লাইনে মোড়ানো হয়
এই ট্যাবের লেবেলটি দ্বিতীয় লাইনে মোড়ানো হয়।
একটি ছোট লেবেল সহ একটি ট্যাবের মধ্যে পাঠ্য মোড়ানো
নিম্নলিখিত উদাহরণটি প্রথম লাইনে two-line-tab সেট করে এবং একটি দুই-লাইন ট্যাবের দ্বিতীয় লাইনে একটি ছোট লেবেল প্রদর্শন করতে <devsite-selector> কাস্টম উপাদানের মধ্যে দ্বিতীয় লাইনে tab-label সেট করে।
সুইফট
এই ট্যাবে একটি সুইফট লেবেল আছে।
জাভা
এই দুই-লাইন ট্যাবে জাভা লেবেলের নিচে একটি ছোট অ্যান্ড্রয়েড লেবেল রয়েছে।
কোটলিন
এই দুই-লাইন ট্যাবে কোটলিন লেবেলের নীচে একটি ছোট অ্যান্ড্রয়েড লেবেল রয়েছে৷
জাভা
এই ট্যাবে একটি জাভা লেবেল আছে।
একটি নির্দিষ্ট ট্যাবে সরাসরি লিঙ্ক করা
নিচের উদাহরণটি সরাসরি <devsite-selector> কাস্টম উপাদানের মধ্যে id উল্লেখ করে একটি নির্দিষ্ট ট্যাবের সাথে লিঙ্ক করে এবং খোলে।
কোবল
এই ট্যাবটি ডিফল্ট, কিন্তু আপনি #cobol অ্যাঙ্কর ব্যবহার করতে পারেন।
ফোর্টরান
আপনার লিঙ্কে #fortran অ্যাঙ্কর যোগ করে আপনি সরাসরি এই ট্যাবে লিঙ্ক করবেন।
হাসকেল
এই ট্যাবটি আপনার লিঙ্কে #haskell অ্যাঙ্কর ব্যবহার করবে।
একই ট্যাবে খোলা সমস্ত উইজেট সহ একটি লিঙ্ক তৈরি করা
নিম্নলিখিত লিঙ্কটি এই পৃষ্ঠার URL-এ ক্যোয়ারী প্যারামিটার ?tab=Apricots যুক্ত করে এবং সমস্ত নির্বাচকদের উপর খোলা এপ্রিকট ট্যাব সহ পৃষ্ঠাটি লোড করে:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots