Framework7 ব্যবহার করে অ্যাপ্লিকেশনে সহজে Swipeable Panels এবং Swipe Actions যুক্ত করা যায়। Swipeable Panels এর মাধ্যমে সাইড প্যানেলগুলো (Sidebar Panels) ইউজার অ্যাকশনের ভিত্তিতে স্ক্রিনের পাশ থেকে স্লাইড করে আনা যায়। অন্যদিকে Swipe Actions ব্যবহার করে লিস্ট আইটেমের উপর সোয়াইপ করে অতিরিক্ত অপশন দেখানোর সুযোগ থাকে।
Swipeable Panels কী
Swipeable Panels (সোয়াইপেবল প্যানেল) হল এমন একটি ইউআই এলিমেন্ট যা স্ক্রিনের বাঁ বা ডান দিক থেকে সোয়াইপ করে টেনে বের করা যায়। এতে ইউজাররা সহজে নেভিগেশন ড্রয়ার, সেটিংস প্যানেল, বা অন্যান্য অতিরিক্ত কন্টেন্ট অ্যাক্সেস করতে পারে।
Swipeable Panels এর বৈশিষ্ট্য (Features)
- প্যানেল খোলা (Open) এবং বন্ধ (Close) করার জন্য সোয়াইপ অ্যাকশন সমর্থন।
- iOS এবং Material Design থিমের সাথে সামঞ্জস্যপূর্ণ।
- সহজেই কাস্টমাইজযোগ্য স্টাইল এবং অ্যানিমেশন।
Swipeable Panels তৈরি করা
Framework7 এ প্যানেল সাধারণত .panel ক্লাস ব্যবহার করে তৈরি করা হয়। প্যানেলকে সোয়াইপেবল করতে panel: { swipe: 'left' } অথবা panel: { swipe: 'right' } কনফিগারেশন ব্যবহার করা হয়।
উদাহরণ (HTML):
<div class="panel panel-left panel-cover">
<div class="view">
<div class="page">
<div class="page-content">
<p>Left Panel Content</p>
</div>
</div>
</div>
</div>
<div class="view view-main">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Swipeable Panel Example</div>
</div>
</div>
<div class="page-content">
<p>Swipe from left edge to open the panel.</p>
</div>
</div>
</div>
প্যানেল ইনিশিয়ালাইজেশন (JavaScript):
var app = new Framework7({
root: '#app',
panel: {
swipe: 'left', // বাম পাশ থেকে সোয়াইপ করে প্যানেল খোলার জন্য
},
});
উপরের কোডে panel: { swipe: 'left' } কনফিগার করা হলে ইউজার স্ক্রিনের বাম দিক থেকে সোয়াইপ করে প্যানেলটি খুলতে পারবে।
Swipe Actions কী
Swipe Actions (সোয়াইপ অ্যাকশন) হল লিস্ট আইটেমগুলোর উপর সোয়াইপ করে অতিরিক্ত অপশন দেখানোর একটি ইউআই প্যাটার্ন। এটি সাধারণত iOS মেইল অ্যাপের মতো ইন্টারফেসে দেখা যায়। Framework7 এই ফিচারটি সহজে ইমপ্লিমেন্ট করার সুবিধা দেয়।
Swipe Actions এর বৈশিষ্ট্য (Features)
- লিস্ট আইটেমের উপর সোয়াইপ করে অ্যাকশন বাটনগুলো দেখানো।
- অতিরিক্ত অপশন যেমন Edit, Delete, Share ইত্যাদি অ্যাক্সেসযোগ্য করা।
- কাস্টম স্টাইল এবং আইকন ব্যবহার করে অ্যাকশনগুলোকে আরও ইউজার-ফ্রেন্ডলি করা।
Swipe Actions তৈরি করা
উদাহরণ (HTML):
<div class="list simple-list">
<ul>
<li class="swipeout">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Swipe me left</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
</ul>
</div>
উপরের উদাহরণে .swipeout ক্লাস যুক্ত করা লিস্ট আইটেমটি সোয়াইপ করা যাবে। swipeout-actions-right ক্লাস সম্বলিত ডিভের ভিতরে Delete অ্যাকশন বাটন দেওয়া হয়েছে।
Swipe Actions এর কাস্টমাইজেশন
আপনি চাইলে একাধিক অ্যাকশন বাটন যুক্ত করতে পারেন এবং বাটনে আইকন, টেক্সট, বা উভয়ই ব্যবহার করতে পারেন।
<div class="swipeout-actions-right">
<a href="#" class="swipeout-close">Close</a>
<a href="#" class="swipeout-delete">Delete</a>
</div>
এভাবে একাধিক অ্যাকশন বাটন যুক্ত করলে সোয়াইপ করার পর সেগুলো একসাথে প্রদর্শিত হবে।
ইভেন্ট হ্যান্ডলিং (Event Handling)
Swipeable Panels এবং Swipe Actions এর ইভেন্ট শোনার (listen) মাধ্যমে অ্যাপের লজিক নিয়ন্ত্রণ করা যায়।
উদাহরণ (Panel ইভেন্ট):
app.on('panelOpen', function (panel) {
console.log('Panel opened:', panel);
});
উদাহরণ (Swipeout ইভেন্ট):
$$(document).on('swipeout:deleted', '.swipeout', function () {
console.log('Item deleted');
});
উপরের ইভেন্ট শোনার মাধ্যমে আপনি সোয়াইপ আ্যাকশন সম্পন্ন হওয়ার পর নির্দিষ্ট কাজ করতে পারেন।
সারাংশ: Framework7 দিয়ে Swipeable Panels এবং Swipe Actions ইমপ্লিমেন্ট করা সহজ। প্যানেল সোয়াইপ করে নেভিগেশন ড্রয়ার দেখানো কিংবা লিস্ট আইটেম সোয়াইপ করে অতিরিক্ত অ্যাকশন দেখানো ইউজার অভিজ্ঞতাকে আরও উন্নত করে। এগুলো কাস্টমাইজ করে আপনার অ্যাপকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করা সম্ভব।
Read more
