Materialize CSS ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজে Button Groups এবং Disabled Buttons তৈরি করতে পারেন। এগুলো ওয়েব পেজে ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য প্রয়োজনীয় উপাদান। এখানে আমরা Materialize CSS এর মাধ্যমে Button Groups এবং Disabled Buttons কিভাবে ব্যবহার করতে হয়, তা বিস্তারিতভাবে আলোচনা করবো।
Button Groups
Button Groups হলো একাধিক বোতামকে একটি গ্রুপের মধ্যে সাজানোর পদ্ধতি, যেখানে ব্যবহারকারী একাধিক অপশন থেকে নির্বাচন করতে পারে। Materialize CSS এ button groups তৈরি করতে সহজে btn-group ক্লাস ব্যবহার করা হয়।
Materialize এ Button Groups তৈরি
Basic Button Group:
- একাধিক বোতামকে একত্রে সাজাতে
btn-groupক্লাস ব্যবহার করুন।
<div class="btn-group"> <a href="#" class="btn">বটন ১</a> <a href="#" class="btn">বটন ২</a> <a href="#" class="btn">বটন ৩</a> </div>- একাধিক বোতামকে একত্রে সাজাতে
Button Group with Dropdown:
- আপনি যদি বোতাম গ্রুপের মধ্যে ড্রপডাউন অ্যাড করতে চান, তবে
dropdown-buttonক্লাস ব্যবহার করতে পারেন।
<div class="btn-group"> <a href="#" class="btn">বটন ১</a> <a href="#" class="btn">বটন ২</a> <a class="btn dropdown-button" href="#" data-activates="dropdown1">বটন ৩</a> <ul id="dropdown1" class="dropdown-content"> <li><a href="#!">অপশন ১</a></li> <li><a href="#!">অপশন ২</a></li> </ul> </div>- আপনি যদি বোতাম গ্রুপের মধ্যে ড্রপডাউন অ্যাড করতে চান, তবে
উদাহরণ HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Group Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="btn-group">
<a href="#" class="btn">বটন ১</a>
<a href="#" class="btn">বটন ২</a>
<a href="#" class="btn">বটন ৩</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Disabled Buttons
Disabled Buttons হলো এমন বোতাম যা ব্যবহারকারীকে কোনো কাজ করার সুযোগ দেয় না। এটি সাধারণত ইন্টারঅ্যাকশন নিষ্ক্রিয় করার জন্য ব্যবহৃত হয়। Materialize CSS এ disabled buttons তৈরি করতে আপনাকে disabled অ্যাট্রিবিউট ব্যবহার করতে হবে।
Materialize এ Disabled Buttons তৈরি
Simple Disabled Button:
- আপনি একটি সাধারণ ডিসেবলড বোতাম তৈরি করতে
disabledক্লাস ব্যবহার করবেন।
<a href="#" class="btn disabled">ডিসেবলড বটন</a>- আপনি একটি সাধারণ ডিসেবলড বোতাম তৈরি করতে
Disabled Button with Disabled Attribute:
- এছাড়াও আপনি
disabledঅ্যাট্রিবিউট ব্যবহার করে ডিসেবলড বোতাম তৈরি করতে পারেন।
<button class="btn" disabled>ডিসেবলড বটন</button>- এছাড়াও আপনি
উদাহরণ HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<a href="#" class="btn disabled">ডিসেবলড বটন</a>
<button class="btn" disabled>ডিসেবলড বটন</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
উপসংহার
Materialize CSS এর মাধ্যমে আপনি সহজেই Button Groups এবং Disabled Buttons তৈরি করতে পারেন। Button Groups ব্যবহারকারীদের জন্য একাধিক অপশন প্রদানের একটি চমৎকার উপায়, যেখানে বোতামগুলো একসাথে সাজানো হয়। Disabled Buttons ব্যবহৃত হয় যখন আপনি কোনো বোতামকে নিষ্ক্রিয় করতে চান, যাতে ব্যবহারকারীরা সেটি নির্বাচন করতে না পারে। Materialize CSS এই দুটি ফিচার খুব সহজেই অ্যাক্সেসযোগ্য করে দেয়, যা ওয়েব ডিজাইনে ইন্টারঅ্যাকশন এবং ব্যবহারের সুবিধা বৃদ্ধি করে।
Read more
