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>
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 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>
Here's a picture of the problem: http://i55.tinypic.com/29g0izc.jpg
Problem Site: http://windowsphonedaily.blogspot.com/
I have my tweet and like button setup at the header of each new article underneath the title. It works extremely well with Chrome and Firefox. But I noticed that in IE9 both buttons are forced to the left and that the actual tweet button is missing. You can see in the above picture the comparison between FF4, Chrome 11, and IE9.
Does anyone know how to fix this without breaking it in the other browsers? Here is the code I have used to set up the buttons.
<div class='post-header'>
<table>
<div class='post-header-line-1'/>
<!-- Facebook's Like Button -->
<div style='float:right;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='arial' href='' layout='button_count' show_faces='false' width='10'/></div>
<!-- Twitter's Tweet Button -->
<div style='float:right;'><a class='twitter-share-button' data-count='horizontal' data-via='WinPhoneDaily' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span></table>