Mobile App Development Tabs, Menus এবং Side Drawer Navigation তৈরি করা গাইড ও নোট

Ionic ফ্রেমওয়ার্কে Tabs, Menus, এবং Side Drawer Navigation তৈরি করা সহজ এবং ইন্টিগ্রেটেড। এই নেভিগেশন উপাদানগুলি মোবাইল অ্যাপ্লিকেশনের জন্য একটি পরিচিত এবং কার্যকরী ব্যবহারকারী ইন্টারফেস (UI) তৈরি করতে সহায়তা করে। Ionic আপনাকে এর জন্য প্রয়োজনীয় কম্পোনেন্ট সরবরাহ করে যা দ্রুত এবং সহজে কাস্টমাইজ করা যায়।

এখানে Tabs, Menus, এবং Side Drawer Navigation তৈরি করার জন্য প্রয়োজনীয় স্টেপস এবং উদাহরণ দেয়া হলো।

১. Tabs Navigation

Tabs হল একটি সাধারণ নেভিগেশন স্টাইল, যেখানে আপনি একাধিক পেজ বা সেকশনের মধ্যে দ্রুত সুইচ করতে পারেন। এটি সাধারণত মোবাইল অ্যাপ্লিকেশনে ব্যবহার হয়, বিশেষ করে যেখানে বিভিন্ন সেকশন বা ফিচার থাকে।

১.১ Tabs তৈরি করা

Ionic এ ট্যাব নেভিগেশন তৈরি করতে, আপনাকে ion-tabs এবং ion-tab-button ব্যবহার করতে হবে।

ionic start tabsExample tabs

এটি একটি Tabs টেমপ্লেট সহ অ্যাপ্লিকেশন তৈরি করবে।

১.২ Tabs কম্পোনেন্ট কোড

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

• ion-tab-bar: এটি ট্যাব নেভিগেশন বারের জন্য।
• ion-tab-button: প্রতিটি ট্যাব বাটনের জন্য।
• tab: প্রতিটি ট্যাবের জন্য একটি ইউনিক নাম।

১.৩ Tabs Routing (app-routing.module.ts)

এটি angular-routing এর মাধ্যমে নির্দিষ্ট পেজ বা ভিউয়ের জন্য রাউটিং তৈরি করবে:

const routes: Routes = [
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
      }
    ]
  }
];

২. Side Drawer Navigation (Menu)

Side Drawer Navigation বা Menu হলো একটি স্লাইডিং প্যানেল যা সাধারণত বাম বা ডান দিক থেকে বের হয়ে আসে এবং এতে সাধারণত অ্যাপের বিভিন্ন সেকশন বা ফিচার থাকে।

২.১ Menu তৈরি করা

Ionic এ সাইড ড্রয়ার মেনু তৈরি করতে ion-menu, ion-content, এবং ion-button ব্যবহার করতে হয়।

<ion-menu side="start" menuId="first" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item button (click)="openPage('home')">Home</ion-item>
      <ion-item button (click)="openPage('settings')">Settings</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="main-content"></ion-router-outlet>

এখানে:

• ion-menu: মেনু প্যানেল তৈরি করে।
• side="start": মেনু বাম পাশে থাকবে।
• menuId="first": মেনুর ইউনিক আইডি।
• contentId="main-content": এটি মূল কনটেন্টের জন্য, যেখানে মেনু ওপেন হলে কনটেন্ট সরে যাবে।

২.২ Menu Controller কোড (app.component.ts)

import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private menuCtrl: MenuController) {}

  openPage(page: string) {
    console.log('Opening page: ', page);
    this.menuCtrl.close(); // Close menu when a page is selected
  }
}

এখানে, MenuController ব্যবহার করে আপনি মেনু বন্ধ বা খুলতে পারেন।

২.৩ Menu Routing (app-routing.module.ts)

রাউটিং কনফিগারেশন ফাইলের মাধ্যমে আপনি মেনুর পেজ নির্ধারণ করতে পারেন।

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
  }
];

৩. Side Drawer Navigation এবং Tabs একসাথে ব্যবহার করা

ধরুন আপনি Tabs এবং Side Drawer Navigation একসাথে ব্যবহার করতে চান, আপনি এইভাবে কোড করতে পারেন:

<ion-menu side="start" menuId="first" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item button routerLink="/tabs/home">Home</ion-item>
      <ion-item button routerLink="/tabs/settings">Settings</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="main-content"></ion-router-outlet>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

এখানে ion-menu এবং ion-tabs দুটি আলাদা নেভিগেশন উপাদান একসাথে ব্যবহার করা হয়েছে, যাতে অ্যাপের ব্যবহারকারী উভয় নেভিগেশন পদ্ধতি ব্যবহার করতে পারেন।

Tabs, Menus, এবং Side Drawer Navigation হল Ionic অ্যাপ্লিকেশনের জনপ্রিয় এবং কার্যকরী নেভিগেশন উপাদান। আপনি এই নেভিগেশন পদ্ধতিগুলি ব্যবহার করে আপনার অ্যাপের ইউজার ইন্টারফেস (UI) উন্নত করতে পারেন এবং ব্যবহারকারীদের জন্য একটি স্বচ্ছ এবং সহজ নেভিগেশন প্রদান করতে পারেন। Ionic এর সাথে Angular, React, বা Vue.js ব্যবহার করে এই নেভিগেশন পদ্ধতিগুলি ইন্টিগ্রেট করা সহজ।