Floating Action Button (FAB) একটি জনপ্রিয় উপাদান যা Material Design এর অংশ, এবং এটি সাধারণত প্রধান অ্যাকশন বা ফিচারকে দ্রুত অ্যাক্সেস করার জন্য ব্যবহার করা হয়। Materialize CSS এ FAB তৈরি করা খুবই সহজ এবং এটি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে। FAB সাধারণত স্ক্রীনের নিচে থাকে এবং একটি আকর্ষণীয় বৃত্তাকার আকারে প্রদর্শিত হয়, যা একটি আইকন বা চিত্র ধারণ করে।
Floating Action Button (FAB) এর বৈশিষ্ট্য
- Position: FAB সাধারণত স্ক্রীনের নিচে, ডান অথবা বাম পাশে থাকে এবং এটি fixed position এ স্থির থাকে।
- Style: FAB সাধারাণত বৃত্তাকার আকারের হয় এবং এতে একটি আইকন থাকে, যা গুরুত্বপূর্ণ অ্যাকশনের প্রতিনিধিত্ব করে (যেমন: যোগ করা, পাঠানো ইত্যাদি)।
- Animation: FAB এ আপনি hover effects এবং transitions ব্যবহার করতে পারেন, যাতে এটি আরো ইন্টারঅ্যাকটিভ হয়।
Materialize এ Floating Action Button (FAB) তৈরি করা
Materialize CSS এ FAB তৈরি করার জন্য, আপনাকে btn-floating এবং waves-effect ক্লাস ব্যবহার করতে হবে। এছাড়া, FAB এর মধ্যে একটি আইকন যোগ করতে হলে, Material Icons ব্যবহার করা হয়।
উদাহরণ: একটি সাধারণ FAB তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Action Button Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- Material Icons Link -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Floating Action Button -->
<a href="#" class="btn-floating btn-large red">
<i class="material-icons">add</i>
</a>
<!-- Materialize JS Link -->
<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>
কোড ব্যাখ্যা:
btn-floating: এই ক্লাসটি FAB কে বৃত্তাকার আকারে তৈরি করে।btn-large: এই ক্লাসটি FAB এর আকার বড় করে।red: FAB এর রঙ লাল করে।material-icons: এখানে Material Icons ব্যবহার করা হয়েছে। এখানেaddআইকন ব্যবহার করা হয়েছে, যা একটি প্লাস সাইন দেখায়।waves-effect: এই ক্লাসটি FAB এ ওয়েভ প্রভাব যোগ করে, যাতে FAB এর উপর ক্লিক করার সময় একটি সুন্দর এনিমেশন দেখা যায়।
FAB এর অবস্থান কাস্টমাইজ করা
FAB এর অবস্থান পরিবর্তন করার জন্য আপনি CSS এর মাধ্যমে position এবং margin সেট করতে পারেন।
উদাহরণ: FAB স্ক্রীনের নিচে ডানদিকে স্থাপন
<style>
.fab-position {
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
<a href="#" class="btn-floating btn-large red fab-position">
<i class="material-icons">add</i>
</a>
এখানে:
- position: fixed;: FAB কে স্ক্রীনের নির্দিষ্ট জায়গায় স্থির করে দেয়।
- bottom: 20px; এবং right: 20px;: FAB কে স্ক্রীনের নিচের ডানদিকে ২০ পিক্সেল দূরে অবস্থান করায়।
FAB এর সঙ্গে Multiple Actions তৈরি করা
Materialize CSS এর মাধ্যমে আপনি একাধিক FAB তৈরি করতে পারেন, যেখানে FAB গুলি একে অপরের উপরে বা নিচে অবস্থান করবে এবং ক্লিক করার পর নতুন অ্যাকশন প্রদর্শিত হবে।
উদাহরণ: Multiple Floating Action Buttons
<a href="#" class="btn-floating btn-large red">
<i class="material-icons">add</i>
</a>
<!-- FAB for additional actions -->
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large red">
<i class="material-icons">menu</i>
</a>
<ul>
<li><a href="#" class="btn-floating yellow"><i class="material-icons">edit</i></a></li>
<li><a href="#" class="btn-floating green"><i class="material-icons">share</i></a></li>
<li><a href="#" class="btn-floating blue"><i class="material-icons">delete</i></a></li>
</ul>
</div>
এখানে, একটি horizontal FAB তৈরি করা হয়েছে, যেখানে বিভিন্ন অ্যাকশন (যেমন: edit, share, delete) দেখানো হয়েছে। FAB ক্লিক করার পর এটি একটি ছোট মেনু হিসেবে প্রদর্শিত হবে।
FAB এর সাথে Animation ব্যবহার করা
FAB এর উপর ক্লিক করলে এনিমেশন যোগ করতে, আপনি Materialize CSS এর floating action button animation ব্যবহার করতে পারেন। এর জন্য আপনাকে floating-action-btn এবং open ক্লাস ব্যবহার করতে হবে, যা FAB এর সাথে ইন্টারঅ্যাকটিভ ট্রানজিশন তৈরি করবে।
Floating Action Button (FAB) ব্যবহার করার মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করতে পারেন। Materialize CSS FAB তৈরি করার প্রক্রিয়া খুবই সহজ এবং এর মাধ্যমে আপনি গুরুত্বপূর্ণ অ্যাকশনগুলো সহজে উপস্থাপন করতে পারবেন।
Read more
