Material Design Lite (MDL) একটি আধুনিক ওয়েব ডিজাইন ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি। MDL-এর বাটন এবং আইকন ব্যবস্থাপনা খুবই সহজ এবং ব্যবহারকারীকে সুন্দর এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস প্রদান করে। এই টিউটোরিয়ালে, আমরা MDL-এ বাটন এবং আইকন ব্যবস্থাপনা কিভাবে করতে হয় তা দেখব।
MDL বাটন (Button) ব্যবস্থাপনা
MDL-এ বাটন ব্যবহার করা খুবই সহজ এবং এটি ওয়েব পেজে ইন্টারঅ্যাকটিভিটি ও ডিজাইন উন্নত করতে সাহায্য করে। MDL-এ বিভিন্ন ধরনের বাটন ক্লাস রয়েছে, যেগুলো ডিজাইন, সাইজ, কালার এবং ফাংশনালিটি নির্ধারণ করতে ব্যবহৃত হয়।
MDL বাটনের ধরন
MDL-এ প্রধানত তিন ধরনের বাটন ব্যবহৃত হয়:
- Raised Button: এই ধরনের বাটন ডিজাইনে উচ্চতা তৈরি করে এবং এটি ক্লিকযোগ্য হওয়ায় খুবই ইন্টারঅ্যাকটিভ হয়।
- Flat Button: এটি সিম্পল এবং মিনিমাল ডিজাইন হয়, কোন শেড বা উচ্চতা থাকে না।
- Icon Button: এই ধরনের বাটনে শুধুমাত্র আইকন থাকে, টেক্সট থাকে না।
MDL বাটন ব্যবহার
এখন, দেখে নিই MDL-এর বাটন কিভাবে ব্যবহার করা যায়:
১. Raised Button
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
এটি একটি Raised Button তৈরি করবে। mdl-button--raised ক্লাস বাটনকে উঁচু করে এবং mdl-button--colored ক্লাস বাটনটিকে রঙিন করে।
২. Flat Button
<button class="mdl-button mdl-js-button">
Flat Button
</button>
এটি একটি Flat Button তৈরি করবে, যেখানে কোনো শ্যাডো বা উঁচুতা নেই। শুধুমাত্র টেক্সট থাকে।
৩. Icon Button
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">search</i>
</button>
এটি একটি Icon Button তৈরি করবে, যেখানে শুধুমাত্র আইকন থাকে (এখানে search আইকন ব্যবহার করা হয়েছে)। আইকনটি গুগলের Material Icons থেকে আসে।
MDL আইকন (Icon) ব্যবস্থাপনা
MDL-এ আইকন ব্যবহারের জন্য Material Icons প্যাকেজ ব্যবহার করা হয়, যা গুগল কর্তৃক সরবরাহ করা হয়। MDL-এ বিভিন্ন ধরনের আইকন ব্যবহার করা যায় যা ওয়েবসাইটের ডিজাইন ও ইন্টারঅ্যাকশনকে আরও উন্নত করে।
Material Icons যোগ করা
MDL-এ আইকন ব্যবহার করার জন্য আপনাকে প্রথমে Material Icons ফন্ট লিঙ্ক করতে হবে। এটি HTML ফাইলে <link> ট্যাগের মাধ্যমে যোগ করা হয়।
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
এবার, আপনি আইকন ব্যবহার করতে পারেন যেমন:
<i class="material-icons">home</i>
এটি Home আইকন প্রদর্শন করবে। MDL-এ Material Icons ব্যবহার করা খুবই সহজ এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরি করতে সহায়তা করে।
MDL আইকন ক্লাস
MDL-এ আইকনের সাইজ এবং স্টাইল পরিবর্তন করতে কয়েকটি গুরুত্বপূর্ণ ক্লাস রয়েছে:
- mdl-typography--text-center: আইকনটিকে সেন্টার করতে ব্যবহার করা হয়।
- material-icons: এটি মূল আইকন ক্লাস, যা আইকনকে প্রদর্শন করতে ব্যবহৃত হয়।
- large, medium, small: আইকনের সাইজ পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
১. বড় আইকন
<i class="material-icons" style="font-size: 48px;">home</i>
২. ছোট আইকন
<i class="material-icons" style="font-size: 24px;">search</i>
৩. আইকন সহ বাটন
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">favorite</i>
</button>
এটি একটি Icon Button তৈরি করবে, যেখানে শুধুমাত্র favorite আইকন থাকবে।
MDL বাটন এবং আইকন ব্যবস্থাপনার সুবিধা
১. ইন্টারঅ্যাকটিভ ডিজাইন
MDL-এর বাটন এবং আইকন ব্যবস্থাপনা ওয়েবসাইটের ডিজাইনকে খুবই ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে। Raised Button, Flat Button, এবং Icon Button ব্যবহার করে আপনি কাস্টমাইজড ও ফ্লেক্সিবল বাটন তৈরি করতে পারেন।
২. সহজ কাস্টমাইজেশন
MDL বাটন এবং আইকন ব্যবস্থাপনা খুবই সহজ, এবং আপনি কেবল CSS ক্লাস ব্যবহার করে বিভিন্ন ডিজাইন পরিবর্তন করতে পারেন। এটি দ্রুত এবং কার্যকরী ডিজাইন তৈরির জন্য উপযোগী।
৩. গুগল আইকনস লাইব্রেরি
MDL Material Icons লাইব্রেরি ব্যবহার করে সহজেই সুন্দর এবং আধুনিক আইকন যুক্ত করা যায়, যা ডিজাইনে স্টাইলিশ এফেক্ট তৈরি করে।
সারাংশ
Material Design Lite (MDL) ব্যবহার করে বাটন এবং আইকন ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। MDL-এ বিভিন্ন ধরনের বাটন যেমন Raised Button, Flat Button, এবং Icon Button তৈরি করা যায়, যা ডিজাইনকে আরো আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। আইকন ব্যবস্থাপনায় Material Icons ব্যবহার করা হয়, যা ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও সুন্দর এবং প্রফেশনাল করে তোলে। MDL এর মাধ্যমে আপনি সহজেই কাস্টমাইজড বাটন এবং আইকন তৈরি করতে পারবেন যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।
Material Design Lite (MDL) এর অন্যতম গুরুত্বপূর্ণ উপাদান হলো বাটন। MDL বিভিন্ন ধরনের বাটন স্টাইল প্রদান করে, যা গুগলের Material Design নীতির উপর ভিত্তি করে ডিজাইন করা হয়েছে। MDL এর বাটনগুলি অত্যন্ত আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব, যা ওয়েব ডিজাইনকে আরো সুন্দর এবং প্রফেশনাল করে তোলে। এই টিউটোরিয়ালে, আমরা MDL এর বাটন এবং বাটন স্টাইলিং নিয়ে আলোচনা করব।
MDL এর বাটন
MDL এর বাটনগুলি ব্যবহারকারী ইন্টারফেস এর অন্যতম গুরুত্বপূর্ণ অংশ। MDL-এ বাটন ব্যবহারের জন্য কিছু নির্দিষ্ট CSS ক্লাস রয়েছে, যেগুলোর মাধ্যমে আপনি বাটনের আকার, রঙ, এবং স্টাইল কাস্টমাইজ করতে পারবেন। MDL এর বাটনগুলো স্বয়ংক্রিয়ভাবে উচ্চমানের অ্যানিমেশন এবং রেসপন্সিভ ডিজাইন সমর্থন করে।
MDL বাটন কম্পোনেন্টের সাধারণ কাঠামো
MDL এর বাটন ব্যবহার করতে, সাধারণত mdl-button, mdl-js-button, এবং বিভিন্ন modifier class ব্যবহার করা হয়। উদাহরণস্বরূপ:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
এখানে:
- mdl-button: বাটন স্টাইল যোগ করতে ব্যবহৃত ক্লাস।
- mdl-js-button: বাটনের কার্যকারিতা প্রয়োগ করতে ব্যবহৃত JavaScript ক্লাস।
- mdl-button--raised: একটি উঁচু (raised) বাটন তৈরি করার জন্য ক্লাস।
- mdl-button--colored: বাটনের রঙকে প্রাধান্য দেওয়ার জন্য ক্লাস।
MDL এর বাটন স্টাইলিং
MDL বাটনের স্টাইলিং সোজা এবং সহজে কাস্টমাইজযোগ্য। নিচে MDL বাটনগুলোর বিভিন্ন স্টাইলিং অপশন দেওয়া হয়েছে:
১. Raised Button
Raised Button হল এমন একটি বাটন যা অন্যান্য উপাদানগুলির তুলনায় কিছুটা উঁচু দেখায় এবং এটি ব্যবহারকারীকে ক্লিক করার জন্য উৎসাহিত করে। এটি mdl-button--raised ক্লাস ব্যবহার করে তৈরি করা যায়।
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
২. Flat Button
Flat Button সাধারণ বাটন যেটি কোনো শেড বা গভীরতা ছাড়া দেখায়। এটি mdl-button--flat ক্লাস ব্যবহার করে তৈরি করা যায়।
<button class="mdl-button mdl-js-button mdl-button--flat mdl-button--colored">
Flat Button
</button>
৩. Icon Button
Icon Button হল এমন একটি বাটন যার মধ্যে একটি আইকন থাকে। এটি mdl-button--icon ক্লাস ব্যবহার করে তৈরি করা হয় এবং material icons ব্যবহার করা হয়।
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">star</i>
</button>
৪. Fab (Floating Action Button)
Fab (Floating Action Button) হল একটি বিশেষ ধরনের বাটন, যা সাধারণত স্ক্রীনের নিচে থাকে এবং অ্যানিমেশনের মাধ্যমে ইউজারের দৃষ্টি আকর্ষণ করে। এটি mdl-button--fab ক্লাস ব্যবহার করে তৈরি করা হয়।
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
৫. Button with Ripple Effect
MDL বাটনগুলোর একটি জনপ্রিয় বৈশিষ্ট্য হল Ripple Effect, যা ব্যবহারকারী যখন বাটনে ক্লিক করেন, তখন একটি জলরাশি (ripple) এর মতো অ্যানিমেশন দেখা যায়। এই ফিচারটি mdl-js-ripple-effect ক্লাসের মাধ্যমে যোগ করা হয়।
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Button with Ripple Effect
</button>
MDL বাটন স্টাইলিং কাস্টমাইজেশন
MDL-এ বাটন কাস্টমাইজ করা অনেক সহজ। আপনি বাটনের আকার, রঙ, মার্জিন, প্যাডিং ইত্যাদি কাস্টমাইজ করতে পারেন। এছাড়া, MDL এর মাধ্যমে আপনি বাটন আইকন, রঙের স্কিম এবং টেক্সট স্টাইল সহজেই কাস্টমাইজ করতে পারেন।
বাটনের আকার কাস্টমাইজ করা
MDL বাটনের আকার পরিবর্তন করতে, আপনি mdl-button--mini, mdl-button--large, বা mdl-button--fab ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<button class="mdl-button mdl-js-button mdl-button--large mdl-button--colored">
Large Button
</button>
<button class="mdl-button mdl-js-button mdl-button--mini mdl-button--colored">
Mini Button
</button>
বাটনের রঙ কাস্টমাইজ করা
MDL বাটনের রঙ পরিবর্তন করতে আপনি mdl-button--primary, mdl-button--accent, mdl-button--colored ইত্যাদি ক্লাস ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<button class="mdl-button mdl-js-button mdl-button--primary">
Primary Button
</button>
<button class="mdl-button mdl-js-button mdl-button--accent">
Accent Button
</button>
সারাংশ
Material Design Lite (MDL) এর বাটন এবং বাটন স্টাইলিং খুবই সহজ এবং কাস্টমাইজযোগ্য। MDL এর মাধ্যমে আপনি বিভিন্ন ধরনের বাটন তৈরি করতে পারেন, যেমন Raised Button, Flat Button, Icon Button, এবং Floating Action Button (FAB)। এর সাথে আপনি Ripple Effect এবং বাটনের আকার ও রঙ কাস্টমাইজ করে আপনার ডিজাইনকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করতে পারেন। MDL এর বাটন কম্পোনেন্ট ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য অত্যন্ত কার্যকরী।
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-এর এই বাটনগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে সুন্দর এবং কার্যকরী ডিজাইন তৈরি করতে পারবেন।
Material Icons গুগলের একটি আইকন সেট যা Material Design নীতির সঙ্গে মানানসই। MDL (Material Design Lite) ফ্রেমওয়ার্কে Material Icons ব্যবহার করে আপনি আপনার ওয়েব পেজে সহজে আইকন যুক্ত করতে পারবেন, যা ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাক্টিভ করে তোলে।
MDL এর সঙ্গে Material Icons ব্যবহার করার জন্য, আপনাকে প্রথমে কিছু সেটআপ করতে হবে। এখানে Material Icons যোগ করার পুরো প্রক্রিয়া ব্যাখ্যা করা হয়েছে।
MDL এর সাথে Material Icons ব্যবহার করার পদ্ধতি
১. Material Icons এর লিঙ্ক যুক্ত করা
Material Icons ব্যবহার করার জন্য প্রথমেই আপনাকে গুগলের আইকন ফন্ট ফাইলটি আপনার HTML ডকুমেন্টে অন্তর্ভুক্ত করতে হবে। এটি সহজেই Google Fonts থেকে লিঙ্ক করা যেতে পারে।
HTML ফাইলে Material Icons লিঙ্ক করার উদাহরণ:
<head>
<!-- Material Icons Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
এই লিঙ্কটি আপনার <head> ট্যাগের মধ্যে যুক্ত করতে হবে। একবার এটি যুক্ত করার পর, আপনি সহজেই Material Icons ব্যবহার করতে পারবেন।
২. MDL কম্পোনেন্টে Material Icons ব্যবহার করা
Material Icons ব্যবহার করতে হলে, আপনি সেগুলোকে HTML ডকুমেন্টে আইকন ক্লাস হিসেবে ব্যবহার করবেন। আইকনগুলো দেখতে খুবই সহজ এবং গুগল কর্তৃক সরবরাহিত একটি স্ট্যান্ডার্ড ফন্ট হিসেবে ব্যবহৃত হয়।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class="material-icons">home</i> Home
</button>
এখানে, <i class="material-icons">home</i> এই কোডটি home নামের একটি Material Icon প্রদর্শন করবে। এই আইকনটি Home বাটনের পাশে থাকবে। Material Icons এর নামগুলি খুব সোজা, যেমন home, search, add, delete, ইত্যাদি।
৩. Material Icons কাস্টমাইজেশন
Material Icons বিভিন্ন সাইজ এবং রঙে কাস্টমাইজ করা যেতে পারে। MDL এর সাথে এগুলো ব্যবহার করার জন্য আপনি CSS ব্যবহার করে আইকনের আকার, রঙ এবং অবস্থান কাস্টমাইজ করতে পারেন।
উদাহরণ:
<i class="material-icons" style="font-size: 48px; color: red;">star</i>
এখানে, star আইকনটি ৪৮ পিক্সেল আকারে এবং লাল (red) রঙে প্রদর্শিত হবে।
৪. MDL এর বাটনে আইকন ব্যবহার
Material Icons সাধারণত MDL এর কম্পোনেন্টগুলির সঙ্গে ব্যবহৃত হয়, যেমন বাটন, ডায়ালগ, টুলবার ইত্যাদির সাথে। MDL বাটনের মধ্যে আইকন ব্যবহারের উদাহরণ দেখুন:
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">add</i>
</button>
এখানে, add আইকন একটি বাটনের মধ্যে ব্যবহার করা হয়েছে। mdl-button--icon ক্লাসটি বাটনকে একটি ছোট আকারে পরিণত করে, যা আইকনকে সুন্দরভাবে প্রদর্শন করবে।
৫. আইকন টুলটিপের সাথে ব্যবহার
MDL আপনাকে টুলটিপ (tooltip) সমর্থনও প্রদান করে, যা ব্যবহারকারীর জন্য আইকনের উদ্দেশ্য বোঝাতে সহায়তা করে। আপনি Material Icons এর সাথে টুলটিপ ব্যবহার করতে পারেন।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--icon" data-mdl-for="tooltip-1">
<i class="material-icons">info</i>
</button>
<span class="mdl-tooltip" for="tooltip-1">Info Icon</span>
এখানে, info আইকনের উপর মাউস রেখে, ব্যবহারকারী একটি টুলটিপ দেখতে পাবেন, যা আইকনের উদ্দেশ্য ব্যাখ্যা করে।
সারাংশ
MDL (Material Design Lite) এর সাথে Material Icons ব্যবহার করা খুবই সহজ এবং এটি আপনার ওয়েবসাইটের ডিজাইনকে আরো আকর্ষণীয় এবং ইন্টারঅ্যাক্টিভ করে তোলে। Material Icons গুগলের একটি সুন্দর এবং সিম্পল আইকন ফন্ট সেট যা MDL এর সাথেও সহজে ইন্টিগ্রেট করা যায়। আপনি আইকনগুলি বিভিন্ন আকারে, রঙে এবং স্টাইলে কাস্টমাইজ করতে পারেন। MDL এর বাটন, টুলবার, ডায়ালগ ইত্যাদির সাথে আইকন ব্যবহার করে আপনার ওয়েব পেজকে আরো কার্যকরী এবং ব্যবহারকারী বান্ধব বানানো যায়।
Material Design Lite (MDL) একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতিগুলি অনুসরণ করে। MDL আপনাকে Material Icons ব্যবহারের মাধ্যমে ওয়েবসাইটে আইকন যোগ করার সুযোগ দেয়। তবে, আপনি যদি আপনার নিজস্ব Custom Icons বা Icon Fonts যোগ করতে চান, তবে সেগুলি খুব সহজেই MDL-এ ইন্টিগ্রেট করা যায়।
এখানে আমরা আলোচনা করব কিভাবে MDL-এ Custom Icons এবং Icon Fonts যোগ করা যায়।
MDL এ Material Icons যোগ করা
MDL, Material Icons নামক একটি স্ট্যান্ডার্ড আইকন প্যাকেজের সঙ্গে আসে, যা গুগল কর্তৃক তৈরি এবং ওয়েবসাইট ডিজাইনে ব্যবহৃত হয়। MDL-এ Material Icons ব্যবহার করতে খুব সহজ।
ধাপ ১: Material Icons CSS লিঙ্ক করা
MDL-এর সঙ্গে Material Icons ব্যবহারের জন্য আপনাকে Google Fonts এর Material Icons ফন্ট যোগ করতে হবে।
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
এটি আপনার HTML ডকুমেন্টের <head> ট্যাগের মধ্যে যোগ করতে হবে।
ধাপ ২: আইকন ব্যবহার করা
Material Icons ব্যবহার করার জন্য আপনাকে শুধুমাত্র <i> ট্যাগের মধ্যে আইকনের নাম লিখতে হবে। উদাহরণস্বরূপ, একটি "home" আইকন ব্যবহার করা হলে তা এমন হবে:
<i class="material-icons">home</i>
এটি একটি home আইকন প্রদর্শন করবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design Lite Icons</title>
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Material Icon Example -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class="material-icons">home</i> Home
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে, একটি home আইকন বাটনের মধ্যে ব্যবহার করা হয়েছে।
Custom Icons এবং Icon Fonts যোগ করা
আপনি যদি MDL-এ Custom Icons বা আপনার নিজস্ব Icon Fonts ব্যবহার করতে চান, তবে সেগুলি Font Awesome অথবা অন্য কোনো SVG Icon প্যাকেজ ব্যবহার করে যোগ করতে পারেন।
Font Awesome Icons যোগ করা
Font Awesome আইকন ব্যবহার করার জন্য, প্রথমে আপনাকে Font Awesome এর সিএসএস ফাইল লিঙ্ক করতে হবে।
ধাপ ১: Font Awesome CDN লিঙ্ক
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
ধাপ ২: আইকন ব্যবহার করা
Font Awesome আইকন ব্যবহার করার জন্য আপনি <i> ট্যাগ ব্যবহার করবেন এবং প্রয়োজনীয় আইকনের ক্লাস যোগ করবেন।
<i class="fas fa-camera"></i>
এটি একটি camera আইকন প্রদর্শন করবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Custom Icons Example</title>
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Font Awesome Icon Example -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class="fas fa-camera"></i> Camera
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে, Font Awesome আইকনের camera আইকন ব্যবহার করা হয়েছে।
SVG Icons যোগ করা
আপনি যদি নিজস্ব SVG Icons ব্যবহার করতে চান, তাহলে সেগুলি সরাসরি HTML-এ ইনলাইন হিসেবে ব্যবহার করতে পারেন।
উদাহরণ:
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L2 7v10l10 5 10-5V7l-10-5z"></path>
</svg>
এটি একটি Home আইকন প্রদর্শন করবে যা SVG ফর্ম্যাটে রয়েছে।
সারাংশ
Material Design Lite (MDL)-এ Custom Icons এবং Icon Fonts যোগ করা খুবই সহজ। আপনি Material Icons ব্যবহার করতে চাইলে গুগলের Google Fonts CDN লিঙ্ক যোগ করলেই তা সহজেই ওয়েবসাইটে ব্যবহার করা যাবে। এছাড়া, Font Awesome বা SVG Icons যোগ করেও আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইউজার ফ্রেন্ডলি করা যায়। MDL-এর সহজ কাস্টমাইজেশন এবং ইন্টিগ্রেশন সুবিধা আপনাকে দ্রুত এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে সাহায্য করে।
Read more
