AndrewJBateman / ionic-angular-swipeTabs

:clipboard: Ionic tutorial app from Simon Grimm of the Ionic Academy

⚡ Ionic Swipeable Tabs

• Ionic-Angular tutorial app with swipeable tab navigation.
• Note: to open web links in a new window use: ctrl+click on link

• ⚡ Ionic Swipeable Tabs
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• User can swipe left or right to switch between News, Account and About tab pages.
• News page has 3 buttons that open News Details and About pages.

📷 Screenshots

📶 Technologies

• Ionic v6
• Angular v13
• Ionic/angular v6 including ion-nav-link
• @ionic-super-tabs/angular v7 - last published 2 years ago and I cannot see any documentation. Github Examples here

💾 Setup

• Run npm i to install dependencies
• Run ng lint to run linting. All files pass linting (ident check disabled in tslint.json).
• To start the server on localhost://8100 type: ionic serve

💻 Code Examples

• sets canGoBack boolean variable to true when there is an Ionic navigation event.

  ngAfterViewInit() {
    this.newsNav.ionNavDidChange.subscribe(async (event: any) => {
      console.log('Change: ', event)
      this.canGoBack = await this.newsNav.canGoBack();
    });
  }

🆒 Features

• Home page has super-tabs navigation - app-routing module just navigates to home page. Individual page routing modules removed.

📋 Status & To-do list

• Status: Working.
• To-do: Nothing. Could use this swipeable menu in other Ionic apps.

👏 Inspiration

• Simon Grimm, Ionic Academy Tutorial: Building a Swipeable Tabs Navigation with Ionic 4+
• Ionic forum: Ionic Swipeable Tabs are now here!

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]