Bulma CSS ফ্রেমওয়ার্কে Button Group এবং Addons ব্যবহার করে আপনি বাটনগুলোর মধ্যে গ্রুপিং এবং কাস্টমাইজড অ্যাডঅন যোগ করতে পারেন। এগুলি সাধারণত ফর্ম, টুলবার, অথবা বাটন সেন্টারাইজেশন বা অর্ডারিংয়ের জন্য ব্যবহার করা হয়।
১. Button Group
Button Group হচ্ছে একাধিক বাটনকে একসাথে গ্রুপ করে একটি ইউনিট হিসেবে প্রদর্শন করার একটি উপায়। Bulma ফ্রেমওয়ার্কে, এটি খুব সহজেই buttons ক্লাস ব্যবহার করে করা যায়।
Button Group তৈরি করার জন্য ক্লাস:
- buttons: বাটনগুলোর একটি গ্রুপ তৈরি করে।
- is-grouped: বাটনগুলিকে একে অপরের সাথে গ্রুপ করে দেয়।
- is-grouped-multiline: একাধিক লাইনে বাটনগুলো গ্রুপ করে দেয় (যদি পর্যাপ্ত জায়গা না থাকে)।
উদাহরণ:
<div class="buttons is-grouped">
<button class="button is-primary">Button 1</button>
<button class="button is-link">Button 2</button>
<button class="button is-info">Button 3</button>
</div>
এখানে তিনটি বাটন একটি গ্রুপে র্যাপ করা হয়েছে is-grouped ক্লাসের মাধ্যমে। এই বাটনগুলো একসাথে দেখাবে, তবে একে অপরের মধ্যে ব্যবধান থাকবে না।
২. Button Addons
Button Addons আপনাকে বাটনের সাথে কিছু অতিরিক্ত উপাদান যেমন ইনপুট ফিল্ড, ড্রপডাউন বা অন্য যেকোনো আইটেম যুক্ত করার সুযোগ দেয়। সাধারণত, ফর্মের ইনপুটের সাথে বাটন ব্যবহার করার জন্য addons ব্যবহৃত হয়। এতে বাটন এবং ইনপুট ফিল্ড একসাথে দেখানো হয়।
Button Addon তৈরি করার জন্য ক্লাস:
- control: ইনপুট বা বাটনকে একই লাইনে সাজানোর জন্য।
- has-addons: বাটন এবং ইনপুট অ্যাডঅন তৈরি করতে ব্যবহৃত হয়।
উদাহরণ:
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter something">
</div>
<div class="control">
<button class="button is-info">Submit</button>
</div>
</div>
এখানে একটি input ফিল্ড এবং একটি button একই লাইনে has-addons এবং control ক্লাস দিয়ে গ্রুপ করা হয়েছে। এতে ইনপুট ফিল্ড এবং বাটন একই রকমভাবে একে অপরের পাশে দেখাবে।
আরও একটি উদাহরণ: Dropdown সহ Button Addon
<div class="field has-addons">
<div class="control">
<div class="select">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="control">
<button class="button is-info">Go</button>
</div>
</div>
এখানে একটি select dropdown এবং একটি button একটি গ্রুপে রাখা হয়েছে, যাতে ব্যবহারকারী একটি অপশন নির্বাচন করার পর Go বাটনটি চাপতে পারে।
৩. Button Addons - Multiple Buttons with Inputs
একাধিক বাটন এবং ইনপুট ফিল্ড একত্রে প্রদর্শন করতে has-addons এবং control ক্লাস ব্যবহার করা যেতে পারে। এটা সাধারণত ফর্মের জন্য উপকারী যেখানে একটি অ্যাকশন বাটন একাধিক ইনপুটের সাথে কাজ করে।
উদাহরণ:
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Search...">
</div>
<div class="control">
<button class="button is-warning">Search</button>
</div>
<div class="control">
<button class="button is-danger">Clear</button>
</div>
</div>
এখানে একটি Search ইনপুট ফিল্ড এবং দুটি বাটন, Search এবং Clear একসাথে গ্রুপ করা হয়েছে। এইভাবে, বাটন এবং ইনপুট ফিল্ডগুলোর মধ্যে একটি সুসংগত ডিজাইন তৈরি করা সম্ভব।
৪. Button Group with Addons
যখন আপনাকে বাটন গ্রুপের মধ্যে Addons ব্যবহার করতে হয়, তখন আপনি buttons, is-grouped, এবং has-addons ক্লাসগুলো একসাথে ব্যবহার করতে পারেন। এই কম্বিনেশনটি খুবই শক্তিশালী এবং ব্যবহারযোগ্য যখন একটি ফর্মের মধ্যে একাধিক বাটন এবং ইনপুট যুক্ত করতে হয়।
উদাহরণ:
<div class="buttons has-addons is-grouped">
<div class="control">
<input class="input" type="text" placeholder="Type here">
</div>
<div class="control">
<button class="button is-link">Button 1</button>
</div>
<div class="control">
<button class="button is-success">Button 2</button>
</div>
</div>
এখানে ইনপুট ফিল্ডের সাথে দুটি বাটন গ্রুপ করা হয়েছে। ইনপুট এবং বাটনগুলো একসাথে একটি গ্রুপে থাকছে এবং ব্যবহারকারী সহজেই একটি নির্দিষ্ট অ্যাকশন করতে পারবে।
সারাংশ
Bulma ফ্রেমওয়ার্কে Button Group এবং Button Addons খুবই কার্যকর উপায় যখন আপনি একাধিক বাটন বা ইনপুট ফিল্ডকে একত্রে গ্রুপ করতে চান। Button Group ক্লাসের মাধ্যমে একাধিক বাটনকে সুন্দরভাবে একত্রে প্রদর্শন করা যায় এবং Button Addons ব্যবহার করে আপনি বাটনের সাথে ইনপুট বা অন্যান্য উপাদান যোগ করতে পারেন। এটি ফর্ম ও ইউজার ইন্টারফেস ডিজাইনকে আরও সহজ এবং পরিষ্কার করে তোলে।
Read more
