Material Design Lite (MDL) একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL অনেক ধরনের UI কম্পোনেন্ট প্রদান করে, যার মধ্যে Raised Buttons, Floating Action Button (FAB), এবং Icon Buttons অন্যতম। এই উপাদানগুলো ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে, এবং তাদের সাহায্যে সোজাসুজি এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরি করা যায়।
এগুলো MDL-এ বিভিন্ন স্টাইলের বাটন কম্পোনেন্ট হিসেবে ব্যবহৃত হয়, যা আপনার ওয়েব পেজ বা অ্যাপ্লিকেশনের কার্যকারিতা এবং ন্যাচারাল অ্যানিমেশন আরও আকর্ষণীয় করে তোলে।
Raised Buttons
Raised Buttons হল MDL-এ সবচেয়ে সাধারণ ধরনের বাটন। এগুলো একটি লাইট শ্যাডো সহ উঁচু (raised) অবস্থানে থাকে এবং ব্যবহারকারীর চোখে ভালোভাবে পড়ে। সাধারণ বাটনের চেয়ে Raised Buttons এর মাধ্যমে ব্যবহারকারীরা গুরুত্বপূর্ণ এবং প্রাধান্যযুক্ত কর্মগুলো সহজে চিনতে পারেন।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
এখানে:
- mdl-button: বাটনের সাধারণ ক্লাস।
- mdl-js-button: MDL এর JavaScript ফাংশনালিটি সক্রিয় করার জন্য ক্লাস।
- mdl-button--raised: Raised (উঁচু) বাটনের স্টাইল।
- mdl-button--colored: বাটনটিকে রঙিন করা হয়েছে, যাতে এটি আরও আকর্ষণীয় দেখায়।
Raised Buttons এর সুবিধা:
- ভিজ্যুয়াল পার্থক্য: এটি অন্যান্য উপাদান থেকে আলাদা হয়ে উঠে, ফলে ব্যবহারকারী সহজে গুরুত্ব বুঝতে পারে।
- নির্দিষ্ট কর্মের জন্য প্রাধান্য: গুরুত্বপূর্ণ কাজগুলো বা বিকল্পগুলো বেশি দৃশ্যমান হয়।
Floating Action Button (FAB)
Floating Action Button (FAB) হল একটি সোনালী বা আকর্ষণীয় আইকন বাটন যা পৃষ্ঠার নিচে বা উপরের কোণে অবস্থান করে এবং একটি বিশেষ কার্যকলাপ নির্দেশ করে। FAB সাধারণত মোবাইল অ্যাপ্লিকেশনগুলোতে ব্যবহৃত হয়, তবে এটি ওয়েব অ্যাপ্লিকেশনে ব্যবহার করা যায়। FAB কে সাধারণত একটি "অ্যাকশন" বোতাম হিসেবে দেখানো হয়, যা ব্যবহারকারীদের কাজের সাথে সম্পর্কিত থাকে।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
এখানে:
- mdl-button: বাটনের সাধারণ ক্লাস।
- mdl-js-button: MDL এর JavaScript ফাংশনালিটি সক্রিয় করার জন্য ক্লাস।
- mdl-button--fab: FAB স্টাইলের জন্য ক্লাস।
- mdl-button--colored: বাটনটিকে রঙিন করা হয়েছে।
- material-icons: আইকন ব্যবহারের জন্য Google Material Icons ফন্ট।
FAB এর সুবিধা:
- এ্যাকশন কেন্দ্রিক: FAB খুব সহজে ব্যবহারকারীর নজর কাড়ে এবং এটিকে খুব দ্রুত অ্যাক্সেস করা যায়।
- স্মুথ অ্যানিমেশন: FAB-এর মধ্যে আকর্ষণীয় অ্যানিমেশন ব্যবহার করা হয়, যা ইউজার এক্সপেরিয়েন্স উন্নত করে।
Icon Buttons
Icon Buttons হল বাটন যা সাধারণত একটি আইকন দিয়ে সজ্জিত থাকে। এটি সাধারণত ছোট এবং সিম্পল হয়, এবং মাউস ক্লিকের মাধ্যমে নির্দিষ্ট কার্যকলাপ সম্পাদন করে। MDL-এ আইকন বাটন গুগল ম্যাটেরিয়াল ডিজাইন আইকন ব্যবহার করে ডিজাইন করা যায়।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">home</i>
</button>
এখানে:
- mdl-button: বাটনের সাধারণ ক্লাস।
- mdl-js-button: MDL এর JavaScript ফাংশনালিটি সক্রিয় করার জন্য ক্লাস।
- mdl-button--icon: আইকন বাটনের জন্য ক্লাস।
- material-icons: আইকন ফন্ট থেকে আইকন ব্যবহার করা হয়েছে (এখানে "home" আইকনটি ব্যবহার করা হয়েছে)।
Icon Buttons এর সুবিধা:
- স্পেস সাশ্রয়ী: আইকন বাটনগুলো ছোট হওয়ায় সেগুলো ছোট জায়গায়ও ব্যবহার করা যায়।
- সরলতা: এটি ওয়েবসাইটের ডিজাইনকে আরও সিম্পল এবং ক্লিন রাখে।
- ইন্টারঅ্যাকটিভ: আইকন বাটনগুলো সাধারণত খুবই ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য দ্রুত কার্যকরী।
সারাংশ
Material Design Lite (MDL) বিভিন্ন ধরনের বাটন কম্পোনেন্ট সরবরাহ করে, যার মধ্যে Raised Buttons, Floating Action Buttons (FAB), এবং Icon Buttons গুরুত্বপূর্ণ ভূমিকা পালন করে।
- Raised Buttons ব্যবহারকারীকে গুরুত্বপূর্ণ কাজের প্রতি দৃষ্টি আকর্ষণ করতে সহায়তা করে।
- Floating Action Button (FAB) মোবাইল অ্যাপ্লিকেশন এবং ওয়েব অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ অ্যাকশন বোতাম হিসেবে ব্যবহৃত হয়।
- Icon Buttons ছোট, সিম্পল এবং ইন্টারঅ্যাকটিভ হওয়ায় তারা ওয়েব পেজের ডিজাইনকে আরো ক্লিন এবং স্পেস সাশ্রয়ী করে তোলে।
MDL-এর এই বাটনগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে সুন্দর এবং কার্যকরী ডিজাইন তৈরি করতে পারবেন।
Read more
