I'm using ion-avatar and ion-icon inside my ion-navbar toolbar. The problem is it keeps the avatar image and the icon on back pressed page transition. I'm thinking those items are not being animated properly. Here is my code
<ion-header>
<ion-navbar>
<ion-avatar item-left>
<img [src]="user?.getPicture()" alt="">
</ion-avatar>
<ion-title>{{ user?.getFirstName() }} {{ user?.getLastName() }}</ion-title>
<ion-icon name="md-more"></ion-icon>
</ion-navbar>
</ion-header>
user is a data from the server.
Thanks in advance.
Related
I am using collapsable header in my ionic 5 app. I am getting this white space between my ion-header and ion-content when I swipe down on my page.
My code looks like below:
<ion-header [translucent]="false" no-border>
<ion-toolbar>
<ion-title>
Requests
</ion-title>
<ion-buttons slot="primary">
<ion-button class="person-icon" (click)="showProfile()">
<ion-icon slot="icon-only" name="person-outline" mode="md" color="light"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense" no-border>
<ion-toolbar color="primary">
<ion-title size="large">Requests</ion-title>
</ion-toolbar>
<ion-searchbar class="ion-text-left" style="padding-bottom:0px;" mode="ios" [(ngModel)]="searchReq" animated type="search" placeholder="Search"></ion-searchbar>
</ion-header>
....
Any idea what am I doing wrong or how I can remove that white space or lock my collapsable header with main header?
My app UI is complex so I'm giving an example to illustrate my problem. On Ionic 5 I have this code taken directly from the official docs
<ion-header translucent="true">
<ion-toolbar>
<ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button>
</ion-buttons>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button>
</ion-buttons>
<ion-title size="large">Settings</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
...
</ion-content>
If I set the color of the toolbars in a way like <ion-toolbar color="primary"> I get something like this
How can I set the color for the space above the colored toolbar?
Had the same issue as well, controlled all my toolbars css from the global.scss to set background color:
ion-toolbar {
background: var(--ion-color-primary) !important;
}
where
--ion-color-primary is my desired color
I'm working on a project and i simply need make this type of navigation menu in my app main page.
But if i use png image to a card that getting auto zoom and getting ugly look. That is what i am talking about
This news icon png is 50px image. I want display this as small icon. I am not using ionic provided icon because they have very limited icon list. Therefor i used other icon. If i go with ionic icons how i can resize their icon as i want?
Here my codes
<ion-content padding id="myPage">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-card color="secondary">
<img src="../../assets/imgs/News_50px.png" class="" alt="" />
<ion-card-content text-center>NEWS</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card>
<img src="../../assets/icon/icons8-handshake-96.png" class="" alt="" />
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
What i can do for make my app look likes above i mentioned app look and can i resize my card height and width as i want?
If you go with your png just use css.
For example:
ion-card img { width: 20%; height: 20%; }
For this apporach the images should have the same initial width and height, otherwise you need to do it with a custom class on each image and put it the size you need.
If you want to use ionic icons you can give them another size with the font-size, e.g 1.5em. Than you can check the size of the window and resize it in css. If width > 800 px, font-size: 1.8em and so on... (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
For some reason Ionic think that my page has content and is adding in a scrollbar. Here is my page:
And the code for the page:
<ion-header>
<ion-navbar>
<ion-title>Week</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="createPage()">
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
I found this thread here which tells you how to remove the scroll bar, which I can do but I want to track down what is causing it to appear in the first place.
Any ideas are appreciated. Thanks.
I want to add animation like fade-slide-in-right or slide from bottom to my ion-list item in ionic Framework Application.
So please give me hint to implement this.
I have use following code but it hides my list on device using animate.css
<ion-content>
<ion-list>
<ion-item class="item-avatar animated zoomInDown list-card" collection-repeat="list in listitem" href="#/app/listitems/{{listitem.id}}">
<img src="{{list.Icon}}">
<h2>{{list.ETitle}}</h2>
<p>{{list.LTitle}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-content>
<div collection-repeat="name in names">
<ion-item class="animated zoomInDown list-card">
<div class="main">{{name.main}}</div>
<div class="desc">{{name.desc}}</div>
<div class="time">{{name.time}}</div>
<div class="img-holder"><img ng-src="{{name.img}}"></div>
</ion-item>
</div>
</ion-content>
zoomInDown animation is from Animate.css library and stagger animation from ngAnimate
Here is a working example. Click on the cards-list button to start the view and list animation.