I am trying to just hide the back button in Tab-Bar in my tab-home-page.html in ionic 4.
I have try to hide the back button, but it will hide it for the other pages.
and I have search through there, but can't find any.
Is there a way to get this done? Below is my Tab.page.HTML. Hope that some one would guide me in this.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button ion-button (click)="goBack()">
<ion-icon name="arrow-undo-circle-sharp" class="img-size"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-home">
<ion-icon name="home-sharp" class="img-size"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-profile">
<ion-icon name="link-sharp" class="img-size"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
** edit **
to navigate back to ur home page ,
just add <ion-back-button></ion-back-button> to ur header inside ur navigated page
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
this will solve ur problem of not adding a tab button for ur back page.
Related
I am working with Ionic 6, and I want to put a badge on one of my tab buttons. Simular to the first red one in this image (vuetify):
An empty badge in Ionic seems to be invisible. For now I am using this workaround, adding a char, and coloring it the same as the background. Does anyone have a better idea?
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tabQr" href="/tabs/tabQr">
<ion-icon :icon="qrCode" />
<ion-label>QR</ion-label>
</ion-tab-button>
<ion-tab-button tab="tabHome" href="/tabs/tabHome">
<ion-icon :icon="home" />
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tabVisit" href="/tabs/tabVisit">
<ion-icon :icon="clipboard" />
<ion-label>Visit</ion-label>
<ion-badge color="danger" style="color: red">-</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tabNfc" href="/tabs/tabNfc">
<ion-icon :icon="radio" />
<ion-label>Sensor</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
Thanks!
I'm building a tabs page with Ionic 6 and Vue.js 3 but I cant use the router-link in the button and I dont understand why...
The following example doesnt work
<ion-tab-bar slot="bottom">
<ion-tab-button tab="details" :router-link="{ name: 'details' }">
<ion-label >Details</ion-label>
</ion-tab-button>
</ion-tab-bar>
The router link works on regular buttons...
<ion-button :router-link="{ name: 'details' }">Details</ion-button>
I have a patch for the time being, which is adding the router link to the label instead, but I need to be very precise when I click as if I click on the image it doesnt work...
<ion-tab-bar slot="bottom">
<ion-tab-button tab="details">
<ion-label :router-link="{ name: 'details' }">Details</ion-label>
</ion-tab-button>
</ion-tab-bar>
I have a second issue when changing between tabs...
I believe when I click on a tab it should appear immediately, but the new tab fades in...
I have a created ionic tabs with icons. Icons are correctly displayed for Android 7 and above, But below Android 6, few icons are not getting displayed. Below is the screenshot for the same.
I am using ionic 5 and capacitor version 2.1.2
i tried with reorder and list. Both these icons are not shown for below android 6. Above android 7 it works.
Am i missing something?
Android 6 screenshot :
Android 7 and above
Tabs code :
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<!-- <ion-icon name="pricetag-outline"></ion-icon>-->
<ion-icon name="pricetag"></ion-icon>
</ion-tab-button>
/*Using the SVG locally, still doesn't display for android 6 and below. Works fine for Android 7 and above.*/
<ion-tab-button tab="tab2">
<!-- <ion-icon name="reorder-four-outline"></ion-icon>-->
<ion-icon class="staticIcon" src="/assets/icon/list.svg" ></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab3">
<!-- <ion-icon name="location-outline"></ion-icon>-->
<ion-icon name="location"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab4">
<!-- <ion-icon name="person-outline"></ion-icon>-->
<ion-icon name="person"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Try this:
<object type="image/svg+xml" data="/assets/icon/list.svg">
Your browser does not support SVG
</object>
I am using ionic 4. I want to ask if I want to send value to side menu then when I open the menu the value is already at side menu. Now I need to open the side menu then click one time to show the value. Can I know how to do it? Here is my code. Thank you
app.component.html
<ion-menu side="start" (click)="onOpen()">
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item lines="none">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>{{text}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
I put the onOpen() method at app.component.ts
onOpen() {
this.text = "my pass value";
}
If you want something triggered when the menu is opened you need to handle the ionWillOpen or ionDidOpen events:
ion-menu - Ionic Documentation
An example of this would look like:
<ion-menu (ionWillOpen)="onMenuOpen()" (ionDidOpen)="menuOpened()">
I am trying to use a single menu for both LTR and RTL but the issue I am facing when its RTL then the menu is opening from the left side which should be from the right side
I don't believe you can use a single menu for both RTL and LTR swiping behavior. You could instead, use a service that would populate the menu information with a *ngIf=let link of links", and then just have a menu on either side of the app that subscribes to the links provided in the service.
The attribute side="end" or side="start" controls which side of the app the menu will appear on, so if you want to swipe from the right side of the screen you'd use slide="end" on your ion-menu.
<ion-menu side="end" contentId="mainContent" menuId="slidingMenu" id="slidingMenu">
<ion-header>
<ion-toolbar>
<ion-title>{{(menu?.details | async)?.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item class="item-mute">
<ion-label>Mute</ion-label>
<ion-toggle></ion-toggle>
</ion-item>
<ion-item *ngFor="let link of (menu?.details | async)?.links" detail
(click)="navToPage(link)">{{link?.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>