Materialize এর JavaScript Components

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 দিয়ে আপনি একটি আধুনিক, ফাংশনাল এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট বা অ্যাপ্লিকেশন তৈরি করতে পারবেন।