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...
Related
enter image description here
when i click nav items there has an error, but the application goes well!
<a #click="$router.push({ name:'my' ,params:{username:'hello'}})">my music</a>
<a #click="$router.push({ name:'part' ,query:{name:'xx'}})">friend</a>```
I tried using a click event on a <router-link>. It works, but it is reloading the page everytime the link is clicked. I would like to avoid it but I can't figure out how.
I am aware that <router-link> does not accept a simple #click event. I saw on some forums that #click.I native would work, but as we know, that is deprecated.
So I would like to know if there is any solution other than wrapping the router link in a div and putting the listener on that div.
The reason why I want to do this is that I want to bind a class dinamicaly when the link is clicked. I have created a dropdown menu which is triggered onClick. But then when I follow a link inside that dropdown menu, the menu remains open. Therefore, I would like to have an additional #click event to dinamically bind a class (display: none) to the dropdown menu. The thing is that the items inside the dropdown are iterated which send parameters to a Vuex Mutation and therefore i can’t use regular tags and wrapping the router-links with a span or div is also not giving me the desired effect.
Thank you !
Regards,
T.
I have managed to solve the problem using a div wrapper and changing my css (that was preventing the code to work properly)
<div class="dropdown">
<a class="dropbtn" #click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
<div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
<div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" #click="dropClick">
<router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
</router-link>
</div>
</div>
</div>
If a understand your question, there is a "active-class" property on vue-router(router-link). You can set your classes dynamically by based on an active route.
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 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.
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>