Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Modal কম্পোনেন্ট সহ অনেক ধরনের ইন্টারঅ্যাকটিভ উপাদান প্রদান করে। Modal একটি পপ-আপ ডায়ালগ উইন্ডো যা সাধারণত ব্যবহারকারীর কাছে অতিরিক্ত তথ্য বা ক্রিয়া প্রদর্শন করতে ব্যবহৃত হয়। Materialize CSS এ Modal একটি অত্যন্ত কাস্টমাইজেবল এবং অ্যাক্সেসযোগ্য কম্পোনেন্ট, যা সহজেই বিভিন্ন events এবং animations এর সাথে একত্রে কাজ করে।
এখানে Modal এর Events এবং Animation নিয়ে বিস্তারিত আলোচনা করা হলো।
Modal তৈরি করা
Modal তৈরি করতে Materialize CSS এ কিছু সহজ পদক্ষেপ অনুসরণ করা হয়। প্রথমে, HTML ফাইলে Modal এর স্ট্রাকচার তৈরি করতে হবে এবং তারপর JavaScript দিয়ে এটি কনফিগার করতে হবে।
১. Basic Modal Structure
<!-- 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 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">Close</a>
</div>
</div>
<!-- Include Materialize CSS & JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
এখানে:
- modal-trigger ক্লাসটি একটি বাটন বা লিঙ্ক তৈরি করে, যা ক্লিক করলে Modal খুলবে।
- modal ID সহ একটি div তৈরি করা হয়, যা Modal এর কন্টেন্ট ধারণ করে।
- modal-content: এখানে Modal এর মেইন কন্টেন্ট থাকবে।
- modal-footer: এই অংশে সাধারণত Close বাটন বা অন্যান্য অ্যাকশন থাকে।
Modal Events
Materialize CSS এ Modal ব্যবহার করার সময়, আপনি বিভিন্ন ইভেন্ট ট্রিগার করতে পারেন। এই ইভেন্টগুলো আপনাকে Modal ওপেন, ক্লোজ বা অন্যান্য কার্যক্রমের উপর কাস্টমাইজেশন করতে সহায়ক।
১. Opening Modal (Open Event)
Modal খুললে এই ইভেন্টটি ট্রিগার হয়। আপনি JavaScript এর মাধ্যমে এটি কাস্টমাইজ করতে পারেন।
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
onOpenStart: function() {
console.log('Modal is about to open');
}
});
});
</script>
এখানে:
- onOpenStart: যখন Modal খোলার জন্য প্রস্তুত হয়, তখন এই ইভেন্টটি ট্রিগার হবে।
২. Closing Modal (Close Event)
Modal বন্ধ হলে এই ইভেন্টটি ট্রিগার হয়।
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
onCloseEnd: function() {
console.log('Modal has been closed');
}
});
});
</script>
এখানে:
- onCloseEnd: Modal বন্ধ হওয়ার পরে এই ইভেন্টটি ট্রিগার হয়।
৩. Additional Events:
Materialize CSS এ Modal এর জন্য আরও কিছু ইভেন্ট রয়েছে:
- onOpenEnd: Modal সম্পূর্ণরূপে খোলার পরে ট্রিগার হয়।
- onCloseStart: Modal বন্ধ হওয়ার আগে ট্রিগার হয়।
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
onOpenEnd: function() {
console.log('Modal has opened');
},
onCloseStart: function() {
console.log('Modal is closing');
}
});
});
</script>
Modal Animations
Materialize CSS এ Modal এর জন্য কিছু সুন্দর animations অন্তর্ভুক্ত করা হয়েছে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও আকর্ষণীয় করে তোলে। আপনি Modal এর অ্যানিমেশন কাস্টমাইজ করতে পারেন, যেমন: কিভাবে Modal খুলবে এবং বন্ধ হবে।
১. Basic Animation
Materialize CSS ডিফল্টভাবে Modal খুললে এবং বন্ধ হলে কিছু অ্যানিমেশন প্রভাব দেয়।
- Fade In: Modal খুললে একটি মসৃণ ফেড ইন অ্যানিমেশন দেখানো হয়।
- Fade Out: Modal বন্ধ হলে একটি ফেড আউট অ্যানিমেশন দেখানো হয়।
২. Customizing Animation
Materialize CSS এ Modal এর জন্য animation duration এবং in/out effect কাস্টমাইজ করা যেতে পারে।
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
inDuration: 500, // Opening animation duration (ms)
outDuration: 300, // Closing animation duration (ms)
preventScrolling: true // Prevent scrolling when Modal is open
});
});
</script>
এখানে:
- inDuration: Modal খোলার সময় অ্যানিমেশনটির সময়কাল নির্ধারণ করে (মিলিসেকেন্ডে)।
- outDuration: Modal বন্ধ করার সময় অ্যানিমেশনটির সময়কাল নির্ধারণ করে।
- preventScrolling: Modal খোলার সময় স্ক্রোলিং প্রতিরোধ করতে ব্যবহৃত হয়।
৩. Custom Animations (CSS)
আপনি CSS এর মাধ্যমে কাস্টম animations বা transitions যোগ করতে পারেন Modal এর উপর। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে CSS ব্যবহার করে Modal এর এন্ট্রি এবং এক্সিট অ্যানিমেশন কাস্টমাইজ করা হয়েছে।
<style>
.modal {
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(-50%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
</script>
এখানে:
- slideIn অ্যানিমেশনটি Modal এর জন্য একটি কাস্টম অ্যানিমেশন তৈরি করেছে, যেখানে Modal উপরে থেকে নিচে আসবে।
উপসংহার
Materialize CSS এ Modal একটি অত্যন্ত কার্যকরী উপাদান যা ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য ব্যবহার করা হয়। আপনি Modal এর বিভিন্ন events যেমন open, close, open-end, এবং close-start ব্যবহার করে Modal এর কার্যকলাপ কাস্টমাইজ করতে পারেন। এছাড়াও, animations এর মাধ্যমে Modal এর অ্যানিমেশন প্রভাব কাস্টমাইজ করা যায়, যেমন fade-in, slide-in, ইত্যাদি। এগুলি ব্যবহারকারীদের কাছে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
Read more
