দ্য ট্যাব ক্ষেত্র প্যানেল ট্যাবে একটি উইজেটের নিয়ন্ত্রণ সংগঠিত করে, একই কাঠামো এলিমেন্টরের নিজস্ব উইজেটগুলি সাধারণ এবং হোভার স্টেট স্টাইলিংয়ের জন্য ব্যবহার করে। মাস্টার অ্যাডঅনগুলির ভিতরে উইজেট নির্মাতা, আপনি ট্যাবগুলিকে সংজ্ঞায়িত করেন, প্রতিটিতে চাইল্ড কন্ট্রোল রাখুন এবং এলিমেন্টর প্যানেল সেগুলিকে ক্ষেত্রগুলির একটি দীর্ঘ স্ক্রলের পরিবর্তে একটি কমপ্যাক্ট ট্যাব স্ট্রিপ হিসাবে রেন্ডার করে৷।
ট্যাব নিয়ন্ত্রণ সমর্থন করে শর্তাবলী প্রতিটি ক্ষেত্রের মত, এবং তার শিশুদের মাধ্যমে পড়া হয় টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন একটি তিন অংশ টোকেন সঙ্গে, {{ tabs.tab_1.field }}, কোন লুপ প্রয়োজন। উভয় গাইডই বিশদ বিবরণ এবং সীমাবদ্ধতা কভার করে।
ট্যাব একটি কাঠামোগত ক্ষেত্র। এটির নিজস্ব কোন মূল্য নেই; মানগুলি শিশুদের অন্তর্গত, এবং আপনার টেমপ্লেট প্রতিটিকে একটি নেস্টেড পাথের মাধ্যমে পড়ে যা ট্যাব ক্ষেত্র, ট্যাব এবং এর ভিতরের ক্ষেত্রটির নাম দেয়৷ কোন লুপ, কোন কৌশল, শুধু ঠিকানা।
ট্যাব ক্ষেত্র কি করে #
- একটি ট্যাব স্ট্রিপ রেন্ডার করে উইজেটের প্যানেলে, এলিমেন্টরের কন্ট্রোল ট্যাব মেকানিজমের উপর নির্মিত।
- ট্যাবের একটি সেট ধরে রাখে, প্রত্যেকের নিজস্ব নাম, লেবেল এবং শিশু নিয়ন্ত্রণের তালিকা রয়েছে।
- সংশ্লিষ্ট রাজ্যগুলিকে একসাথে রাখে, ক্লাসিক পেয়ারিং একই সেটিংসের সাধারণ এবং হোভার সংস্করণ।
- নেস্টেড পাথের মাধ্যমে শিশুর মূল্যবোধ প্রকাশ করে আপনার টেমপ্লেটে: ট্যাব ক্ষেত্রের নাম, তারপর ট্যাব, তারপর ক্ষেত্র।
- ট্যাব জুড়ে একই শিশুর নাম অনুমোদন করে, তাই নরমাল এবং হোভার একে অপরকে পরিষ্কারভাবে মিরর করতে পারে।
আপনি যদি নির্মাতার সাথে শুরু করছেন তবে পড়ুন উইজেট নির্মাতা ওভারভিউ এই এক আগে।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি ট্যাব ক্ষেত্র সহ একটি বোতাম উইজেট
statesএকটি সাধারণ ট্যাব এবং একটি হোভার ট্যাব ধারণ করা, প্রতিটির নাম একটি রঙের ক্ষেত্র সহbg.
কিভাবে একটি ট্যাব ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার এডিটরে, বাম দিকে ফিল্ড প্যানেলটি স্ক্রোল করুন যতক্ষণ না আপনি এটি খুঁজে পান ট্যাব ক্ষেত্র, অন্যান্য কাঠামোগত ক্ষেত্র যেমন পপওভার টগল এবং রিপিটারের সাথে তালিকাভুক্ত।
এর অধীনে একটি বিভাগে এটি টেনে আনুন শৈলী ট্যাব, যেখানে স্টেট স্টাইলিং বাস করে, তারপর ট্যাবগুলিকে সংজ্ঞায়িত করুন এবং প্রতিটিতে চাইল্ড কন্ট্রোল ড্রপ করুন৷ ফিল্ডের বিকল্পগুলি ল্যান্ড করার সাথে সাথে বাম দিকে খোলে৷।
ট্যাব ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে ট্যাব স্ট্রিপের উপরে দেখানো শিরোনাম।
- নাম: সম্পূর্ণ ট্যাব গ্রুপ, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী, উদাহরণস্বরূপ
states। এটি প্রতিটি শিশুর টেমপ্লেট পথের প্রথম অংশ। - ট্যাব: ট্যাবের তালিকা। প্রতিটি ট্যাব একটি নাম বহন করে (উদাহরণস্বরূপ টেমপ্লেট পাথে ব্যবহৃত হয়
normal), একটি লেবেল (স্ট্রিপে দেখানো হয়েছে, উদাহরণস্বরূপ “Normal”), এবং এর নিজস্ব শিশু নিয়ন্ত্রণের সেট। - শিশু নিয়ন্ত্রণ: প্রতিটি ট্যাবের ভিতরে ক্ষেত্র। মান ক্ষেত্রের ধরন এখানে কাজ করে, এবং প্রতিটি তার নিজস্ব বিকল্প এবং মান আকৃতি রাখে।
- বর্ণনা, শো লেবেল, বিভাজক, এবং শর্তাবলী অন্য সব জায়গার মতো একই প্রদর্শন বিকল্প।
নেস্টেড পাথের মাধ্যমে ট্যাবের মান পড়ুন #
একটি ট্যাব ক্ষেত্রের শিশুদের একটি তিন-অংশের ডট পাথ দিয়ে সম্বোধন করা হয়: ট্যাব ক্ষেত্রের নাম, ট্যাবের নাম, তারপর শিশু ক্ষেত্রের নাম।
{{ tabsname.tabname.fieldname }}ট্যাবগুলির উপর কোন লুপিং নেই। প্রতিটি মান ঠিক যেখানে আপনার প্রয়োজন সেখানে পড়া হয়। বোতাম উদাহরণের জন্য, ক states সাধারন এবং হোভার ট্যাব সহ ট্যাব ক্ষেত্র, প্রতিটিতে একটি ধারণ করে bg রঙের ক্ষেত্র, সিএসএস প্যানেলে তারগুলি এভাবে:
.ma-btn {
background: {{ states.normal.bg }};
}
.ma-btn:hover {
background: {{ states.hover.bg }};
}উভয় ট্যাবে শিশুর একই নামকরণ ইচ্ছাকৃত এবং সমর্থিত। অভ্যন্তরীণভাবে নির্মাতা একটি কাউন্টার দিয়ে ডুপ্লিকেট কীগুলি কেটে দেয়, কিন্তু টেমপ্লেট পাথ প্রতি ট্যাবে থাকে, তাই bg স্বাভাবিক এবং bg হোভারে দুটি স্বতন্ত্র, পরিষ্কারভাবে সম্বোধন করা মান থাকে। মিরর করা নামগুলি লক্ষ্য করার জন্য প্যাটার্ন: যে কেউ টেমপ্লেটটি পড়ে সে দেখে যে সাধারণ এবং হোভার নিয়মগুলি শুধুমাত্র একটি পাথ সেগমেন্ট দ্বারা পৃথক।
সতর্ক থাকুন: ফ্ল্যাট টোকেন {{ bg }} কিছুই সমাধান করে না, এবং তাই দুই অংশ করে {{ normal.bg }}। পাথ সবসময় ট্যাব ক্ষেত্রের নিজের নাম দিয়ে শুরু হয়। যখন একটি ট্যাবের মান খালি প্রিন্ট করে, প্রথমে সেগমেন্টগুলি গণনা করুন। একটি ট্যাবের নাম পরিবর্তন করা একই নীরব উপায়ে পাথ ভেঙে দেয়; CSS কম্পাইল করতে থাকে, মানটি আসা বন্ধ করে দেয়, তাই আপনি নিয়ম লেখার আগে ট্যাবের নাম স্থির করুন।
এলিমেন্টরে ট্যাব নিয়ন্ত্রণ ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন (অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন)। ট্যাব স্ট্রিপ আপনার ট্যাব লেবেল সহ প্যানেলে রেন্ডার করে এবং একটি ট্যাবে ক্লিক করলে তার শিশু নিয়ন্ত্রণগুলি প্রকাশ পায়৷।
একজন সম্পাদক প্রথম ট্যাবে সাধারণ পটভূমি সেট করে, হোভারে স্যুইচ করে এবং দ্বিতীয় রঙ সেট করে। প্রিভিউতে বোতামটি ঘোরানো অবিলম্বে রূপান্তর দেখায়, যেহেতু উভয় মান ইতিমধ্যেই উইজেটের CSS নিয়মে বসে আছে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- সাধারণ এবং হোভার স্টাইলিং বোতাম, কার্ড এবং লিঙ্কের জন্য, ক্লাসিক পেয়ারিং।
- সক্রিয় এবং নিষ্ক্রিয় অবস্থা টগল, ফিল্টার এবং নেভি আইটেমগুলির জন্য।
- সেটিংসের আগে এবং পরে তুলনা বা উইজেট প্রকাশ।
- হালকা এবং অন্ধকার বৈকল্পিক, সম্পাদকদের একটি বিভাগ থেকে উভয় স্কিম টিউন করতে দেওয়া।
- বিজোড় এবং এমনকি সারি স্টাইলিং তালিকা এবং টেবিল উইজেটে।
ট্যাব ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- সম্পূর্ণ তিন-অংশের পথ সহ ঠিকানার মান।
{{ states.hover.bg }}কাজ করে;{{ bg }}এবং{{ hover.bg }}করবেন না। - ট্যাব জুড়ে মিরর শিশুর নাম। একই ক্ষেত্র, একই নাম, একটি ভিন্ন পাথ সেগমেন্ট; টেমপ্লেটটি পাঠযোগ্য থাকে এবং ট্যাবগুলি তুলনাযোগ্য থাকে।
- ট্যাবের নাম ছোট এবং ছোট হাতের রাখুন। তারা টেমপ্লেট শনাক্তকারী, তাই
normalএবংhover"ট্যাব 1" এবং "ট্যাব 2" বীট করুন। - রাজ্যের জন্য ট্যাব ব্যবহার করুন, বিষয়গুলির জন্য বিভাগগুলি। একই সেটিংসের দুটি রূপ ট্যাবে রয়েছে; সম্পর্কহীন সেটিংস পৃথক বিভাগে অন্তর্গত।
- মনে রাখবেন প্রতিটি শিশু তার প্রকারের মান আকৃতি রাখে। একটি ট্যাবের ভিতরে একটি স্লাইডার এখনও হিসাবে পড়া
{{ states.normal.gap.size }}{{ states.normal.gap.unit }}.
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে ট্যাব ক্ষেত্র কী?
এটি একটি কাঠামোগত ক্ষেত্র যা একটি উইজেটের নিয়ন্ত্রণগুলিকে প্যানেল ট্যাবে বিভক্ত করে, যা এলিমেন্টরের নিয়ন্ত্রণ ট্যাব প্রক্রিয়ার উপর নির্মিত। প্রতিটি ট্যাবের নিজস্ব চাইল্ড কন্ট্রোল থাকে এবং টেমপ্লেট প্রতিটি শিশুকে নেস্টেড পাথের মাধ্যমে পড়ে: {{ tabsname.tabname.fieldname }}.
আমি কিভাবে একটি নির্দিষ্ট ট্যাব থেকে একটি মান পড়তে পারি?
সম্পূর্ণ ডট পাথ ব্যবহার করুন: ট্যাব ক্ষেত্রের নাম, ট্যাবের নাম, তারপর সন্তানের নাম। ক states একটি হোভার ট্যাব ধারণকারী ক্ষেত্র bg, যে {{ states.hover.bg }}. সংক্ষিপ্ত পথ কিছুই সমাধান করে না।
আমি কি আমার টেমপ্লেটের ট্যাবগুলির উপর লুপ করতে পারি?
না, এবং আপনার প্রয়োজন নেই। ট্যাবগুলি একটি তালিকা রাখার পরিবর্তে নিয়ন্ত্রণগুলি সংগঠিত করে, তাই প্রতিটি মান সরাসরি সম্বোধন করা হয় যেখানে মার্কআপ বা CSS এটি ব্যবহার করে, একটি রিপিটারের বিপরীতে যেখানে একটি লুপ প্রিন্ট সারি।
দুটি ট্যাবে কি একই নামের ক্ষেত্র থাকতে পারে?
হ্যাঁ, এবং এটি প্রস্তাবিত প্যাটার্ন। অভ্যন্তরীণ কীগুলি স্বয়ংক্রিয়ভাবে কেটে নেওয়া হয়, যখন টেমপ্লেট পাথ প্রতি-ট্যাবে থাকে, তাই {{ states.normal.bg }} এবং {{ states.hover.bg }} অভিন্ন নামযুক্ত ক্ষেত্র থেকে পৃথক মান।
আমি কিভাবে স্বাভাবিক স্বাভাবিক এবং হোভার স্টাইলিং তৈরি করব?
নামে দুটি ট্যাব তৈরি করুন normal এবং hover মিলিত শিশু ক্ষেত্রগুলির সাথে, তারপর CSS প্যানেলে উভয় নিয়ম লিখুন: বেস নির্বাচক সাধারণ মানগুলি পড়ে এবং :hover নির্বাচক হোভার মান পড়ে।
কেন আমার ট্যাব ক্ষেত্রের টোকেন কিছুই মুদ্রণ করে না?
হয় পথটি অসম্পূর্ণ বা একটি অংশের বানান ভুল। ট্যাব ক্ষেত্রের নিজেই কোন মান নেই, তাই টোকেনটিকে অবশ্যই তিনটি অংশের নাম দিতে হবে, ট্যাবের নাম ব্যবহার করে তার লেবেলের পরিবর্তে।
মোড়ানো #
উইজেট বিল্ডার ট্যাব ক্ষেত্রটি স্টেট স্টাইলিংকে একটি পরিপাটি প্যানেল প্যাটার্নে পরিণত করে: সংজ্ঞায়িত করুন normal এবং hover একবার, শিশুর নাম মিরর করুন, এবং আপনার CSS পড়ে {{ states.normal.bg }} বিরুদ্ধে {{ states.hover.bg }} আর কিছু পরিবর্তন না করে। পেয়ার করা অবস্থার পরিবর্তে বিষয়বস্তু পুনরাবৃত্তি করার জন্য, রিপিটার ক্ষেত্র স্ট্রাকচারাল ভাইবোন কি জন্য পৌঁছাতে হবে। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
