Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা HTML এবং CSS এর পাশাপাশি JavaScript কম্পোনেন্ট সমর্থন করে, যা আপনাকে ইন্টারঅ্যাকটিভ এবং ফাংশনাল উপাদান তৈরি করতে সাহায্য করে। JavaScript components-এর মাধ্যমে আপনি modals, tooltips, dropdowns, parallax ইত্যাদি ব্যবহার করে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ করতে পারেন।
এখানে Materialize CSS এর কিছু প্রধান JavaScript components কিভাবে ইন্টিগ্রেট করা যায় তা বিস্তারিতভাবে আলোচনা করা হলো।
Materialize JavaScript Components
Materialize CSS অনেক ধরনের JavaScript components প্রদান করে, যা ওয়েব পেজের ইন্টারঅ্যাকশন উন্নত করতে সহায়ক। প্রতিটি কম্পোনেন্টের জন্য আপনাকে HTML, CSS, এবং JavaScript ব্যবহার করতে হবে। নিচে কিছু সাধারণ কম্পোনেন্ট এবং সেগুলোর ইন্টিগ্রেশন কিভাবে করা যায় তা দেখানো হলো।
১. Modal (Popup Dialog) Integration
Modal হল একটি পপ-আপ উইন্ডো যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য প্রয়োজনীয় তথ্য বা অ্যাকশন প্রদান করে। এটি পেজের উপরে উপস্থাপিত হয় এবং পেজের অন্যান্য অংশকে ব্লক করে। এটি সাধারণত ব্যবহারকারীকে কোনো নির্দিষ্ট সিদ্ধান্ত নিতে সহায়তা করতে ব্যবহৃত হয়, যেমন কনফার্মেশন বা অতিরিক্ত তথ্য।
Modal Integration Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Modal Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Trigger Button for Modal -->
<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 Title</h4>
<p>This is a simple modal. You can add any content here.</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 and jQuery Links -->
<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>
<!-- Initialize Modal -->
<script>
$(document).ready(function(){
$('.modal').modal(); // Initialize the modal component
});
</script>
</body>
</html>
এখানে:
- modal-trigger: এই ক্লাস ব্যবহার করে Modal ডায়ালগ ট্রিগার করা হয়।
- $('.modal').modal();: এটি JavaScript দিয়ে Modal কে ইনিশিয়ালাইজ এবং কার্যকরী করে।
২. Tooltip Integration
Tooltip হল একটি ছোট বার্তা যা ব্যবহারকারী যখন মাউস হোভার করেন তখন প্রদর্শিত হয়। এটি সাধারণত কোন বাটন বা লিঙ্কের উপর অতিরিক্ত তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়।
Tooltip Integration Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Tooltip Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Tooltip Trigger Button -->
<a class="btn tooltipped" data-tooltip="This is a tooltip" href="#">Hover me</a>
<!-- Materialize JS and jQuery Links -->
<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>
<!-- Initialize Tooltip -->
<script>
$(document).ready(function(){
$('.tooltipped').tooltip(); // Initialize the tooltip component
});
</script>
</body>
</html>
এখানে:
- tooltipped: এই ক্লাসের মাধ্যমে Tooltip দেখানো হয়।
- data-tooltip: Tooltip এর কন্টেন্ট এখানে নির্ধারণ করা হয়।
- $('.tooltipped').tooltip();: এটি Tooltip কে ইনিশিয়ালাইজ করতে ব্যবহৃত হয়।
৩. Dropdown Menu Integration
Dropdown Menu হল একটি মেনু যা ক্লিক করার মাধ্যমে প্রদর্শিত হয় এবং ব্যবহারকারীদের বিভিন্ন অপশন বা লিঙ্ক প্রদান করে। এটি ওয়েবসাইটে মেনু বা অপশন সিলেকশনের জন্য একটি জনপ্রিয় উপাদান।
Dropdown Integration Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Dropdown Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Dropdown Trigger -->
<a class="dropdown-trigger btn" href="#" data-target="dropdown1">Dropdown</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Option 1</a></li>
<li><a href="#!">Option 2</a></li>
<li><a href="#!">Option 3</a></li>
</ul>
<!-- Materialize JS and jQuery Links -->
<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>
<!-- Initialize Dropdown -->
<script>
$(document).ready(function(){
$('.dropdown-trigger').dropdown(); // Initialize the dropdown menu
});
</script>
</body>
</html>
এখানে:
- dropdown-trigger: এটি ক্লিক করলে ড্রপডাউন মেনু প্রদর্শিত হবে।
- dropdown-content: ড্রপডাউনের অপশন বা লিঙ্কগুলো এখানে রাখা হয়েছে।
- $('.dropdown-trigger').dropdown();: এটি ড্রপডাউন মেনুকে ইনিশিয়ালাইজ করে।
৪. Parallax Effect Integration
Parallax Effect হলো একটি ভিজ্যুয়াল ইফেক্ট যা সাধারণত ওয়েব পেজের ব্যাকগ্রাউন্ড ইমেজের সঙ্গে ব্যবহৃত হয়। এটি স্ক্রোল করার সাথে সাথে ব্যাকগ্রাউন্ড ইমেজের গতি আলাদা করা হয়, যা সাইটে একটি সুন্দর গভীরতা এবং ইন্টারঅ্যাকটিভ অনুভূতি তৈরি করে।
Parallax Effect Integration Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Parallax Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Parallax Section -->
<div class="parallax-container">
<div class="parallax"><img src="https://via.placeholder.com/1200x600?text=Parallax+Image"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Scroll Down to See the Parallax Effect</h2>
<p class="grey-text text-darken-3 lighten-3">This section will have the parallax background effect.</p>
</div>
</div>
<!-- Materialize JS and jQuery Links -->
<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>
<!-- Initialize Parallax -->
<script>
$(document).ready(function(){
$('.parallax').parallax(); // Initialize the parallax effect
});
</script>
</body>
</html>
এখানে:
- parallax-container: এটি পারাল্যাক্স প্রভাবের জন্য প্রয়োজনীয় কন্টেইনার।
- parallax: এই ক্লাস ব্যাকগ্রাউন্ড ইমেজের সাথে পারাল্যাক্স ইফেক্ট যোগ করে।
- $('.parallax').parallax();: এটি পারাল্যাক্স ইফেক্ট ইনিশিয়ালাইজ করে।
উপসংহার
Materialize CSS এর JavaScript components আপনাকে বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ এবং ফাংশনাল উপাদান ব্যবহার করার সুযোগ দেয়, যেমন modal, tooltip, dropdown, এবং parallax। এই উপাদানগুলি সহজেই HTML, CSS, এবং JavaScript এর মাধ্যমে ইন্টিগ্রেট করা যায়, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইন্টারঅ্যাকশন এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে সহায়ক। Materialize CSS এর মাধ্যমে আপনি সহজে এবং দ্রুত এই কম্পোনেন্টগুলি ব্যবহার করে আকর্ষণীয় এবং প্রফেশনাল ওয়েবসাইট তৈরি করতে পারবেন।
Materialize CSS একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা JavaScript components এর সাহায্যে ইন্টারঅ্যাকটিভ এবং ডাইনামিক ফিচার যোগ করতে সহায়তা করে। Materialize JavaScript components এমন কিছু UI উপাদান যা ব্যবহারকারীর সাথে যোগাযোগের মাধ্যমে পরিবর্তিত হয় এবং সেগুলোর কার্যকারিতা এবং অভিজ্ঞতা উন্নত করে।
এখানে Materialize এর কিছু গুরুত্বপূর্ণ JavaScript components এর ব্যবহার এবং কাস্টমাইজেশন নিয়ে আলোচনা করা হলো।
Materialize JavaScript Components
Materialize CSS এর JavaScript components সাধারণত jQuery এর মাধ্যমে পরিচালিত হয় এবং সেগুলো সহজে ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে সাহায্য করে। নিচে কয়েকটি জনপ্রিয় JavaScript components এর উদাহরণ দেওয়া হলো:
১. Sidenav
Sidenav হলো একটি স্লাইড আউট মেনু যা ওয়েব পেজে সাধারণত বাম বা ডান পাশে থাকে। এটি অনেক অ্যাপ্লিকেশন এবং ওয়েবসাইটে ব্যবহার করা হয়, যেমন নেভিগেশন মেনু।
Sidenav উদাহরণ:
<!-- Sidenav Trigger -->
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<!-- Sidenav Structure -->
<ul id="mobile-demo" 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>
<!-- Initialize Sidenav -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
</script>
এখানে:
- sidenav-trigger ক্লাসটি ব্যবহারকারীকে সাইডনেভ মেনু ট্রিগার করার সুযোগ দেয়।
- M.Sidenav.init() ব্যবহার করে JavaScript এ সাইডনেভ ইনিশিয়ালাইজ করা হয়।
২. Modal
Modal একটি পপ-আপ উইন্ডো যা ওয়েব পেজের উপরের অংশে প্রদর্শিত হয় এবং এটি ব্যবহারকারীকে কোনো নির্দিষ্ট কাজ করতে বা সতর্কতা জানাতে সহায়তা করে।
Modal উদাহরণ:
<!-- 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 Title</h4>
<p>This is a modal window. You can add any content here.</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>
<!-- Initialize Modal -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
</script>
এখানে:
- modal-trigger ক্লাসটি ব্যবহারকারীকে মডাল ট্রিগার করতে সাহায্য করে।
- M.Modal.init() JavaScript ফাংশনটি মডালকে কার্যকরী করে।
৩. Carousel
Carousel একটি স্লাইডার উপাদান যা আপনাকে ইমেজ, কন্টেন্ট বা তথ্য একটি স্লাইডার ফর্মে প্রদর্শন করতে সাহায্য করে।
Carousel উদাহরণ:
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="image1.jpg"></a>
<a class="carousel-item" href="#two!"><img src="image2.jpg"></a>
<a class="carousel-item" href="#three!"><img src="image3.jpg"></a>
</div>
<!-- Initialize Carousel -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {
fullWidth: true, // Optional for full-width carousel
indicators: true // Optional for indicators below the carousel
});
});
</script>
এখানে:
- carousel-item প্রতিটি স্লাইডের জন্য আইটেম নির্ধারণ করে।
- M.Carousel.init() ফাংশনটি স্লাইডারের জন্য JavaScript ইনিশিয়ালাইজেশন।
৪. Tabs
Tabs কম্পোনেন্টটি বিভিন্ন কনটেন্টের মধ্যে নেভিগেশন করার জন্য ব্যবহৃত হয়। এটি সাধারণত ওয়েবসাইটের বিভিন্ন বিভাগের মধ্যে ফাস্ট নেভিগেশনের জন্য ব্যবহার করা হয়।
Tabs উদাহরণ:
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Tab 1</a></li>
<li class="tab col s3"><a href="#test2">Tab 2</a></li>
<li class="tab col s3"><a href="#test3">Tab 3</a></li>
</ul>
</div>
<div id="test1" class="col s12">Content 1</div>
<div id="test2" class="col s12">Content 2</div>
<div id="test3" class="col s12">Content 3</div>
</div>
<!-- Initialize Tabs -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tabs');
var instances = M.Tabs.init(elems);
});
</script>
এখানে:
- tabs ক্লাস ব্যবহার করে ট্যাব নেভিগেশন তৈরি করা হয়েছে।
- M.Tabs.init() ফাংশনটি ট্যাব কম্পোনেন্ট ইনিশিয়ালাইজ করে।
৫. Tooltips
Tooltips হল ছোট ছোট বার্তা যা মাউস হোভার বা ক্লিক করার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের জন্য সহায়তা প্রদানের জন্য ব্যবহৃত হয়।
Tooltip উদাহরণ:
<a class="btn tooltipped" data-tooltip="I am a tooltip">Hover me</a>
<!-- Initialize Tooltip -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems);
});
</script>
এখানে:
- tooltipped ক্লাস এবং data-tooltip অ্যাট্রিবিউট ব্যবহার করে টুলটিপ তৈরি করা হয়।
- M.Tooltip.init() ফাংশনটি টুলটিপ ইনিশিয়ালাইজ করে।
উপসংহার
Materialize CSS এর JavaScript components ওয়েব ডিজাইন এবং ডেভেলপমেন্টকে অনেক সহজ করে তোলে। এগুলি ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে ওয়েব পেজে ইন্টারঅ্যাকটিভিটি যোগ করতে সহায়তা করে। Sidenav, Modal, Carousel, Tabs, এবং Tooltips সহ বিভিন্ন কম্পোনেন্ট Materialize CSS এর মাধ্যমে সহজেই ইনস্টল এবং কাস্টমাইজ করা যায়। Materialize CSS এর JavaScript components দিয়ে আপনি একটি আধুনিক, ফাংশনাল এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট বা অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা বিভিন্ন ধরনের UI উপাদান প্রদান করে, যেমন Modal, Tooltip, এবং Tabs। এগুলোর জন্য আপনি JavaScript এর মাধ্যমে ইন্টারঅ্যাকশন কন্ট্রোল করতে পারেন, যেমন open, close, activate ইত্যাদি। এখানে আমরা দেখব কীভাবে JavaScript এর মাধ্যমে এই উপাদানগুলো কন্ট্রোল করা যায়।
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</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 simple modal example.</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>
<!-- Initialize Modal -->
<script>
$(document).ready(function(){
$('.modal').modal(); // Initialize modal
});
</script>
</body>
</html>
এখানে:
- modal-trigger: এটি modal খোলার জন্য ব্যবহৃত হয়।
- modal: modal এর মূল স্ট্রাকচার।
- modal-close: এটি modal বন্ধ করার জন্য ব্যবহৃত হয়।
২. JavaScript এর মাধ্যমে Modal কন্ট্রোল করা:
<script>
$(document).ready(function(){
// Modal open
$('#openModal').click(function(){
$('#modal1').modal('open');
});
// Modal close
$('#closeModal').click(function(){
$('#modal1').modal('close');
});
});
</script>
এখানে:
- $('#modal1').modal('open'): এটি modal টি খোলার জন্য ব্যবহার করা হয়।
- $('#modal1').modal('close'): এটি modal টি বন্ধ করার জন্য ব্যবহার করা হয়।
Tooltip কন্ট্রোল করা
Tooltip হলো একটি ছোট পপ-আপ যা সাধারণত উপাদানের উপর মাউস হোভার করলে প্রদর্শিত হয়। Materialize CSS-এ tooltip তৈরি এবং কন্ট্রোল করা সহজ।
১. Tooltip তৈরি করা:
<a class="waves-effect waves-light btn tooltipped" data-tooltip="This is a tooltip">Hover 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>
$(document).ready(function(){
$('.tooltipped').tooltip(); // Initialize tooltip
});
</script>
এখানে:
- tooltipped: এটি tooltip সক্রিয় করার জন্য ক্লাস।
- data-tooltip: এটি tooltip এর কনটেন্ট বা বার্তা।
২. JavaScript এর মাধ্যমে Tooltip কন্ট্রোল করা:
<script>
$(document).ready(function(){
// Tooltip open
$('.tooltipped').tooltip('open');
// Tooltip close
$('.tooltipped').tooltip('close');
});
</script>
এখানে:
- $('.tooltipped').tooltip('open'): এটি tooltip কে খোলার জন্য ব্যবহার করা হয়।
- $('.tooltipped').tooltip('close'): এটি tooltip বন্ধ করার জন্য ব্যবহৃত হয়।
Tabs কন্ট্রোল করা
Tabs হল এমন একটি উপাদান যা পৃষ্ঠায় বিভিন্ন সেকশন বা কনটেন্টের মধ্যে সুইচ করার জন্য ব্যবহার করা হয়। Materialize CSS-এ Tabs খুবই জনপ্রিয় এবং এর মাধ্যমে ওয়েবসাইটে কনটেন্ট স্যুইচিং সহজ হয়ে যায়।
১. Tabs তৈরি করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Tabs</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Tabs Structure -->
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Tab 1</a></li>
<li class="tab col s3"><a href="#test2">Tab 2</a></li>
<li class="tab col s3"><a href="#test3">Tab 3</a></li>
<li class="tab col s3"><a href="#test4">Tab 4</a></li>
</ul>
<div id="test1" class="col s12">Content for Tab 1</div>
<div id="test2" class="col s12">Content for Tab 2</div>
<div id="test3" class="col s12">Content for Tab 3</div>
<div id="test4" class="col s12">Content for Tab 4</div>
</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>
$(document).ready(function(){
$('.tabs').tabs(); // Initialize tabs
});
</script>
</body>
</html>
এখানে:
- tabs: এই ক্লাসটি ট্যাবের জন্য প্রয়োজনীয়।
- tab: এই ক্লাসটি প্রতিটি ট্যাবের জন্য ব্যবহৃত হয়।
- href="#test1": এটি ট্যাবের কন্টেন্টের সাথে সম্পর্কিত।
২. JavaScript এর মাধ্যমে Tabs কন্ট্রোল করা:
<script>
$(document).ready(function(){
// Activate Tab
$('.tabs').tabs('select', 'test2'); // Activate Tab 2
});
</script>
এখানে:
- $('.tabs').tabs('select', 'test2'): এটি ট্যাব ২ কে সক্রিয় করে।
উপসংহার
Materialize CSS এ Modal, Tooltip, এবং Tabs ব্যবহার করা অত্যন্ত সহজ এবং এগুলোর ইন্টারঅ্যাকশন কন্ট্রোল করা JavaScript দিয়ে আরও সহজ হয়ে যায়। আপনি open, close, select এবং initialize ইত্যাদি কমান্ড ব্যবহার করে এই উপাদানগুলোর নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে আপনি আপনার ওয়েবসাইটে একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারবেন।
Materialize CSS একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা অনেক ধরনের ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস উপাদান প্রদান করে, যেমন modals, side navs, tooltips, tabs, ইত্যাদি। এগুলোর অনেকেরই events এবং callback functions থাকতে পারে, যা ব্যবহারকারী ইন্টারঅ্যাকশন বা অ্যাকশনগুলির প্রতি প্রতিক্রিয়া প্রদান করে। Materialize এর JavaScript components সঠিকভাবে কাজ করার জন্য এই ইভেন্ট এবং কলব্যাক ফাংশন ব্যবহার করা প্রয়োজন।
এখানে Materialize এর ইভেন্ট এবং কলব্যাক ফাংশন সম্পর্কে বিস্তারিত আলোচনা করা হলো, যাতে আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে ইন্টারঅ্যাকটিভ ফিচারগুলো আরও ভালোভাবে কাস্টমাইজ এবং কন্ট্রোল করতে পারেন।
Materialize এর ইভেন্টস
Materialize CSS বিভিন্ন কনট্রোল এবং উপাদান প্রয়োগের জন্য ইভেন্ট হ্যান্ডলার সরবরাহ করে। কিছু সাধারণ ইভেন্ট যা আপনি ব্যবহার করতে পারেন:
১. Modal Events
Modals (পপ-আপ উইন্ডো) এর সাথে ইভেন্ট হ্যান্ডলিং করার জন্য বিভিন্ন ইভেন্ট ব্যবহার করা যেতে পারে, যেমন open, close, এবং opened।
$(document).ready(function(){
// Modal open event
$('.modal').modal({
onOpenStart: function() {
console.log("Modal is opening...");
},
onOpenEnd: function() {
console.log("Modal opened.");
},
onCloseStart: function() {
console.log("Modal is closing...");
},
onCloseEnd: function() {
console.log("Modal closed.");
}
});
});
এখানে:
- onOpenStart: যখন modal খোলা শুরু হয়।
- onOpenEnd: যখন modal পুরোপুরি খোলা হয়।
- onCloseStart: যখন modal বন্ধ হতে শুরু করে।
- onCloseEnd: যখন modal পুরোপুরি বন্ধ হয়ে যায়।
২. Tooltip Events
Tooltips সাধারণত কোনো উপাদানে মাউস হোভার বা ফোকাসের মাধ্যমে প্রদর্শিত হয়। আপনি open এবং close ইভেন্টগুলো ব্যবহার করতে পারেন।
$(document).ready(function(){
$('.tooltipped').tooltip({
enterDelay: 300,
outDelay: 300,
onOpen: function() {
console.log("Tooltip opened!");
},
onClose: function() {
console.log("Tooltip closed!");
}
});
});
এখানে:
- onOpen: Tooltip যখন প্রদর্শিত হবে তখন কলব্যাক কার্যকর হবে।
- onClose: Tooltip যখন বন্ধ হবে তখন কলব্যাক কার্যকর হবে।
৩. Sidenav Events
Sidenav মেনুর জন্যও কিছু ইভেন্ট হ্যান্ডলিং অপশন রয়েছে, যেমন open এবং close ইভেন্ট।
$(document).ready(function(){
$('.sidenav').sidenav({
onOpenStart: function() {
console.log("Sidenav is opening...");
},
onCloseStart: function() {
console.log("Sidenav is closing...");
}
});
});
এখানে:
- onOpenStart: যখন sidenav খোলার প্রক্রিয়া শুরু হবে।
- onCloseStart: যখন sidenav বন্ধ হতে শুরু করবে।
৪. Collapsible Events
Collapsible এলিমেন্টের জন্য open এবং close ইভেন্ট ব্যবহার করা যেতে পারে।
$(document).ready(function(){
$('.collapsible').collapsible({
onOpenStart: function() {
console.log("Collapsible item is opening...");
},
onCloseStart: function() {
console.log("Collapsible item is closing...");
}
});
});
এখানে:
- onOpenStart: যখন collapsible আইটেমটি খোলার জন্য প্রস্তুত হবে।
- onCloseStart: যখন collapsible আইটেমটি বন্ধ হতে শুরু করবে।
Materialize Callback Functions
Callback functions হল এমন ফাংশন যা ইভেন্টের শেষে বা নির্দিষ্ট সময়ের পর কল হয়। Materialize CSS বিভিন্ন উইজেট বা উপাদানের জন্য কলব্যাক ফাংশন প্রদান করে, যাতে আপনি আপনার অ্যাপ্লিকেশনে প্রয়োজনীয় কাস্টম ফাংশনালিটি যোগ করতে পারেন।
১. Modal Callback Functions
Modal এর জন্য callback ফাংশন যেমন onOpenStart, onCloseEnd ইত্যাদি ব্যবহার করা যায়।
$(document).ready(function(){
$('.modal').modal({
onOpenStart: function() {
alert("Modal is opening...");
},
onCloseEnd: function() {
alert("Modal has closed!");
}
});
});
এখানে:
- onOpenStart: Modal খোলার সময় ট্রিগার হবে।
- onCloseEnd: Modal বন্ধ হওয়ার পর কলব্যাক ফাংশনটি চালু হবে।
২. Carousel Callback Functions
Carousel উইজেটের জন্যও কলব্যাক ফাংশন ব্যবহার করা যেতে পারে, যেমন যখন একটি স্লাইড পরিবর্তিত হয়।
$(document).ready(function(){
$('.carousel').carousel({
onCycleTo: function(current) {
console.log("Currently showing slide number " + current);
}
});
});
এখানে:
- onCycleTo: স্লাইড পরিবর্তন হওয়ার সময় কলব্যাক ফাংশনটি চালু হবে এবং বর্তমান স্লাইডের নম্বরটি দেখাবে।
৩. Toast Callback Function
Toast notifications এর জন্যও callback ফাংশন ব্যবহার করা যেতে পারে, যেমন টোস্ট প্রদর্শিত হওয়ার পর কী হবে।
$(document).ready(function(){
M.toast({
html: 'This is a custom toast!',
completeCallback: function() {
console.log("Toast has been closed.");
}
});
});
এখানে:
- completeCallback: টোস্ট বন্ধ হওয়া পর কলব্যাক ফাংশনটি চালু হবে।
উপসংহার
Materialize CSS-এর events এবং callback functions ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তুলতে পারেন। Modals, tooltips, side navs, collapsibles, carousel, এবং toast notifications এর মতো উপাদানগুলির জন্য Materialize ইভেন্ট হ্যান্ডলিং এবং কাস্টম কলব্যাক ফাংশন প্রদান করে, যা আপনাকে ইউজার ইন্টারঅ্যাকশনের প্রতি সঠিকভাবে প্রতিক্রিয়া জানাতে সহায়তা করে। এই ফিচারগুলো আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করবে।
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
