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
Related
I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks
<ion-list>
<ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
<ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:
<ion-list>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage1();">Go page 1</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage2();">Go page 2</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage3();">Go page 3</ion-button>
</ion-label>
</ion-item>
</ion-list>
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/
Example Usage:
<ion-item text-center>
<button ion-button>click me</button>
</ion-item>
If you don't want the whole item content to be centered you can use css to center just the button.
e.g. wrapping the button with a text-center wrapper div inside the ion-item
Ionic Framework Center button within ionic item
I used this method
<ion-grid>
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-button>
Login
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I’m using IONIC 3.19.1.
<ion-content padding>
<ion-list>
<button ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</button>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
in the above code snippet the <h2>{{shift.operatorCode}}</h2> <p>{{shift.date}}</p> are note rendering. Pls see the attachment.
Thanks.
You are putting the HTML inside a button with the ion-item attribute. Change it to just using the ion-item element and if you need click handling the you can use the binding.
Should look something like this:
<ion-content padding>
<ion-list>
<ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</ion-item>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
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.
Is there a simple way to make ion-cards swipe rather than stack vertically one above the other?
I currently have the cards stacking vertically using this code:
<ion-content class="outer-content speaker-list">
<ion-card *ngFor="#speaker of speakers" class="speaker">
<ion-card-header>
<ion-item>
<ion-avatar item-left>
<img [src]="speaker.profilePic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<button ion-item *ngFor="#session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</button>
<button ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</button>
</ion-list>
</ion-card-content>
<ion-item>
<button (click)="goToSpeakerTwitter(speaker)" clear item-left>
<ion-icon name="logo-twitter"></ion-icon>
Tweet
</button>
<button (click)="openSpeakerShare(speaker)" clear item-right>
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>
I am looking for a simple way to get them to swipe rather than stack. There are various plugins that do Tinder like swiping cards but I was wondering if there is a setting that can be given to ion-card to make the cards do a simple swipe (I am not looking for the Tinder visual effect) like a carousel.
I am using ionic V2.