দ্য Select2 ক্ষেত্র প্লেইন সিলেক্টের বড় ভাইবোন কি: একটি ড্রপডাউন যা আপনি টাইপ করতে পারেন, একটি ঐচ্ছিক একাধিক মোড সহ যা ব্যবহারকারীকে একবারে একাধিক বিকল্প বেছে নিতে দেয়। মাস্টার অ্যাডঅনগুলির ভিতরে উইজেট নির্মাতা, এটি একটি নেটিভ ড্রপডাউন খারাপভাবে পরিচালনা করে এমন কেসগুলিকে কভার করে৷ দীর্ঘ বিকল্প তালিকা যা অনুসন্ধান প্রয়োজন। ট্যাগ-স্টাইল বাছাই যেখানে একটি উত্তর যথেষ্ট নয়।
নিয়মিত নির্বাচনের মতো, Select2 বিকল্পের মানগুলি সরাসরি প্লাগ ইন করুন শর্তাবলী অন্যান্য নিয়ন্ত্রণ দেখানো বা লুকানোর জন্য, এবং মধ্যে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন জন্য {% if %} আপনার মার্কআপ চেক। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।
একক-নির্বাচন মোড ঠিক মত আচরণ করে ক্ষেত্র নির্বাচন করুন: আপনার টেমপ্লেট একটি কী পায়। মাল্টিপল ফ্লিপ করুন এবং মানটি কীগুলির একটি অ্যারেতে পরিণত হয়, যা আপনার টেমপ্লেটটিকে কীভাবে পড়তে হবে তা পরিবর্তন করে। সেই সুইচটি এই ডকের হৃদয়।
Select2 ক্ষেত্র কি করে #
- একটি অনুসন্ধানযোগ্য ড্রপডাউন রেন্ডার করে এলিমেন্টর প্যানেলে; বিকল্প তালিকা ফিল্টার করার জন্য ব্যবহারকারীর ধরন।
- একটি চাবি ধরে একক মোডে আপনার সংজ্ঞায়িত বিকল্পগুলি থেকে, প্লেইন নির্বাচনের মতো একই চুক্তি।
- কীগুলির একটি অ্যারে ধরে রাখে যখন একাধিক বিকল্প চালু থাকে, নিয়ন্ত্রণে অপসারণযোগ্য ট্যাগ হিসাবে দেখানো হয়।
- একটি টোকেন বা একটি লুপের মাধ্যমে টেমপ্লেট ফিড করে, সেই মোডের উপর নির্ভর করে।
- কী এবং লেবেল জোড়া ব্যবহার করে আপনি সংজ্ঞায়িত করুন, তাই টেমপ্লেট সবসময় স্থিতিশীল স্লাগের সাথে কাজ করে।
আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি পোর্টফোলিও কার্ড উইজেট যেখানে সম্পাদকরা প্রতিটি উদাহরণকে এক বা একাধিক বিভাগ দিয়ে ট্যাগ করে: ব্র্যান্ডিং, ওয়েব, প্রিন্ট, মোশন।
কিভাবে একটি Select2 ক্ষেত্র যোগ করবেন #
আবিষ্কার করা নির্বাচন 2 উইজেট বিল্ডার সম্পাদকের বাম দিকে ক্ষেত্র প্যানেলে। এটি অন্যান্য পছন্দের ক্ষেত্রগুলির সাথে বসে।
এর অধীনে একটি বিভাগে এটি টেনে আনুন বিষয়বস্তু ট্যাব। একবার এটি অবতরণ করলে, ক্ষেত্রের বিকল্পগুলি বাম দিকে খোলে এবং প্রথম সিদ্ধান্ত হল এই নিয়ন্ত্রণটি একটি মান বা একাধিক বাছাই করে কিনা। আপনি টেমপ্লেট স্পর্শ করার আগে এটি নিষ্পত্তি করুন, কারণ দুটি মোড ভিন্ন মার্কআপ চায়।
Select2 ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে নিয়ন্ত্রণের পাশে দেখানো পাঠ্য, উদাহরণস্বরূপ “ategories”।
- নাম: ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী, উদাহরণস্বরূপ
selected_tags. - বিকল্প: কী এবং লেবেল জোড়া হিসাবে পছন্দ। কী হল স্লাগ যা আপনার টেমপ্লেট দেখে (
branding,web); লেবেল হল ড্রপডাউনের শব্দ। - একাধিক: মোড সুইচ। বন্ধ, ব্যবহারকারী একটি বিকল্প বাছাই করে। চালু, নিয়ন্ত্রণ বেশ কয়েকটি বাছাই গ্রহণ করে এবং মানটি কীগুলির একটি অ্যারেতে পরিণত হয়।
- ডিফল্ট: উইজেটটি প্রথম পৃষ্ঠায় ড্রপ হলে কী বা কীগুলি নির্বাচন করা হয়।
- বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে সেটিংস, এবং ফিল্ড দেখানোর জন্য শর্তগুলি আরও নিচে শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।
আপনার টেমপ্লেটে Select2 সংযুক্ত করুন #
একক মোডে, এটিকে একটি নির্বাচনের মতো ব্যবহার করুন। টোকেন নির্বাচিত কী প্রিন্ট করে, তাই সংশোধক ক্লাস এবং তুলনা যথারীতি কাজ করে:
<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}একাধিক মোডে, মান হল একটি কী অ্যারে, এবং একটি সমতল {{ selected_tags }} দরকারী কিছুই প্রিন্ট করে না। টেমপ্লেট লুপ করতে হবে:
<div class="card-tags">
{% for tag in selected_tags %}
<span class="tag tag--{{ tag }}">{{ tag }}</span>
{% endfor %}
</div>selected_tagsমাঠের নাম।tagআপনি উদ্ভাবিত একটি লুপ পরিবর্তনশীল; এটা কিছু কল।- মধ্যে ব্লক
{% for %}এবং{% endfor %}বাছাই করা কী প্রতি একবার প্রিন্ট করে, যে ক্রমে সেগুলি বাছাই করা হয়েছিল।
মোড অমিলের জন্য সতর্ক থাকুন। আপনি একাধিক সক্ষম করার পরে একটি বেয়ার টোকেন দিয়ে লেখা একটি টেমপ্লেট "কাজ করছে" রাখে; এটি কেবল একটি খালি স্থান রেন্ডার করে, কোন ত্রুটি নেই, কনসোলে কিছুই নেই। যদি একটি Select2 মান অদৃশ্য হয়ে যায় বলে মনে হয়, মাল্টিপল চালু আছে কিনা তা পরীক্ষা করুন এবং টেমপ্লেটটি এখনও একটি একক কী আশা করে। যে অমিল আরো প্রায়ই কারণ।
Elementor এ Select2 কন্ট্রোল ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। নিয়ন্ত্রণ একটি অনুসন্ধান বাক্সের সাথে একটি ড্রপডাউন হিসাবে রেন্ডার করে। টাইপ করা শুরু করুন এবং আপনি যেতে যেতে তালিকা ফিল্টার করুন।
মাল্টিপল অনের সাথে, প্রতিটি পিক কন্ট্রোলের ভিতরে একটি ছোট ট্যাগ হয়ে যায়, এটির x দিয়ে অপসারণযোগ্য। প্রতিটি যোগ বা অপসারণ লুপটিকে পুনরায় রেন্ডার করে, তাই কার্ডের ব্যাজগুলি রিয়েল টাইমে নিয়ন্ত্রণ ট্র্যাক করে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- বিভাগ এবং ট্যাগ পিকার এটি কার্ড এবং পোর্টফোলিও আইটেমগুলিতে ব্যাজ সারি রেন্ডার করে।
- দীর্ঘ বিকল্প তালিকা যেমন দেশ, শিল্প, বা ফন্ট-পেয়ারিং পছন্দ যেখানে অনুসন্ধান স্ক্রলিং বীট।
- বৈশিষ্ট্য চেকলিস্ট যেখানে প্রতিটি বাছাই করা কী একটি মূল্য কলামে একটি লাইন প্রিন্ট করে।
- ফিল্টার-বার উইজেট যার বাছাই করা কীগুলি একটি JS ফিল্টার স্ক্রিপ্টের জন্য ডেটা বৈশিষ্ট্যে পরিণত হয়৷।
- সামাজিক প্রোফাইল নির্বাচক যেখানে প্রতিটি কী একটি আইকনে ম্যাপ করে এবং লুপে লিঙ্ক করে।
Select2 ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- টেমপ্লেট লেখার আগে মোড নির্ধারণ করুন। একক মোড একটি টোকেন চায়, একাধিক মোড একটি লুপ চায়; তারা বিনিময়যোগ্য নয়।
- একটি একাধিক মান সরাসরি মুদ্রণ করবেন না।
{{ selected_tags }}একটি অ্যারেতে দরকারী কিছুই পাওয়া যায় না; কেবল{% for %}লুপ কীগুলিতে পৌঁছায়। - কী স্লাগ থাকে, লেবেল শব্দ থাকে। লুপ কীগুলি প্রিন্ট করে, তাই যদি ব্যাজ পাঠ্যটি মানব-বান্ধব হওয়া উচিত, হয় কীগুলিকে উপস্থাপনযোগ্য করুন বা তাদের সাথে ম্যাপ করুন৷
{% if %}লুপের ভিতরে ব্লক। - একটি খালি মাল্টি-সিলেক্ট লুপ শূন্য বার। মোড়ক ডিভ এখনও রেন্ডার করে, তাই এটি মোড়ানো
{% if selected_tags %}যখন একটি খালি পিক পিছনে কোন মার্কআপ ছেড়ে দেওয়া উচিত। - সংক্ষিপ্ত তালিকার জন্য প্লেইন সিলেক্ট ব্যবহার করুন। তিন বা চারটি স্থির রূপের অনুসন্ধানের প্রয়োজন নেই; Select2 দীর্ঘ তালিকা এবং মাল্টি-পিকগুলিতে তার স্থান অর্জন করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে সিলেক্ট 2 ক্ষেত্রটি কী?
Select2 ক্ষেত্রটি একটি ঐচ্ছিক একাধিক মোড সহ একটি কাস্টম এলিমেন্টর উইজেটে একটি অনুসন্ধানযোগ্য ড্রপডাউন যোগ করে৷ একক মোডে আপনার টেমপ্লেট একটি বিকল্প কী পায়, যেমন একটি প্লেইন সিলেক্ট। একাধিক মোডে এটি কীগুলির একটি অ্যারে পায়, যা আপনি একটি দিয়ে মুদ্রণ করেন {% for %} লুপ।
আমি কিভাবে একাধিক নির্বাচিত মান প্রদর্শন করব?
ক্ষেত্র লুপ করুন: {% for tag in selected_tags %}<span>{{ tag }}</span>{% endfor %}কোথায় selected_tags ক্ষেত্রের নাম। ব্লক প্রতি বাছাই করা কী একবার রেন্ডার করে। একটি সরাসরি {{ selected_tags }} অ্যারেতে কাজ করে না।
কেন আমার Select2 টেমপ্লেটে কিছুই প্রিন্ট করে না?
প্রায় সবসময় কারণ মাল্টিপল চালু থাকে এবং টেমপ্লেট এখনও একটি বেয়ার টোকেন ব্যবহার করে। সরাসরি মুদ্রিত একটি অ্যারে কোন দরকারী আউটপুট উত্পাদন করে না। টেমপ্লেটটি একটিতে স্যুইচ করুন {% for %} লুপ করুন, অথবা মাল্টিপল বন্ধ করুন যদি একটি বাছাই আপনার প্রয়োজন হয়।
টেমপ্লেট কি লেবেল বা কী পায়?
কী। যদি বিকল্প web "ওয়েব ডিজাইন" লেবেল বহন করে, লুপ ভেরিয়েবল ধারণ করে web। তুলনা এবং ক্লাসের নাম অবশ্যই কী ব্যবহার করতে হবে, এবং যেকোনো বন্ধুত্বপূর্ণ ডিসপ্লে টেক্সট কী থেকে বা শর্তসাপেক্ষ ম্যাপিং থেকে আসতে হবে।
সিলেক্টের পরিবর্তে আমার কখন Select2 ব্যবহার করা উচিত?
Select2 ব্যবহার করুন যখন বিকল্প তালিকাটি যথেষ্ট দীর্ঘ হয় যে অনুসন্ধান সাহায্য করে, বা যখন ব্যবহারকারীর একাধিক বিকল্প বেছে নেওয়া উচিত। একটি সংক্ষিপ্ত একক পছন্দ তালিকার জন্য, প্লেইন ক্ষেত্র নির্বাচন করুন একটি সহজ নিয়ন্ত্রণের সাথে একই কাজ করে।
আমি কি বাছাই করা সীমাবদ্ধ বা প্রিসেট করতে পারি?
ডিফল্ট বিকল্পটি প্রাথমিক নির্বাচন প্রিসেট করে, একক মোডে একটি কী। বিকল্প তালিকাটি নিজেই সীমানা: ব্যবহারকারীরা শুধুমাত্র আপনার সংজ্ঞায়িত কীগুলি থেকে বাছাই করতে পারে, তাই সেই তালিকাটি কিউরেট করা হল আপনি কীভাবে আউটপুট অনুমানযোগ্য রাখবেন।
মোড়ানো #
উইজেট বিল্ডার সিলেক্ট 2 ফিল্ড দুটি কাজকে কভার করে যা একজন নেটিভ ড্রপডাউন করতে পারে না: দীর্ঘ তালিকা অনুসন্ধান করা এবং একবারে একাধিক মান বাছাই করা। আপনার মাথায় একক-মোড চুক্তি রাখুন, একটি টোকেনের মাধ্যমে একটি কী, এবং একটিতে স্যুইচ করুন {% for %} একাধিক চলে যাওয়ার মুহূর্তটি লুপ করুন। ড্রপডাউনের পরিবর্তে আইকন-বোতাম পছন্দের জন্য, দেখুন ক্ষেত্র নির্বাচন করুন. বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
