Framework7 দিয়ে কাস্টম Modal (মডাল) এবং Popup তৈরির মাধ্যমে অ্যাপ্লিকেশনে ইউজার ইন্টারফেস উন্নত করা যায়। এই Modal এবং Popup গুলো কাস্টম স্টাইল ও ফাংশনালিটি যোগ করে ব্যবহারকারীদের তথ্য প্রদর্শন বা ইনপুট নেওয়ার জন্য ব্যবহার করা হয়।
কাস্টম Modal তৈরি
বেসিক কাঠামো (HTML, CSS এবং JavaScript)
HTML টেমপ্লেট:
<div class="custom-modal modal">
<div class="modal-inner">
<div class="modal-title">শিরোনাম</div>
<div class="modal-text">এখানে আপনার কনটেন্ট যোগ করুন</div>
<div class="modal-buttons">
<span class="modal-button modal-close">বন্ধ করুন</span>
<span class="modal-button modal-accept">ঠিক আছে</span>
</div>
</div>
</div>
CSS কাস্টমাইজেশন (custom.css):
.custom-modal .modal-inner {
background-color: #fff;
border-radius: 8px;
padding: 20px;
}
.custom-modal .modal-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.modal-buttons .modal-button {
padding: 10px 15px;
margin: 5px;
background: #007aff;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.modal-buttons .modal-button.modal-close {
background: #ff3b30;
}
JavaScript কন্ট্রোল (app.js):
var app = new Framework7({
root: '#app',
});
// Modal ওপেন করা
document.querySelector('.open-modal-button').addEventListener('click', function() {
app.dialog.open('.custom-modal');
});
// Modal ক্লোজ করা
document.querySelector('.modal-close').addEventListener('click', function() {
app.dialog.close('.custom-modal');
});
কাস্টমাইজেশন
- রঙ, ফন্ট, প্যাডিং পরিবর্তন করে Modal-এর লুক কাস্টমাইজ করুন।
- animationCSS ক্লাস যোগ করে খোলার ও বন্ধ হওয়ার অ্যাডিমেশন পরিবর্তন করা যায়।
- প্রয়োজন অনুযায়ী Modal এর ভিতরে ফর্ম বা ইমেজ যুক্ত করতে পারেন।
Popup তৈরি
বেসিক কাঠামো
HTML টেমপ্লেট:
<div class="popup custom-popup">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">পপআপ শিরোনাম</div>
<div class="right">
<a class="link popup-close">বন্ধ</a>
</div>
</div>
</div>
<div class="page-content">
<p>পপআপ কনটেন্ট যোগ করুন</p>
</div>
</div>
</div>
</div>
CSS কাস্টমাইজেশন (custom.css):
.custom-popup .navbar {
background: #4cd964;
}
.custom-popup .title {
color: #fff;
}
JavaScript কন্ট্রোল (app.js):
// Popup ওপেন করা
document.querySelector('.open-popup-button').addEventListener('click', function() {
app.popup.open('.custom-popup');
});
// Popup ক্লোজ করা
document.querySelector('.popup-close').addEventListener('click', function() {
app.popup.close('.custom-popup');
});
কাস্টমাইজেশন
.custom-popupক্লাসে স্টাইল যোগ করে ব্যাকগ্রাউন্ড কালার, হাইট বা উইথ পরিবর্তন করুন।- Popup এ ফর্ম, তালিকা, বা কার্ড কম্পোনেন্ট যুক্ত করে ইউজারের ইন্টার্যাকশন বৃদ্ধির সুযোগ রয়েছে।
- এনিমেশন, ট্রানজিশন ইফেক্ট এবং Responsive ডিজাইনের মাধ্যমে Popup কে বিভিন্ন ডিভাইসে মানানসই করা যায়।
সারাংশ: Framework7-এ .Custom Modal এবং Popup ব্যবহার করে কাস্টম UI তৈরি করা যায়। CSS এবং JavaScript ব্যবহার করে এগুলোকে আপনার প্রয়োজন অনুযায়ী পরিবর্তন, পরিবর্ধন ও কাস্টমাইজ করতে পারবেন। এতে অ্যাপ্লিকেশনের ইন্টারফেস হবে আরও আকর্ষণীয় এবং ইন্টার্যাকটিভ।
Content added By
Read more
