I'm very new in Ionic2 or Ionic at all. I set up a new project and want to design a small menu at the bottom of the foot of my page. I didn't do anything else on this project and trying to imitate the steps of a tutorial video. but when I use the icon-only directive on a button the background of the button only becomes a bit smaller. The background doesn't disappear.
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
Here's my code. I hope you can help me.
For Ionic 4 - <ion-button fill="clear">
You can use the fill property now, e.g:
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
Adding a clear attribute should give the result you want if i understand correctly:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only clear>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only clear>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
For Ionic 4:
...
<ion-button (click)="onClick()">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
...
You can go to this link for more references https://ionicframework.com/docs/api/button
ionic 4 :
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
Related
<ion-footer>
<ion-toolbar>
<ion-row>
<ion-col col-6>
<button ion-button full color="secondary">ADD TO CART</button>
</ion-col>
<ion-col col-6>
<button ion-button full color="primary">BUY NOW</button>
</ion-col>
</ion-row>
</ion-toolbar>
ionic Footer Hiding Sometimes on Android Devices Also Toaster Notification Also hiding half In this Situation
Need to increase height of navbar using override shared variable in variable.scss
$navbar-md-height: your height;
I am a beginner in Ionic, trying to display a side menu page when users clicks on a button. Instead, what I'm still getting is the back button. Here's my code:
//menu .html
<ion-header>
<ion-navbar>
<ion-title>menu</ion-title>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
//app.html
<ion-menu [content]="content">
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
What am I doing wrong?
Intro
Ok so, ionic's navigation works like a stack. You push a component on the stack, pop it off or create a new stack.
To push a component on the stack you'll need to call (if you call your NavController navCtrl) navCtrl.push(someComponent);
To pop a component, call navCtrl.pop(someComponent);
To create a new stack, call navCtrl.setRoot(someComponent);
Why is this important?
If you want the menu-icon to show, the page has to be at the lowest level of the stack, this is in ionic called the root.
When a page is not root, the menu-icon will magically transform into a back-button, so you can go back to your root page. (f.e. when you want to see more details about an item)
Sure, not really reading anymore, but what do I need to do?
Well, first of all, just include the <ion-header> on your page, since you want to show the icon on your page. In your code, you're trying to get a menu-icon in your ion-menu (which is your sidemenu).
So you will have something like the following, create your menu in app.component.html
app.component.html
<ion-menu type="overlay" [content]="content">
<ion-content>
<button menuClose icon-only>
<ion-icon name="close"></ion-icon>
</button>
<button menuClose>
My Custom button WHOOOOO
</button>
</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>
page1.html
<ion-header>
<ion-navbar>
<ion-title>Page 1 FTW</ion-title>
<ion-buttons start>
// So this icon will change depending on the page's place in the ionic Stack
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button menuToggle>Open my great menu!</button>
</ion-content>
Now in your app.component.ts you want to make Page1 the root, this way you'll see your menu icon in the header.
This can easily be done by changing the rootPage property of AppComponent.
Simply import { Page1 } from 'your/page1/location' and call (in constructor f.e. this.rootPage = Page1;;
Now Page1 will have a menu-icon in it's header which will show your menu!
If you want to include a button which opens your menu, just add the menuToggle property to it.
Your tags seems to be in a wrong order. Can you try with code bellow?
<ion-menu>
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I would like to create tabs like these on a page:
As you see Voortgang and pijnniveau are my tabs in the page itself but if I set them like this:
export class ProgressPage {
tab1Root = HomePage;
tab2Root = SchemaPage;
and than in my html template do this:
<ion-header>
<ion-navbar color="light">
<ion-title>{{viewTitle}}</ion-title>
<ion-buttons end>
<button ion-button [disabled]="isToday" (click)="today()">Today</button>
<button ion-button (click)="changeMode('month')">M</button>
<button ion-button (click)="changeMode('week')">W</button>
<!--<button ion-button (click)="changeMode('day')">D</button>-->
<button ion-button (click)="loadEvents()">Load Events</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>-->
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>
<ion-list inset>
<ion-list-header>{{ viewTitle }}</ion-list-header>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
</ion-list>
</ion-content>
<ion-tabs color="light" tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab>
</ion-tabs>
But this will looks like this, you see the tabRoot pages under the active page:
How can I fix this?
Kindly go to your app.componet.ts file and set the rootPage to ProgressPage. (If this is the opening screen of your app)
If you are using a login screen or if you are navigating from another screen to this screen, then ensure that you are pushing the ProgressPage in the navCtrl.
Hope this helps you. Thanks.
My ionic side menu is working in android mobile but in ios i am not getting.
here is the code for .html
<button ion-button menuToggle icon-only class="menuButton">
<ion-icon name="menu"></ion-icon>
</button>
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>some menu content, could be list items</p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent ></ion-nav>
i dont understand where is my issue is if you need anything please let me know
my side menu is working in android and browser except ios
Try adding type="overlay" to the sidemenu:
<ion-menu [content]="mycontent" type="overlay">
use click function instead of menuToggle
<button ion-button icon-only start (click)="openSideMenu()">
<ion-icon name="md-menu"></ion-icon>
</button>
open menu using
openSideMenu() {
this.menuCtrl.enable(true)
this.menuCtrl.toggle();
}
disable menu before you push to new page
this.menuCtrl.enable(false)
I am developing a Mobile App using the Ionic2-Framework along with Angular2.
In a section of my app, I have several <ion-slides> with <ion-item><ion-input ...></ion-input></ion-item> on the slides.
When changing the slide, the keyboard opens up without actively touching one of the input-fields. So far, I could only test it on iOS, but I found out that it only happens for type="tel"-inputs
Is there a way to prevent the app from doing this, as I would like the users to choose the time to input by themselves.
The code of my page looks like that:
(I excluded some parts for readability)
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle [hidden]="showBackButton">
<ion-icon color="primary" name="menu"></ion-icon>
</button>
<button color="light" ion-button icon-only [hidden]="!showBackButton" (click)="goToPreviousSlide()">
<ion-icon color="primary" name="arrow-back"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides (ionSlideDidChange)="updateShowBackButton()">
<!-- Some more slides... -->
<ion-slide style="background-color: white" padding>
<h2 class="slide-title">Hello {{person.name}}!</h2>
<p>Now I need this and that information:/p>
<ion-item>
<ion-label>Day</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.day"></ion-input>
</ion-item>
<ion-item>
<ion-label>Month</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.month"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.year"></ion-input>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Height (cm)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.height"></ion-input>
</ion-item>
<ion-item>
<ion-label>Weight: (kg)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.weight"></ion-input>
</ion-item>
<button ion-button block (click)="goToNextSlide()">Next</button>
</ion-slide>
<!-- Some more slides... -->
</ion-slides>
</ion-content>
If you need futher information, please let me know! I am appreciating any hints! :)