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!
Related
I am lost with the layout of Quasar and don't understand it, although I've read the documentation of it.
The scaffolder gave me the following code. But this makes the Drawer on the left side. How can I put it to the right side?
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
#click="leftDrawerOpen = !leftDrawerOpen"
/>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-grey-1"
>
<q-list>
<q-item-label
header
class="text-grey-8"
>
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
I thought it has something to do with the letters in
However. Playing with them won't change anything.
I also tried to put the q-drawer-tag below the q-page-container, with no luck either.
How to make the drawer visible on the right side?
you can set the behavior to side="right"
https://quasar.dev/layout/drawer#QDrawer-API
<q-drawer
v-model="leftDrawerOpen"
side="right"
show-if-above
bordered
content-class="bg-grey-1"
>
<q-list>
<q-item-label header class="text-grey-8">
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
I have a simple button in ionic 4, i wan to run a function on clicking this button. but it seems like click event is not triggering.
here is html
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
ts:
export class HomePage {
text = "Lakhan"
changeText(){
this.text="Ram";
}
}
Try this:
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
Instead of using onclick you need to use click so
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
you need to change to
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
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>
While designing a next and previous button inside an 'ion-slides', these two buttons get automatically placed inside 'swiper-wrapper' class. Need to make it outside the 'swiper-wrapper' class, so that it is visible from any slide. Has any solution?
<ion-slides pager="false" #mySlider>
<ion-slide>1</ion-slide>
<ion-slide>2</ion-slide>
<ion-slide>3</ion-slide>
<ion-slide>4</ion-slide>
<ion-button class="slide-prev-btn"><ion-icon name="chevron-back" (click)="swipeNext()"></ion-icon></ion-button>
<ion-button class="slide-next-btn"><ion-icon name="chevron-forward" (click)="swipePrev()"></ion-icon></ion-button>
</ion-slides>
I do this by using position and two-line code
<div style="position: absolute;top: 50%;left: 16px;font-size: 25px;z-index: 2;" (click)="slidePrev()">
<ion-icon name="arrow-back"></ion-icon>
</div>
<div style="position: absolute;top: 50%;right: 16px;font-size: 25px;z-index: 2;" (click)="slideNext()">
<ion-icon name="arrow-forward"></ion-icon>
</div>
<ion-slides paginationType="bullets" slidesPerView="1" pager="true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
TS
#ViewChild(Slides) slides: Slides;
slidePrev() {
this.slides.slidePrev();
}
slideNext() {
this.slides.slideNext();
}
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.