কী টেকঅ্যাওয়ে
- উল্লম্ব ট্যাবগুলি শিরোনামগুলিকে বাম বা ডানদিকে একটি কলামে রাখে, তাদের পাশে প্যানেল থাকে। এগুলি দীর্ঘ শিরোনাম এবং ছয় বা ততোধিক বিভাগের জন্য উপযুক্ত, যেখানে একটি অনুভূমিক ফালা মোড়ানো হবে।
- এলিমেন্টরের নিজস্ব ট্যাব উইজেট শুরু বা শেষ করার দিকনির্দেশ নিয়ন্ত্রণের সাথে এটি করে। কোন CSS প্রয়োজন নেই।
- দ্য মাস্টার অ্যাডঅন ট্যাব উইজেট একটি উল্লম্ব ট্যাব শৈলী প্রিসেট আছে, যা প্লেইন না হয়ে স্টাইল করা হয়।
- প্রায় 768px এর নীচে একটি পাশের কলামের জন্য পর্যাপ্ত প্রস্থ নেই, তাই উভয় রুট স্ট্যাক। শুধুমাত্র মূল উইজেট একটি অ্যাকর্ডিয়নে পরিণত হয়।
- উইজেটগুলি প্যানেলের ভিতরে গেলে কোর বাছাই করুন এবং ট্যাব কলামের নিজেই আইকন বা সমাপ্ত চেহারার প্রয়োজন হলে অ্যাডনটি বেছে নিন।
শিরোনামগুলি দীর্ঘ বা অসংখ্য হয়ে গেলে অনুভূমিক ট্যাবগুলি ভেঙে যায়। একটি 1,200px কলাম জুড়ে ছয়টি শিরোনাম হয় দুটি লাইনে মোড়ানো বা পাঠ্যটি সঙ্কুচিত করুন যতক্ষণ না কেউ সেগুলি না পড়ে।
উল্লম্ব ট্যাবগুলি স্ট্রিপটিকে তার পাশে ঘুরিয়ে দেয়: এটির পাশে সক্রিয় প্যানেল সহ শিরোনামের একটি সরু কলাম৷ প্রতিটি শিরোনাম একটি সম্পূর্ণ লাইন পায়, তাই "শিপিং এবং রিটার্নস" মোড়ানো ছাড়াই ফিট করে। এটি নির্মাণের উভয় উপায় অনুসরণ করে।
বিষয়বস্তুর সারণী
যখন উল্লম্ব অনুভূমিক বীট
উল্লম্ব হল ভাল বিন্যাস যখন এইগুলির যে কোনও একটি সত্য হয়:
- পাঁচটিরও বেশি বিভাগ, যেখানে একটি স্ট্রিপ মোড়ানো কিন্তু একটি কলাম কেবল লম্বা হয়।
- শিরোনাম দুটি শব্দের চেয়ে দীর্ঘ। "ওয়ারেন্টি এবং মেরামত" একটি সম্পূর্ণ লাইন প্রয়োজন।
- খুব ভিন্ন উচ্চতার প্যানেল, যেহেতু প্যানেলের আকার পরিবর্তন করার সময় শিরোনাম কলামটি রাখা থাকে।
- একটি মেনুর মতো পড়া বিষয়বস্তু: ডকুমেন্টেশন বিভাগ, পরিষেবা তালিকা, গোষ্ঠীবদ্ধ প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী।
তিন বা চারটি ছোট শিরোনামের জন্য অনুভূমিক থাকুন। একটি পাশের কলাম প্রস্থের প্রায় এক চতুর্থাংশ খায় এবং তিনটি ট্যাবের সাথে যে ট্রেড করা মূল্যবান নয়।
পদ্ধতি 1: এলিমেন্টরের দিকনির্দেশ নিয়ন্ত্রণ
এলিমেন্টরের ট্যাব উইজেট অ্যাডন ছাড়াই এটি পরিচালনা করে।
- পৃষ্ঠায় ট্যাব উইজেট টেনে আনুন।
- লেআউটে, বাম দিকের শিরোনামগুলির জন্য শুরুর দিকনির্দেশ সেট করুন বা ডানদিকে শিরোনামের জন্য শেষ করুন৷।
- শিরোনাম পাঠ্যটি কলামের ভিতরে বাম, কেন্দ্র বা ডানদিকে বসে কিনা তা নিয়ন্ত্রণ করতে শিরোনাম সারিবদ্ধ করুন সেট করুন।
- যথারীতি প্রতিটি প্যানেল তার পাত্রের ভিতরে তৈরি করুন।
স্টার্ট বাম-থেকে-ডান ভাষায় কলামটি বাম দিকে রাখে এবং ডান-থেকে-বামে স্বয়ংক্রিয়ভাবে ফ্লিপ করে, এই কারণেই মানগুলিকে বাম এবং ডানের পরিবর্তে স্টার্ট এবং এন্ড নাম দেওয়া হয়।
ফলাফলটি কার্যকরী এবং স্টাইলবিহীন: একটি কলামে পাঠ্য শিরোনাম, তাদের পাশের প্যানেল এবং স্টাইল ট্যাবের জন্য প্রতিটি সীমানা এবং রঙ বাকি।
পদ্ধতি 2: উল্লম্ব ট্যাব প্রিসেট
মাস্টার অ্যাডনস উইজেট লেআউটটিকে দিকনির্দেশের পরিবর্তে একটি প্রিসেট হিসাবে বিবেচনা করে, তাই স্টাইলিং এটির সাথে আসে।
- ট্যাব উইজেট টেনে আনুন।
- উল্লম্ব ট্যাবে শৈলী প্রিসেট সেট করুন।
- প্রতি বিভাগে একটি রিপিটার আইটেম যোগ করুন, প্রতিটি ট্যাব শিরোনাম সহ।
- আইকন টাইপ আইকন বা ইমেজে সেট করুন যদি শিরোনামগুলির একটির প্রয়োজন হয়, তারপর আইকনটি বেছে নিন।
- প্যানেলের বিষয়বস্তু লিখুন, এবং প্রথমে যে ট্যাবটি খুলতে হবে তাতে ডিফল্ট হিসাবে সেট করুন।
কলামটি তার নিজস্ব পটভূমি, ব্যবধান এবং সক্রিয় অবস্থা সহ আসে, তাই একটি ব্যবহারযোগ্য ব্লক একটি স্টাইলিং সেশনের পরিবর্তে এক মিনিট সময় নেয়। অ্যাডন-এ সবসময় যে সীমা থাকে তা একই: প্যানেলে সম্পাদকের বিষয়বস্তু থাকে, তাই ট্যাবের ভিতরে একটি ফর্ম বা গ্যালারি মানে প্রো-তে একটি সংরক্ষিত টেমপ্লেট বা এর পরিবর্তে মূল উইজেট।
একটি শান্ত বৈকল্পিক: বাম সক্রিয় সীমানা
তৃতীয় প্রিসেট সম্পর্কে জানার যোগ্য। বাম সক্রিয় সীমানা উল্লম্ব কলাম রাখে কিন্তু বাক্সযুক্ত চেহারা ফেলে দেয়: শিরোনামগুলি পৃষ্ঠার পটভূমিতে বসে এবং সক্রিয়টি তার বাম প্রান্তে একটি রঙিন বার দিয়ে চিহ্নিত করা হয়।
ডকুমেন্টেশন-স্টাইলের পৃষ্ঠাগুলিতে এটিই পৌঁছানো যায়, যেখানে একটি ভারী ট্যাব কলাম মনোযোগের জন্য বডি টেক্সটের সাথে লড়াই করে।
ফোনে কি হয়
একটি 390px স্ক্রিনে একটি পাশের কলাম এবং একটি প্যানেলের জন্য কোন জায়গা নেই, তাই উভয় রুটই উল্লম্ব বিন্যাস পরিত্যাগ করে।
মূল উইজেটটি আপনার অতিরিক্ত সেটিংসে বেছে নেওয়া ব্রেকপয়েন্টের নীচে একটি উল্লম্ব অ্যাকর্ডিয়নে স্ট্যাক করে, প্রতিটি শিরোনাম সরাসরি তার নিজস্ব প্যানেলের উপরে বসে থাকে। অ্যাডন উইজেট শিরোনামগুলিকে নীচের প্যানেল সহ একটি পূর্ণ-প্রস্থ কলামে স্ট্যাক করে, যা কাজ করে, যদিও এটি অ্যাকর্ডিয়ন নয়: খোলা প্যানেলটি শিরোনামের পুরো তালিকার নীচে থাকে।
যেভাবেই হোক, প্রকাশের আগে ফোনের ভিউ চেক করুন। ডেস্কটপে আপনি যে লেআউটটি ডিজাইন করেছেন সেটি ফোন ভিজিটর যে লেআউটটি দেখেন তা নয়।
কোন পদ্ধতি ব্যবহার করতে হবে
| পরিস্থিতি | পদ্ধতি |
|---|---|
| প্যানেলের ভিতরে ফর্ম, গ্যালারী বা মূল্য সারণী | কোর ট্যাব, দিকনির্দেশ শুরু হতে সেট করা হয়েছে |
| ফোনে অ্যাকর্ডিয়ন হওয়া দরকার | মূল ট্যাব |
| বাম দিকের পরিবর্তে ডানদিকে শিরোনাম | কোর ট্যাব, দিক শেষ হতে সেট |
| শিরোনামে আইকন বা ছবি | অ্যাডন, উল্লম্ব ট্যাব প্রিসেট |
| স্টাইল ট্যাব কাজ ছাড়া স্টাইল করা কলাম | অ্যাডন, উল্লম্ব ট্যাব প্রিসেট |
| প্লেইন ডকুমেন্টেশন-স্টাইল সাইড নেভি | অ্যাডন, বাম সক্রিয় বর্ডার প্রিসেট |
| প্যানেল হোভার চালু করে | অ্যাডন, ট্যাব ইফেক্ট হোভারে সেট করা হয়েছে |
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
এলিমেন্টর কি অ্যাডন ছাড়াই উল্লম্ব ট্যাব তৈরি করতে পারে?
হ্যাঁ। ট্যাব উইজেটের দিকনির্দেশ নিয়ন্ত্রণকে শুরু বা শেষ করতে সেট করুন এবং শিরোনামগুলি একটি পাশের কলামে চলে যায়।
কেন দিকনির্দেশের মানগুলিকে শুরু এবং শেষ বলা হয়, বাম এবং ডান নয়?
তাই লেআউটটি ডান-থেকে-বাম ভাষায় সঠিকভাবে ফ্লিপ করে। টেক্সট যে দিকে শুরু হয় সেদিকেই স্টার্ট।
একটি উল্লম্ব বিন্যাসে কতগুলি ট্যাব কাজ করে?
ছয় থেকে দশ আরামদায়ক। এর পরে কলামটি পাশের প্যানেলের চেয়ে লম্বা হয়, যা অদ্ভুত দেখায়।
উল্লম্ব ট্যাবগুলি কি মোবাইলে উল্লম্ব থাকে?
না। পর্যাপ্ত প্রস্থ নেই, তাই উভয় রুট স্ট্যাক। মূল উইজেট একটি অ্যাকর্ডিয়ন হয়ে যায়; অ্যাডন প্যানেলের উপরে শিরোনাম স্ট্যাক করে।
আমি কি একটি উল্লম্ব ট্যাবের ভিতরে একটি ফর্ম রাখতে পারি?
মূল উইজেটের সাথে, হ্যাঁ, কারণ প্রতিটি প্যানেল একটি ধারক। অ্যাডনের সাথে, সমতুল্য একটি সংরক্ষিত টেমপ্লেটে বিষয়বস্তুর ধরন নির্দেশ করছে, যা একটি প্রো বিকল্প।
চূড়ান্ত চিন্তা
শিরোনাম সংক্ষিপ্ত না করে আপনি কীভাবে প্রস্থের সমস্যা সমাধান করেন তা উল্লম্বভাবে যাচ্ছে। এলিমেন্টরের দিকনির্দেশ নিয়ন্ত্রণ কোন অ্যাডন ছাড়াই এটি করে এবং প্যানেলে কন্টেইনার রাখে, যা গুরুত্বপূর্ণ যদি কিছু ইন্টারেক্টিভ ভিতরে যায়। অ্যাডন প্রিসেটগুলি গুরুত্বপূর্ণ যখন শিরোনাম কলামটি আপনি স্টাইল না করেই শেষ দেখতে হবে। উভয়ই তৈরি করতে প্রায় একই সময় নেয়, তাই প্যানেলে কী থাকে তা সিদ্ধান্ত নেয়।
সম্পর্কিত পড়া
