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.
Related
im having troubles trying to customize the sidemenu which ionic generates automatically.
The sidemenu is located at "app.component.html" and it looks like it follows:
<ion-app>
<ion-menu contentId="content1" side="start" >
<ion-header >
<ion-toolbar >
<ion-avatar>
<img [src]="image">
</ion-avatar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main ></ion-router-outlet>
</ion-app>
i've tried to use the attribute "style:background-color:#000000" etc to change the style and it works if i put it on every element , but i would like to know if there is some easier and efficient way to customize the sidemenu.
Thank you team!
The first thing you need to know is in ionic '<ion-content>', '<ion-list>' is directives. You can manipulate these directive's template design using css.
for Eg.
In HTML-
<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</div>
In Your Application's Global css file which is app.scss
.side-nav-menu{
//add style if you want any...for eg border, shadow.etc
}
.side-nav-menu .ion-item{
//style for ion-item
}
NOTE:- Remember the directives(attributes) name is also the class name of the same directive. for eg. if the directive name is ion-item and you want to add custom css to this directive than you have to add css using .ion-item class in global scss file
<ion-content class="abc">
</ion-content>
use content class to change background this way
.abc {
--background: var(--ion-background-color,linear-gradient(to left,#E67D22, #1C4577)) !important;
}
or use only color instead of gradient
.abc {
--background: var(--ion-background-color,red) !important;
}
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)
I am using ionic 3.
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-footer>
<ion-title>
{{ title }}
</ion-title>
</ion-footer>
What ever I put in "ion-content" there is no scroll when content overcome height of the screen.
I tried with grid in content:
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-12 class="left-col">
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
</ion-row>
</ion-grid>
Also tried with list:
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
...
</ion-list>
Nothing works. What is the catch here ?
I think this should be handled automatically by Ionic.
To enable vertical scroll to your page or any other container, there is a tag called
<ion-scroll scrollY="true">
// your content here
</ion-scroll>
To enable horizontal scroll, just change scrollY=true to scrollX=true
in your sass file add the following :
ion-scroll {
white-space: nowrap;
height: 500px;
}
The real problem is that ionic global CSS property was overridden in the project.
"scroll-content" class must not be changed in project styles.
You can use 'ion-list' property in CSS and change this:
ion-list
{
overflow-y: scroll;
};
Also, if doesn't change yet, you can put '!important' after, like this:
ion-list
{
overflow-y: scroll !important;
};
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.
I need to position two checkboxes inline next to each other with their belonging
label on the left of each checkbox.
Here is picture for better understanding: (on picture there is an e-mail checkbox which does not exist in app so just ignore it, there should be only two checkboxes)
Everything I tried so far didn't gave me wanted output so this is a code which I have now in the app.
This is in my form element:
<ion-item>
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls"
[ngModel]="(contact$ | async).receive_calls">
</ion-checkbox>
</ion-item>
<ion-item>
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages"
[ngModel]="(contact$ | async).receive_messages">
</ion-checkbox>
</ion-item>
I won't provide style code because it does not work at the moment.
You can replace the <ion-item>-elements with <div>'s, to get away from the extra styling you get from the <ion-item> elements. Also i wrapped the checkboxes in an outer <div>:
HTML:
<div>
<div float-left class="my-checkbox">
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls">
</ion-checkbox>
</div>
<div float-right class="my-checkbox">
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages">
</ion-checkbox>
</div>
</div>
SCSS:
.my-checkbox {
display: flex;
align-items: center;
}
RESULT:
You can use instead of
<ion-item>
<span>SMS </span>
<ion-checkbox></ion-checkbox>
</ion-item>