Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google Material Design এর নীতির উপর ভিত্তি করে তৈরি। এতে ব্যবহৃত JavaScript কম্পোনেন্টগুলো ইন্টারঅ্যাকটিভ ওয়েবসাইট তৈরি করতে সহায়তা করে। Materialize CSS-এ বেশ কিছু JavaScript প্লাগইন রয়েছে যেগুলোকে customize বা কাস্টমাইজ করা যায়। এই প্লাগইনগুলো বিভিন্ন ইউজার ইন্টারফেস উপাদান যেমন, মেনু, স্লাইডার, মডাল, টেবিল ইত্যাদি নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
এখানে, আমরা দেখব Materialize JavaScript কাস্টমাইজেশন কিভাবে করা যায় এবং কীভাবে আপনার প্রোজেক্টে কাস্টম সেটিংস অ্যাপ্লাই করা যায়।
Materialize JavaScript প্লাগইন কাস্টমাইজেশন
Materialize CSS-এর বেশ কিছু প্লাগইন রয়েছে যেগুলোর JavaScript কাস্টমাইজেশন সহজে করা যায়। এগুলোর মধ্যে সবচেয়ে জনপ্রিয় হলো modals, side navigation, tooltips, sliders, dropdowns, ইত্যাদি। আমরা কিভাবে এসব প্লাগইন কাস্টমাইজ করতে পারি তা বিস্তারিতভাবে দেখব।
১. Modal কাস্টমাইজেশন
Modal হল একটি পপ-আপ ডায়ালগ যা সাধারণত ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য ব্যবহৃত হয়। Materialize CSS-এ modal প্লাগইনটি অনেকটা কাস্টমাইজযোগ্য এবং এর অনেক অপশন রয়েছে।
Modal উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Modal Customization</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Trigger Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>This is a modal dialog box.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
<a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
</div>
</div>
<!-- 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>
<script>
// Initialize Modal with custom options
$(document).ready(function(){
$('.modal').modal({
opacity: 0.5, // Set background opacity
inDuration: 300, // Set the opening transition speed
outDuration: 200, // Set the closing transition speed
startingTop: '10%', // Set the initial position from top
endingTop: '20%' // Set the final position after opening
});
});
</script>
</body>
</html>
Modal কাস্টমাইজেশন অপশন:
- opacity: Modal খুললে ব্যাকগ্রাউন্ডের স্বচ্ছতা (opacity) সেট করে।
- inDuration: Modal খোলার সময় ট্রানজিশন স্পিড সেট করে।
- outDuration: Modal বন্ধ হওয়ার সময় ট্রানজিশন স্পিড সেট করে।
- startingTop: Modal এর শুরু অবস্থান (টপ থেকে কতটা দূরে থাকবে)।
- endingTop: Modal এর শেষ অবস্থান (যখন এটি পুরোপুরি খোলা থাকে)।
২. Side Navigation কাস্টমাইজেশন
Side Navigation বা Sidenav একটি স্লাইডিং মেনু, যা ব্যবহারকারীদের জন্য এক্সট্রা কন্টেন্ট বা অপশন প্রদর্শন করে। Materialize CSS এর Sidenav কে কাস্টমাইজ করা সহজ এবং এটি ডেভেলপারদের জন্য একাধিক কনফিগারেশন অপশন সরবরাহ করে।
Side Navigation উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation Customization</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Side Navigation Trigger -->
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<!-- Side Navigation Structure -->
<ul id="slide-out" class="sidenav">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Services</a></li>
<li><a href="#!">Contact</a></li>
</ul>
<!-- 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>
<script>
// Initialize Side Navigation with custom options
$(document).ready(function(){
$('.sidenav').sidenav({
edge: 'left', // Set the side navigation to open from the left (right is also an option)
draggable: true, // Allow the side navigation to be dragged
inDuration: 300, // Set the opening transition speed
outDuration: 200 // Set the closing transition speed
});
});
</script>
</body>
</html>
Sidenav কাস্টমাইজেশন অপশন:
- edge: এটি সাইড নেভিগেশন কোথা থেকে খুলবে তা নির্ধারণ করে। আপনি
leftবাrightনির্বাচন করতে পারেন। - draggable: সাইড নেভিগেশনটি ড্র্যাগ করে খোলার জন্য সক্ষম।
- inDuration: সাইড নেভিগেশন খোলার সময়ের ট্রানজিশন স্পিড।
- outDuration: সাইড নেভিগেশন বন্ধ হওয়ার সময়ের ট্রানজিশন স্পিড।
৩. Tooltip কাস্টমাইজেশন
Tooltip হল একটি ছোট পপ-আপ বার্তা যা সাধারণত একটি উপাদান বা আইটেমের ওপর মাউস হোভার করলে প্রদর্শিত হয়। Materialize CSS এ টুলটিপ ব্যবহার করা সহজ এবং এটি কাস্টমাইজ করা যেতে পারে।
Tooltip উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Customization</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Tooltip Trigger -->
<a class="waves-effect waves-light btn tooltipped" data-tooltip="I am a tooltip" data-position="bottom">Hover over me</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>
<script>
// Initialize Tooltip with custom options
$(document).ready(function(){
$('.tooltipped').tooltip({
delay: 50, // Set delay before the tooltip appears
position: 'right', // Position the tooltip to the right of the element
html: true // Allow HTML content inside the tooltip
});
});
</script>
</body>
</html>
Tooltip কাস্টমাইজেশন অপশন:
- delay: টুলটিপটি প্রদর্শিত হওয়ার পূর্বে বিলম্ব (মিলিসেকেন্ডে)।
- position: টুলটিপের অবস্থান (যেমন:
top,bottom,left,right)। - html: টুলটিপের কন্টেন্টে HTML ট্যাগ ব্যবহারের অনুমতি দেয়।
উপসংহার
Materialize CSS এ JavaScript কাস্টমাইজেশন খুবই সহজ এবং এর মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের বিভিন্ন ইন্টারঅ্যাকটিভ উপাদান কাস্টমাইজ করতে পারেন। আপনি modal, sidenav, tooltip ইত্যাদি বিভিন্ন কম্পোনেন্টের মাধ্যমে সহজে কাস্টম সেটিংস অ্যাপ্লাই করতে পারেন, যেমন transition speed, position, delay, color, এবং animation পরিবর্তন করা। এগুলো আপনার ওয়েবসাইটের ব্যবহারকারী অভিজ্ঞতা এবং ইন্টারফেসকে আরও স্নিগ্ধ এবং আকর্ষণীয় করে তুলবে।
Read more
