Its been two days I am searching for a solution to replace ion-tabs icons with png, I have found many answers in stack also but it's not working with ionic-4.
I have followed this answer from ransoing in this link
its working when using SVG and with black fills only. however I would like customized image with multicolor in png format.
the solution from ransoing on the link i provided was working. it was just my browser cache thats making the issue
you can use ionTabsDidChange event
<ion-tabs (ionTabsDidChange)="tabChange($event)">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<!--<ion-icon name="flash"></ion-icon>-->
<img src="../../assets/icon/tab/course_on#3x.png" *ngIf="selectTab==='tab1'">
<img src="../../assets/icon/tab/course_off#3x.png" *ngIf="selectTab!=='tab1'">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<!--<ion-icon name="apps"></ion-icon>-->
<img src="../../assets/icon/tab/record_on#3x.png" *ngIf="selectTab==='tab2'">
<img src="../../assets/icon/tab/record_off#3x.png" *ngIf="selectTab!=='tab2'">
<ion-label>Tab2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
selectTab = 'tab1';
tabChange(e) {
this.selectTab = e.tab;
}
Related
PROBLEM:
I have set the slot property for the ion-tab-bar to "bottom", however the ion-tabs seem to position themselves inside an ion-card element and when scrolling through the ion-card content to read more, the tabs scroll with the content.
I have tried using CSS to make the ion-tabs position: fixed, but that stops the content scrolling altogether (Cannot read all of ion-card contents).
Does any one know a fix for this? Any help is appreciated, thanks.
BACKGROUND:
CLIP OF PROBLEM: https://streamable.com/m650o
about.page.html:
<ion-content>
<ion-card class="aboutcard">
<ion-img src="assets/pic1.jpg"></ion-img>
<ion-card-header>
<ion-card-title>About Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<ion-card-content>BOUTIQUE Immigration Lawyers of London have
‘years of specialist Legal experience at your disposal’
<br>
Established in 1998 as a niche human rights firm – we have a trusted record of excellent service. BOUTIQUE are
frequently recommended by a long list of happy clients.
We are passionate about our work and dedicated to achieving life-changing results.
<br>
OUR PROMISE
<br>
“If you come to BOUTIQUE, you will get the result you want.
If there is a way, we find it and do it for you.
If there is no way we tell you, and don’t waste your time.
Where there is a way, we will deliver.”
Lawrence Lupin – Founding Director
</ion-card-content>
</ion-card>
<ion-tabs slot="fixed">
<ion-tab-bar slot="bottom">
<ion-tab-button class="activeTab">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()" class="adjustHeight">
<ion-icon name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button (click)="contact()" class="adjustHeight">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
Update: Fixed this.
To fix you need to put the ion-tabs outside of the ion-content, and wrap it in an ion-toolbar.
This way the ion-tabs are separate from the content and by wrapping it in to an ion-toolbar you reduce the "click-zone" as ion-tabs "click-zone" takes up the whole page and can lead to other issues such as (click) events not firing.
Best of luck to whoever sees this.
I have images stored in Google Cloud Storage and used in an Ionic / Angular app. The images are shown as a background of a div element. They're mostly showing ok but in some cases, the image is missing. And it's consistently specific images that are missing - not others - no matter how many times the pages are reloaded.
Right-clicking on the background image to get the background URL and then pasting that URL in the browser results in the image displaying fine.
The scss code contains the basics styling of the image and the background image URL is added inline within the HTML file.
item.scss
offer {
.card-image{
background-color:lightgray;
background-position:center;
background-size:cover;
height:10rem;
width:100%;
}
}
item.html
<ion-card>
<div class="card-image" [ngStyle]="{ 'background-image' : 'url(' + offer?.imageUrl + ')' }">
</div>
<ion-item text-wrap>
<h2 text-wrap>{{ offer?.name }}</h2>
<p>{{ offer?.provider }}</p>
</ion-item>
<!--
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button ion-button icon-left clear item-end>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
-->
</ion-card>
And here's what it looks like rendered with the middle item's image absent...
Ok, I think I see the problem. After a bit of head-scratching, it turns out that there was some error with escaping the URL of the background image. So any image with a space in its name was absent.
Solution: change the file names to avoid spaces or escape URL's. It's now working as expected!
I want to customize the view-title of an ion-view so that the title appears 4 letters in red and 4 letters in white. How do I do this?
For example I use a template like this:
<ion-view view-title="HelloWorld">
Now I want that Hello appears in red color and world in white color.
My main problem is that I can't get an access via css to the view-title.
Try this,
<ion-view>
<ion-nav-title>
<span style="color:red">Hello</span>World
</ion-nav-title>
</ion-view>
This solves the problem of modifying the view-title:
<ion-nav-title>
<span class="red">Hello</span>World
</ion-nav-title>
In addition to iDeekshith's answer and for future people, you can also add an image to the header (your app's logo perhaps).
<ion-nav-title>
<div>
<span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
Your App Title
</div>
</ion-nav-title>
I have following code:
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
</ion-nav-buttons>
Which producing following output:
I would like to change used icons for the custom icon (48×48 px).
How can I do it in right way in Ionic?
I tried to follow the instructions in this topic, but without luck.
Exist easy way to solve your problem, just put in your .js this:
$ionicConfigProvider.backButton.icon('my-back-button');
(Please see $ionicConfigProvider documentation here)
and your css:
.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 35px;
}
You can run this example in this LINK
Another solution can be this (using only CSS):
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
and your css:
.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 48px;
}
See this example here.
Note: A ionic blog in some way suggests using icon-fonts, but from my point does not make sense when there are few icons. Please read this link.
I hope this information is useful to you.
Just do it! :)
<ion-nav-back-button class="button-clear ion-chevron-left">
</ion-nav-back-button>
Use the class="" attribute to set your custom icon.. In this case, i have used the ion-chevron-left (to be like your example)..!
But if you want to change the default text too.. you can do it different:
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back Text
</ion-nav-back-button>
Ref: http://ionicframework.com/docs/api/directive/ionNavBackButton/
If you are using ionic 5
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button icon="chevron-back-outline"></ion-back-button>
</ion-buttons>
<ion-title class='text-center toolbar-text'>Title</ion-title>
</ion-toolbar>
It may be late for the answer but for the latest version of ionic(5.4.16) at this date
following way would save much time
<ion-nav-buttons side="left">
<button text="" icon="chevron-back-outline" ng-click="goBack()"></button>
</ion-nav-buttons>
hope it will help someone
I have to image with the following code:
echo '<div class="thumb" style="width: '.$array['thumb_width'].'px; height: '.$array['thumb_height'].'px;">
<a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['before_image_id'].'" >
<img src="showthumbs.php?image_id='.$array['before_image_id'].'"/">
</a>
<a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['after_image_id'].'" >
<img src="showthumbs.php?image_id='.$array['after_image_id'].'"/">
</a>
</div><p><p/>';
The issue is that it is displayed separately in the lightbox. I want it to show two image side by side in one lightbox.. How do I do this?
There are 2 options, depending on the lightbox you're using:
Some lightboxes (colorbox, DOM window, facybox, thickbox) support loading html pages into an iframe rather than just images. If you can try loading html with the two tags into the lightbox.
If you have a lightbox that only supports images (like squarespace's crappy lightbox) you may have to merge the images together using PHP's GD library.
See this question:
Merge Two images together on Server, then save