Framework7 এর প্রধান বৈশিষ্ট্যগুলোর মধ্যে একটি হলো এর শক্তিশালী এবং ব্যবহারবান্ধব UI কম্পোনেন্টস। এই কম্পোনেন্টগুলো মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য একটি নেটিভ অভিজ্ঞতা প্রদান করে।
এখানে Framework7 এর তিনটি বেসিক কম্পোনেন্ট Navbar, Toolbar, এবং Statusbar নিয়ে আলোচনা করা হলো।
Navbar (ন্যাভবার)
Navbar বা ন্যাভিগেশন বার হলো পৃষ্ঠার উপরের অংশে অবস্থিত একটি কম্পোনেন্ট যা পৃষ্ঠার শিরোনাম, ব্যাক বাটন এবং অন্যান্য অ্যাকশন এলিমেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়।
Navbar এর বেসিক উদাহরণ:
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link back">Back</a>
</div>
<div class="title">Page Title</div>
<div class="right">
<a href="#" class="link">Link</a>
</div>
</div>
</div>
Navbar এর উপাদান:
- Left: ব্যাক বাটন বা অন্যান্য বাটনের জন্য।
- Title: পৃষ্ঠার শিরোনাম।
- Right: অ্যাকশন বা লিঙ্কের জন্য।
ডায়নামিক Navbar:
Framework7 ডায়নামিক Navbar সমর্থন করে, যেখানে স্ক্রল করার সময় Navbar কন্টেন্ট পরিবর্তিত হতে পারে।
<div class="navbar navbar-large">
<div class="navbar-inner">
<div class="title">Large Title</div>
</div>
</div>
Toolbar (টুলবার)
Toolbar একটি বটম বা টপ-অবস্থিত কম্পোনেন্ট যা সাধারণত অ্যাপ্লিকেশনের গুরুত্বপূর্ণ অ্যাকশন বা নেভিগেশন অপশন প্রদর্শনের জন্য ব্যবহৃত হয়।
Toolbar এর বেসিক উদাহরণ:
<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Home</a>
<a href="#" class="link">Search</a>
<a href="#" class="link">Profile</a>
</div>
</div>
Toolbar এর উপাদান:
- Toolbar-inner: Toolbar এর অভ্যন্তরের কন্টেন্ট।
- Link: বিভিন্ন নেভিগেশন বা অ্যাকশনের জন্য লিঙ্ক।
ফিক্সড Toolbar:
Toolbar কন্টেন্ট পৃষ্ঠার সাথে স্ক্রল না করতে চাইলে এটি ফিক্সড করা যায়:
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Home</a>
<a href="#" class="link">Settings</a>
</div>
</div>
Toolbar এর অবস্থান:
- Top Toolbar: পৃষ্ঠার উপরের অংশে প্রদর্শিত হয়।
- Bottom Toolbar: পৃষ্ঠার নিচের অংশে প্রদর্শিত হয় (সাধারণত মোবাইল অ্যাপে ব্যবহৃত)।
Statusbar (স্ট্যাটাসবার)
Statusbar সাধারণত মোবাইল ডিভাইসের উপরের অংশে থাকে এবং ডিভাইসের সিস্টেম স্ট্যাটাস দেখায়, যেমন ব্যাটারি লেভেল, টাইম, এবং সিগনাল স্ট্রেংথ।
Framework7 এ Statusbar ব্যবহারের জন্য:
Framework7 এর Cordova Plugin ব্যবহার করে Statusbar নিয়ন্ত্রণ করা যায়। এটি মোবাইল অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।
Statusbar প্লাগইন ইন্টিগ্রেশন:
Cordova Plugin ইনস্টল করুন:
cordova plugin add cordova-plugin-statusbarস্ট্যাটাসবার সক্রিয় করতে কোড যোগ করুন:
document.addEventListener('deviceready', function () { StatusBar.styleDefault(); // Default স্টাইল }, false);
Statusbar কাস্টমাইজেশন:
Cordova প্লাগইনের মাধ্যমে স্ট্যাটাসবার কাস্টমাইজ করা যায়:
// স্ট্যাটাসবার লুকানো
StatusBar.hide();
// স্ট্যাটাসবার দেখানো
StatusBar.show();
// ব্যাকগ্রাউন্ড কালার পরিবর্তন
StatusBar.backgroundColorByHexString("#4CAF50");
Navbar, Toolbar, এবং Statusbar একত্রে ব্যবহার
<div class="page">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link back">Back</a>
</div>
<div class="title">Page Title</div>
</div>
</div>
<!-- Page Content -->
<div class="page-content">
<p>Welcome to Framework7!</p>
</div>
<!-- Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Home</a>
<a href="#" class="link">Search</a>
<a href="#" class="link">Profile</a>
</div>
</div>
</div>
Framework7 এর Navbar, Toolbar, এবং Statusbar কম্পোনেন্টগুলো মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলো ব্যবহার করে অ্যাপ্লিকেশনের নেভিগেশন এবং কার্যকারিতা সহজতর করা যায়। Cordova এর মাধ্যমে Statusbar কাস্টমাইজ করে মোবাইল অ্যাপে আরও উন্নত অভিজ্ঞতা দেওয়া সম্ভব।
Read more
