Framework7 অ্যাপ্লিকেশনে Popup, Popover, এবং Action Sheet ব্যবহারের মাধ্যমে ইউজার ইন্টারফেস (UI) আরও সমৃদ্ধ করা যায়। এই উপাদানগুলো মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে বিভিন্ন ধরনের ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।
Popup ব্যবস্থাপনা
Popup হলো একটি ওভারলে যা পুরো স্ক্রিন বা স্ক্রিনের একটি নির্দিষ্ট অংশ জুড়ে প্রদর্শিত হয়। এটি সাধারণত বিশেষ কোনো কন্টেন্ট বা ফর্ম প্রদর্শনের জন্য ব্যবহৃত হয়।
Popup HTML স্ট্রাকচার:
<div class="popup" id="my-popup">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Popup Title</div>
<div class="right">
<a href="#" class="link popup-close">Close</a>
</div>
</div>
</div>
<div class="page-content">
<p>This is a popup content.</p>
</div>
</div>
</div>
</div>
Popup চালু ও বন্ধ করার জাভাস্ক্রিপ্ট:
// Popup খোলা
app.popup.open('#my-popup');
// Popup বন্ধ করা
app.popup.close('#my-popup');
Popover ব্যবস্থাপনা
Popover হলো একটি ছোট পপ-আপ উইন্ডো যা একটি নির্দিষ্ট উপাদানের সাথে সম্পর্কিত থাকে এবং অতিরিক্ত তথ্য বা বিকল্প সরবরাহ করতে ব্যবহৃত হয়।
Popover HTML স্ট্রাকচার:
<div class="popover" id="my-popover">
<div class="popover-inner">
<div class="block">
<p>This is a Popover content.</p>
</div>
</div>
</div>
<a href="#" class="link" id="open-popover">Open Popover</a>
Popover চালু ও বন্ধ করার জাভাস্ক্রিপ্ট:
// Popover খোলা
app.popover.open('#my-popover', '#open-popover');
// Popover বন্ধ করা
app.popover.close('#my-popover');
Popover পজিশন নির্ধারণ:
Popover একটি নির্দিষ্ট উপাদানের পাশে প্রদর্শিত হয়। open() মেথডে দ্বিতীয় প্যারামিটার হিসাবে লক্ষ্যবস্তু এলিমেন্ট পাস করতে হবে।
Action Sheet ব্যবস্থাপনা
Action Sheet হলো একটি মোডাল ডায়ালগ যা সাধারণত একাধিক বিকল্প প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত স্ক্রিনের নিচ থেকে স্লাইড করে উঠে আসে।
Action Sheet HTML স্ট্রাকচার (ডায়নামিক জাভাস্ক্রিপ্টের মাধ্যমে):
var actionSheet = app.actions.create({
buttons: [
{
text: 'Option 1',
onClick: function () {
console.log('Option 1 clicked');
},
},
{
text: 'Option 2',
onClick: function () {
console.log('Option 2 clicked');
},
},
{
text: 'Cancel',
color: 'red',
},
],
});
// Action Sheet খোলা
actionSheet.open();
Action Sheet HTML ভিত্তিক স্ট্রাকচার:
<div class="actions-modal">
<div class="actions-group">
<div class="actions-button">Option 1</div>
<div class="actions-button">Option 2</div>
</div>
<div class="actions-group">
<div class="actions-button actions-button-bold">Cancel</div>
</div>
</div>
Action Sheet চালু ও বন্ধ করার জাভাস্ক্রিপ্ট:
// Action Sheet খোলা
app.actions.open('.actions-modal');
// Action Sheet বন্ধ করা
app.actions.close('.actions-modal');
Popup, Popover, এবং Action Sheet ব্যবহারের উদাহরণ
Popup:
- লগইন ফর্ম বা বিশেষ নোটিফিকেশন প্রদর্শনের জন্য।
- পুরো স্ক্রিন কভার করতে।
Popover:
- হেল্প টুলটিপ বা ছোট অপশন দেখানোর জন্য।
- একটি নির্দিষ্ট উপাদানের সাথে সংযুক্ত থাকতে।
Action Sheet:
- বিকল্পগুলোর তালিকা দেখানোর জন্য।
- ইউজার অ্যাকশন সিলেক্ট করার ক্ষেত্রে (যেমন: ছবি আপলোড, ডিলিট কনফার্মেশন)।
গুরুত্বপূর্ণ পয়েন্ট
- Popup বড় কন্টেন্ট প্রদর্শনের জন্য উপযোগী। এটি মোবাইল অ্যাপ্লিকেশনগুলিতে পুরো স্ক্রিন কভার করে।
- Popover ছোট এবং নির্দিষ্ট কন্টেন্ট প্রদর্শনের জন্য ব্যবহার করা হয়। এটি নির্দিষ্ট উপাদানের পাশে প্রদর্শিত হয়।
- Action Sheet একাধিক বিকল্প প্রদর্শনের জন্য আদর্শ এবং সাধারণত স্ক্রিনের নিচ থেকে স্লাইড করে আসে।
Framework7-এ এই তিনটি উপাদানের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের UI এবং UX আরও উন্নত করতে পারবেন।
Read more
