I came across this problem. I tried to find the css in chrome debugger, but no luck. I don't see the cross button like the documentation.
This is the open icon before I press the fab.
But the closing icon is missing or I can't find it.
Here is the html
<ion-fab bottom right>
<button class='waiterButton' ion-fab>
<ion-icon id='waiterIcon' name='custom-waiter'></ion-icon>
</button>
<ion-fab-list side="top">
<button class='callButton' ion-fab>
<ion-icon id='callIcon' name='custom-bell'></ion-icon>
</button>
<button class='billButton' ion-fab>
<ion-icon id='billIcon' name='custom-bill'></ion-icon>
</button>
</ion-fab-list>
</ion-fab>
I have the ionicon in my package.json
"ionic-angular": "3.9.2",
"ionic2-super-tabs": "^4.1.4",
"ionicons": "3.0.0",
In variable.scss
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/
#import "ionic.ionicons";
Related
How can I recreate an ionic5 button that would look like defined in my old ionic3 app syntax.
<button ion-button color="light" clear (click)="foo()">
TEXT {{bar}}
<ion-icon name="md-arrow-round-up" large></ion-icon>
</button>
If I copy paste this code into my ionic5 app the button would be not formatted but just plain white the default browser button.
Here is what you want:
<ion-button color="light" fill="clear" (click)="foo()">
TEXT {{bar}}
<ion-icon mode="md" name="arrow-up" size="large"></ion-icon>
</ion-button>
You can see the new docs here.
I employ an ionic range in my code with two icons at the beginning and the end. But these two icons didn't show up - only the range showed up. I have looked up their offcial document (https://ionicframework.com/docs/api/range) and here's my code (I basically copy their code):
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating"></ion-range>
<ion-icon slot="start" size="small" name="sad"></ion-icon>
<ion-icon slot="end" name="happy" ></ion-icon>
</ion-item>
Ionic document sometimes sucks and I really need someone to help me out.
You need to add icons inside ion-range tag and for the left icon add range-left attribute to the ion-icon tag and for the right icon add range-right attribute the icon as below.
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating">
<ion-icon range-left size="small" name="sad"></ion-icon>
<ion-icon range-right name="happy" ></ion-icon>
</ion-range>
</ion-item>
StackBlitz
I'm creating an ionic 4 application. using the Tab component to present 3 tabs. the default color of the tab component in ionic is blue. the default background color is white. I would like to change and choose another background color.
The documentation offer to add:
:root {
--ion-tab-bar-background: red; // or some other color
}
It did not work for me.
I also tried to modify variables.scss in theme folder in ionic 4 application
this also did not work for me.
I also read other posts in SOF but nothing succeeds or relevant to ionic 4
for example this post:How to change the background color of tab bar and tab icon in Ionic 4 offer solutions that did not work for me
my basic template:
<ion-tabs main color="primary">
<ion-tab-bar slot="top" >
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>tab2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>tab3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-header>
<ion-toolbar>
<ion-title>
home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card class="welcome-card">
<ion-img src="./../../assets/background-for-baby-picture.jpg"></ion-img>
<ion-card-header>
<ion-card-subtitle>guide</ion-card-subtitle>
<ion-card-title>welcome</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>info </p>
</ion-card-content>
</ion-card>
<ion-list lines="none">
<ion-list-header>
</ion-list-header>
</ion-list>
</ion-content>
Menu Example:
I am just starting out with Ionic and am not really sure why the two icons in the top left-hand corner are stacking and staying tiny. I have read through all docs and forums, however, I haven't seemed to come across a solution. Thanks in advance.
<ion-header no-lines>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons icon-left start>
<!-- Float the icon left -->
<button ion-button icon-start>
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
<ion-buttons icon-right end>
<!-- Float the icon right -->
<button ion-button icon-end>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I landed on this after copy & pasting some Ionic 3 code into my Ionic 4 project.
The best answer I can suggest is to have a look at the documentation for Ionic 4! A lot of what you've done is not Ionic 4, but Ionic 3.
Take the button docs for example: https://ionicframework.com/docs/api/button Your button won't work, because you must use something like:
<ion-button color="primary" fill="clear" expand="block" (click)="deleteRecord(i)">
<ion-icon name='trash'></ion-icon>
</ion-button>
Also, for the positioning, also look at the documentation. You should be using the slot property. for example:
<ion-chip outline="outline" color="primary" slot="start">
<ion-label> Job id : {{ interv.ts % 1000000}} </ion-label>
</ion-chip>
Note that in the two snippets above, I used different properties to determine the outline / fill. That's because the documentation told me to. So while it may not be entirely consistent, it is documented and for the most part, it works.
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>