Im currently working on an ionic app integrated with capacitor. I have 3 pages connected with sidemenu. when i first open the page all the buttons are working properly. But when I navigate to other page and come back to the first page using side-menu, side-menu button and all other buttons are disabled. Same thing happens with all the three pages.
Here's my code for side menu in all app.html:
<ion-app>
<ion-menu side="start" content-id="main-content" >
<ion-header>
<ion-toolbar translucent>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
//navigate to other page-A
</ion-item>
<ion-item>
//navigate to other page-B
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</ion-app>
Related
I'm using Ionic 4 and tab layout.
I have one tab page with QR Code Scanner. Hence the the page is set to transparent as below
<ion-content padding color="transparent">
<ion-item lines="none" class="top-content">
<ion-grid>
<ion-row>
<ion-col>
<ion-label text-center no-margin>
Scan QR Code to start
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
and have following interface
The second tab displays a list of items and thus have pull-to-refresh on the page. The code is
<ion-header>
<ion-toolbar color="primary">
<ion-title>Item List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher slot="fixed" (ionRefresh)="refreshList($event)">
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<ion-card color="primary" (click)="showAction(1)">
<ion-card-content>
<!-- item content -->
</ion-card-content>
</ion-card>
</ion-content>
But on pulling the page, it shows transparent background from the first page where the QR Code scanner has opened the camera and thus on pulling it shows camera output.
How can I close or hide page before opening a new page?
Hey guys I am currently working on a project with ionic and the menu has been giving more problems than it should.
Recently I have been trying to add the menu close attribute, but where ever I put it does not seem to matter. I have been placing it with a click action, with an ion-item prepend, and other failed attempts.
Below is a piece of my code for my app.component.html
<ion-menu contentId="potifyMenu" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Additional Resources</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-button menuClose expand="full" (click)="map_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="block" fill="outline" menuClose ion-item (click)="complete_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="full" ion-button menuClose (click)="complete_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Cmpleted Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="full" menuClose (click)="complete_go()">
<ion-icon slot="start" name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
Figured out a solution from a past post that never showed up in my million of searches.
just needed to encapusulate the button with a toggle
"<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
"
How to toggle Menu in Ionic 4
I have the same issue as menuClose directive work perfectly in ionic 3 to control toggle. In ionic 5 use ion-menu-toggle component to toggle menu close and open on the menu item. If you don't want to add toggle menu for menu item having submenu then don't use ion-menu-toggle component on those menu items.
Ionic 5 control menu and submenu close and dropdown
Brief Explanation: I am using ionic split pane in my project. I want to decrease , increase left pane width by clicking a button.
Below is my app.html code:
<ion-split-pane>
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>
This is how my home page looks
Please guide How to achieve this.
This is given in the documentation here
<ion-split-pane [when]="showSplitPane">
...
</ion-split-pane>
and when clicking on the button you can toggle the showSplitPane variable.
I am developing an ionic app with a side menu, I want to animate the list items on the side menu when it is toggled open using animate.css. To do this when the menu is opened I add a css class to the menu items. When the menu is closed I remove the class.
I did some research and found some event listeners that were added to ionic which I tried:
<ion-menu [content]="content" class="sidemenu-header" (ionOpen)="toggleMenuState()" (ionClose)="toggleMenuState()">
<ion-header>
<ion-toolbar>
<img src="./assets/imgs/sidebar-header-icon.png" class="icon"/>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sidemenu-content" (click)="toggleMenuState()">
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"
[ngClass]="{'test-class': isMenuOpen === true}">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Now when the menu is opened the class get's added however when I click outside the menu to close the it the classes do not get removed.
How do I do this?
I have an Ionic 2 app in which a user can go from home -> 'topic view' (which contains a back button to home and a side menu like so:)
<ion-menu id="itemHierarchy-{{_pageId}}" side="right" persistent="true" [content]="content">
//toolbar stuff
</ion-menu>
<ion-header>
<ion-navbar>
<button ion-button right menuToggle="itemHierarchy-{{_pageId}}">
<ion-icon name="list"></ion-icon>
</button>
<ion-title>name</ion-title>
</ion-navbar>
</ion-header>
<ion-content #topicView padding>
</ion-content>
I have a link in the 'topic-view' page which navigates to another 'topic-view' page (pushes it onto the stack via deeplinker), and in it the new side menu doesn't open. I presume this is because there are two 'topicView' 'ion-content' nodes in the stack, but these cant be assigned a dynamic ID so not sure how to fix it... anyone?