Foundation ফ্রেমওয়ার্কে Button Groups এবং Split Buttons দুটি গুরুত্বপূর্ণ UI কম্পোনেন্ট, যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনে বাটন ব্যবহারকে আরও কার্যকর এবং ইন্টারেক্টিভ করে তোলে। এই কম্পোনেন্টগুলো ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং সঠিক কার্যক্রমের জন্য স্পষ্ট অপশন প্রদান করতে সাহায্য করে।
Button Groups (বাটন গ্রুপ)
Button Groups হল একাধিক বাটনকে একটি গ্রুপে সাজানোর একটি পদ্ধতি, যা সাধারণত সমজাতীয় অ্যাকশন বা অপশন প্রদর্শনের জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি একাধিক বাটনকে একটি সারিতে রাখে ব্যবহারকারীদের জন্য সহজ এবং পরিষ্কার অপশন প্রদান করতে পারেন।
বৈশিষ্ট্য:
- বাটনগুলোকে একটি সারিতে সাজানো হয়।
- একাধিক বাটনের মধ্যে পারস্পরিক সম্পর্ক থাকে।
- সাধারণত একাধিক ঐতিহাসিক বা সিমিলার কার্যক্রমের জন্য ব্যবহার হয়।
বাটন গ্রুপের উদাহরণ:
<div class="button-group">
<a href="#" class="button">বাটন ১</a>
<a href="#" class="button">বাটন ২</a>
<a href="#" class="button">বাটন ৩</a>
</div>
এখানে, button-group ক্লাসটি বাটনগুলিকে একটি গ্রুপে সাজানোর জন্য ব্যবহার করা হয়েছে। এই গ্রুপটি একই লাইন বা সারিতে প্রদর্শিত হবে এবং ব্যবহারকারীরা সেগুলির মধ্যে নির্বাচন করতে পারবেন।
কাস্টমাইজেশন:
Vertical Button Group (ভারটিকাল বাটন গ্রুপ): যদি বাটনগুলোকে উল্লম্বভাবে (vertically) সাজাতে চান, তাহলে
button-group verticalক্লাস ব্যবহার করতে পারেন:<div class="button-group vertical"> <a href="#" class="button">বাটন ১</a> <a href="#" class="button">বাটন ২</a> <a href="#" class="button">বাটন ৩</a> </div>Active Button: গ্রুপের মধ্যে একটি বাটন সক্রিয় বা নির্বাচিত হতে পারে:
<div class="button-group"> <a href="#" class="button active">বাটন ১</a> <a href="#" class="button">বাটন ২</a> <a href="#" class="button">বাটন ৩</a> </div>
Split Buttons (স্প্লিট বাটন)
Split Buttons হল এমন বাটন, যা দুটি অংশে বিভক্ত থাকে: একটি মূল বাটন এবং একটি ড্রপডাউন বাটন। মূল বাটনটি সাধারণত কোনো একক কার্যক্রম চালায়, এবং ড্রপডাউন বাটনটি অতিরিক্ত অপশন বা কার্যক্রম প্রদর্শন করে। এটি বিশেষত যখন একটি বাটনে একাধিক অপশন প্রয়োজন হয়, তখন কার্যকর।
বৈশিষ্ট্য:
- একটি বাটন দুটি অংশে বিভক্ত থাকে—মুল বাটন এবং ড্রপডাউন।
- ড্রপডাউন বাটনটি অতিরিক্ত অপশন বা কার্যক্রম দেখায়।
- সহজে কাস্টমাইজ করা যায়।
স্প্লিট বাটনের উদাহরণ:
<div class="button-group">
<a href="#" class="button">মূল বাটন</a>
<a href="#" class="button dropdown">ড্রপডাউন</a>
</div>
এখানে:
button-groupক্লাসটি বাটন গ্রুপ তৈরি করবে।dropdownক্লাসটি ড্রপডাউন বাটনটি নির্ধারণ করবে, যা অতিরিক্ত অপশন প্রদান করবে।
স্প্লিট বাটন কাস্টমাইজেশন:
ড্রপডাউন তালিকা (Dropdown List): আপনি একটি ড্রপডাউন তালিকা তৈরি করতে পারেন, যা ব্যবহারকারীকে আরও অপশন নির্বাচন করতে সহায়তা করবে।
উদাহরণ:
<div class="button-group"> <button class="button">মূল বাটন</button> <button class="button dropdown">ড্রপডাউন</button> <ul class="menu"> <li><a href="#">অপশন ১</a></li> <li><a href="#">অপশন ২</a></li> <li><a href="#">অপশন ৩</a></li> </ul> </div>
বাটন গ্রুপ এবং স্প্লিট বাটন কাস্টমাইজেশন
১. বাটনের আকার কাস্টমাইজ করুন:
Foundation বাটনের আকার কাস্টমাইজ করতে বিভিন্ন ক্লাস সাপোর্ট করে, যেমন:
tiny,small,large,expanded– বাটনের আকার পরিবর্তন করতে ব্যবহার হয়।উদাহরণ:
<div class="button-group"> <a href="#" class="button small">ছোট বাটন</a> <a href="#" class="button large">বড় বাটন</a> </div>
২. বাটনের রঙ কাস্টমাইজ করুন:
Foundation-এ বিভিন্ন রঙের বাটন ব্যবহার করা যায়, যেমন:
primary,secondary,alert,success– বিভিন্ন রঙের বাটন।উদাহরণ:
<div class="button-group"> <a href="#" class="button primary">প্রাথমিক বাটন</a> <a href="#" class="button success">সফল বাটন</a> </div>
৩. ড্রপডাউন অ্যাকশন যুক্ত করুন:
ড্রপডাউন বাটনটি ড্রপডাউন মেনু বা অতিরিক্ত অপশন প্রদর্শন করতে পারে। Foundation এর ড্রপডাউন মেনু সহজেই কনফিগার করা যায়।
Button Groups এবং Split Buttons হল Foundation ফ্রেমওয়ার্কের দুটি গুরুত্বপূর্ণ UI কম্পোনেন্ট, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে। Button Groups একাধিক বাটনকে একটি গ্রুপে সাজানোর জন্য ব্যবহৃত হয়, এবং Split Buttons দুটি অংশে বিভক্ত বাটন প্রদান করে, যার একটি অংশে মূল কার্যক্রম এবং অন্য অংশে অতিরিক্ত অপশন থাকে। Foundation এর এই কম্পোনেন্টগুলো ওয়েবসাইটে বা অ্যাপে সহজ এবং কার্যকর বাটন ইন্টারফেস তৈরি করতে সাহায্য করে।
Read more
