i started a project with tab template which i then later decided to add a side menu. the trouble is the side menu does not appear at all. here is my app.components.html looks like
<ion-app>
<ion-split-pane>
<ion-menu side="start">
<ion-header translucent>
<ion-toolbar color="secondary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-split-pane>
</ion-app>
actually after doing above my actual page comes for a brief second and shows a white page due to this.
in the console i see an error
sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.
but i already have content element.
Sirius2013 is correct, you will need to use the contentId attribute.
See a working example below:
App.component.html
<ion-app>
<ion-menu contentId="content1" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
menu stuff
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
AnyPage.html
In the page you want to show your side menu, you can use the ion-menu-button tag.
See this example:
<ion-header>
<ion-toolbar>
<ion-title>Page Title</ion-title>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
Set the autoHide tag to false, so you will always see the menu button.
Docs:
https://beta.ionicframework.com/docs/api/menu-button
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
https://beta.ionicframework.com/docs/api/menu
Try to use contentId attribute.
Related
I've made a custom toolbar component:
<ion-toolbar>
<ion-title color="black" size="small"><strong>Account Information</strong></ion-title>
<ion-buttons slot="start">
<ion-back-button (click)="return()" color="green" defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-content></ion-content>
</ion-toolbar>
If I reuse this toolbar in different places in my app, can i customize the content of it somehow?
for example, how can I add a save button to it in a page where i use the
toolbar component?:
<ion-header class="ion-no-border">
<app-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="save()" color="green">
Save
</ion-button>
</ion-buttons>
</app-toolbar>
</ion-header>
<ion-content>
<ion-grid>
...
In this example the save button doesn't show up
I'm trying to show a back button in the toolbar of one page.
Below is excerpt of my code.
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [text]="" [icon]="arrow-back"> </ion-back-button>
</ion-buttons>
<ion-title>
About
</ion-title>
</ion-toolbar>
If I set the defaultHref attribute, it works but I will not have ability to use my custom back button with text and icon.
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"> </ion-back-button>
</ion-buttons>
<ion-title>
About
</ion-title>
</ion-toolbar>
How do I make it work. Could anyone please help?
If you are trying to use a custom header (like me), this is the workaround that I found pretty easy to implement and works like it's supposed to.
/components/custom-header.html
<ion-toolbar>
<ion-buttons slot="start">
<ng-content></ng-content>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
And the usage will be like:
/pages/home-page.html
<ion-header>
<custom-header>
<ion-back-button></ion-back-button>
</custom-header>
</ion-header>
This is working in my project ..
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text=""></ion-back-button>
</ion-buttons>
<ion-title>About</ion-title>
</ion-toolbar>
</ion-header>
There is an open issue on the github page about the fact that ion-back-button won't display in non ion-header containers such as custom components. However, you can work around this with css.
.can-go-back ion-back-button {
display: block;
}
GitHub issue open since 2019: https://github.com/ionic-team/ionic-framework/issues/17039
I had the same problem as yours, I have managed to remove the <ion-back-button> and made a custom button like this:
<ion-toolbar>
<ion-buttons slot="start">
<ion-item lines="none" routerLink="/home">
<ion-img src='path-to-your.png'></ion-img>
</ion-item>
<ion-text>About</ion-text>
</ion-buttons>
</ion-toolbar>
Then adjust the style. A little bit of work but it's worth it.
i find it works cleaner this way..by using the same ion-button but with an icon inside..its cleaner this way and works just normal..all you need to do is change the route to the previous route
<ion-buttons slot="start">
<ion-buttons slot="start" routerLink="/payment">
<ion-icon name="chevron-back-outline" class="xdsffdd"></ion-icon>
</ion-buttons>
</ion-buttons>
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 am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (not exact same, however the important part is how to get that first block with such a picture and some text), with custom color for the entire toolbar etc?:
My application looks like following:
My app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="{{p.name}}"></ion-icon>
{{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>
You can do it just adding some standard HTML code, and with CSS you can customize the style. Create the CSS Class rules in the .scss file. Rember to import
#import "build/app.html"; in the app.core.scss file. You'll find other information to personalize your app there
And for display the first block part you can add your code before the ion-list of the menu and after the tag <ion-content>.
You can delete this part, so it's more easy to create your custom layout.
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
The code will be:
<ion-menu [content]="content">
<ion-content>
<!--Here you can add all the code
you want, so you can display whatever you want-->
<!--Menu list-->
<ion-list class="menuList">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
If you need some more help, don't hesitate to ask.