Push, Pop এবং Tabbed Navigation কনফিগার করা

Framework7 মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য উন্নত নেভিগেশন সিস্টেম প্রদান করে। Push, Pop এবং Tabbed Navigation Framework7 এর গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের জন্য একটি মসৃণ এবং প্রাকৃতিক নেভিগেশন অভিজ্ঞতা তৈরি করে।

Push এবং Pop Navigation

Push এবং Pop Navigation হলো Framework7 এর ডিফল্ট রাউটিং সিস্টেমের একটি অংশ। এটি ব্যবহার করে ব্যবহারকারী একটি নতুন পৃষ্ঠায় যেতে (Push) এবং পূর্ববর্তী পৃষ্ঠায় ফিরে আসতে (Pop) পারে।

Push এবং Pop Navigation সেটআপ

1. প্রজেক্ট স্ট্রাকচার তৈরি করুন Framework7 প্রজেক্ট তৈরি করুন এবং আপনার পৃষ্ঠাগুলোর জন্য পৃথক HTML ফাইল তৈরি করুন। যেমন:
   • home.html
   • about.html

2. Routes কনফিগারেশন app.js ফাইলে Framework7 রাউটিং কনফিগার করুন:

   var app = new Framework7({
     root: '#app',
     routes: [
       {
         path: '/',
         url: './pages/home.html',
       },
       {
         path: '/about/',
         url: './pages/about.html',
       },
     ],
   });
   

3. নেভিগেশন তৈরি করুন পৃষ্ঠার মধ্যে নেভিগেশন লিঙ্ক যোগ করুন:

   <!-- home.html -->
   <div class="page" data-name="home">
     <div class="navbar">
       <div class="navbar-inner">
         <div class="title">Home</div>
       </div>
     </div>
     <div class="page-content">
       <a href="/about/">Go to About</a>
     </div>
   </div>
   

   <!-- about.html -->
   <div class="page" data-name="about">
     <div class="navbar">
       <div class="navbar-inner">
         <div class="title">About</div>
       </div>
     </div>
     <div class="page-content">
       <a href="/">Back to Home</a>
     </div>
   </div>
   

Tabbed Navigation

Tabbed Navigation হলো Framework7 এর আরেকটি শক্তিশালী ফিচার, যা একই পৃষ্ঠায় একাধিক বিভাগ বা ভিউ তৈরি করতে ব্যবহার করা হয়।

Tabbed Navigation সেটআপ

1. Tabbed Layout তৈরি করুন Framework7 এর tabs কম্পোনেন্ট ব্যবহার করে ট্যাব তৈরি করুন:

   <div class="page" data-name="tabs">
     <div class="navbar">
       <div class="navbar-inner">
         <div class="title">Tabs</div>
       </div>
     </div>
     <div class="toolbar tabbar">
       <div class="toolbar-inner">
         <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
         <a href="#tab-2" class="tab-link">Tab 2</a>
         <a href="#tab-3" class="tab-link">Tab 3</a>
       </div>
     </div>
     <div class="tabs">
       <div id="tab-1" class="tab tab-active">
         <div class="page-content">
           <p>Content for Tab 1</p>
         </div>
       </div>
       <div id="tab-2" class="tab">
         <div class="page-content">
           <p>Content for Tab 2</p>
         </div>
       </div>
       <div id="tab-3" class="tab">
         <div class="page-content">
           <p>Content for Tab 3</p>
         </div>
       </div>
     </div>
   </div>
   

2. Tabbed Navigation Styling Framework7 এর ডিফল্ট স্টাইলিং ব্যবহার করে আপনার ট্যাবগুলোর জন্য একটি সুন্দর লেআউট পাবেন। তবে চাইলে CSS ব্যবহার করে কাস্টমাইজ করা যায়।

Push, Pop এবং Tabbed Navigation একসাথে ব্যবহার করা

Framework7 আপনাকে Push এবং Pop Navigation এর পাশাপাশি Tabbed Navigation একত্রে ব্যবহার করার সুযোগ দেয়। একাধিক নেভিগেশন প্যাটার্ন ব্যবহার করতে রাউটিং সিস্টেমে ট্যাবযুক্ত পৃষ্ঠাগুলো যুক্ত করুন।

Routes সহ Tabs পৃষ্ঠার উদাহরণ:

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/',
      url: './pages/home.html',
    },
    {
      path: '/tabs/',
      url: './pages/tabs.html',
    },
  ],
});

Tabs পৃষ্ঠায় Push লিঙ্ক যুক্ত করা:

<!-- tabs.html -->
<div class="page" data-name="tabs">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Tabs with Navigation</div>
    </div>
  </div>
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab-1" class="tab tab-active">
      <div class="page-content">
        <a href="/about/">Go to About Page</a>
      </div>
    </div>
    <div id="tab-2" class="tab">
      <div class="page-content">
        <p>Content for Tab 2</p>
      </div>
    </div>
    <div id="tab-3" class="tab">
      <div class="page-content">
        <p>Content for Tab 3</p>
      </div>
    </div>
  </div>
</div>

Framework7 এর Push, Pop এবং Tabbed Navigation ফিচারগুলো সহজেই ব্যবহার করা যায় এবং অত্যন্ত কার্যকর। Push এবং Pop Navigation ব্যবহার করে আপনি পৃষ্ঠার মধ্যে মসৃণ নেভিগেশন তৈরি করতে পারেন, আর Tabbed Navigation ব্যবহার করে ব্যবহারকারীদের জন্য একাধিক বিভাগ বা বিষয়বস্তু সহজেই প্রদর্শন করা যায়। Framework7 এর এই নেভিগেশন ফিচারগুলো অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।