Is there a way to change the default white background of ion-item-sliding (https://ionicframework.com/docs/api/item-sliding) in ionic 4?
change the background of ion-item not the ion-item-sliding
page.html
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
<ion-item-option color="danger" (click)="share(item)">Share</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
page.scss
ion-item{
--background: red;
}
Related
I am trying to have a red button in an ion-item-sliding element in Ionic 4. Here is the code:
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p>test</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<button ion-button color="danger">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-card>
However, the button shows in gray while it should be red. I also tried using ion-button instead of button. It worked, but when I coupled it with expand="full" the color of button's text turned red instead of the color of button itself.
Use the defaut button is working fine:
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p>test</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" expandable>
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
Hope it helps you :)
I have a requirement where in i need to wrap ionic chips within ion-item of ion-list.
Below is the code for it.
<ion-content>
<ion-list>
<ion-item *ngIf="showLayout" class="wrapname">
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-item>
</ion-list>
</ion-content>
Below is the scss code for it.
.wrapname{
word-wrap: break-word;
white-space: pre-wrap;
width:100%;
}
I have used word-wrap,but still its not working.
Am i going wrong somewhere??
In Ionic 4 to get <ion-chip> items to wrap inside of <ion-item>, you need to put them inside of a <ion-label text-wrap class="ion-text-wrap">. So in your example, you'd do the following:
<ion-content>
<ion-list>
<ion-item *ngIf="showLayout">
<ion-label text-wrap class="ion-text-wrap">
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
I ran into this same problem and wrapping the ion-chip inside ion-label resolved the issue for me. đź‘Ť
You can simply achieve this with the help of *ngFor
Check below code :
.ts:
items = ["Test","Test1","Test12","Test123", "Test1234", "Test12345", "Test123456", "Test1234567", "Test123456", "Test12345", "Test1234", "Test123", "Test12", "Test1", "Test"];
.html:
<ion-content padding>
<ion-chip *ngFor="let item of items;" color="danger" item-content style="margin-left: 10px;">
<ion-label > {{ item }}</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-content>
Will create a list of chips as below :
StackBiz Demo: https://stackblitz.com/edit/ionic-vscljq
Hope this will helps.
Example on android/Browser
Works Fine on Android
Example On Ios
Not work as well
page.html
<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
<ion-navbar color="ticket-blue-rainbow" >
<ion-row>
<ion-title> {{ evento.descricao }}</ion-title>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
<ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
<ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
</ion-row>
</ion-navbar>
</ion-header>
page.scss
.padding-icon {
padding-right: 15px;
font-size: 20px;
}
To overcome above issue you need to use below option with <ion-buttons> tag
<ion-buttons right>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right
(click)="likeEvento()"></ion-icon>
</ion-buttons>
It will work and show your buttons on right side.
<ion-header>
<ion-navbar>
<ion-title> {{ evento.descricao }}</ion-title>
<ion-buttons right>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
<ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
<ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
</ion-buttons>
</ion-navbar>
</ion-header>
I don’t no if this method is the most correctly, but in this situation i use this class on ios
.ios {
page-event
{
.padding-ios{
padding-left:70%!important;
}
}
}
and on html i used
<ion-buttons right class="padding-ios">
</ion-buttons>
I would like to have an ion-item inside a list with a word centered between two icons (one on left side and one on right side) like this:
I'm not able to achieve this goal, because I have something like that:
This is my code:
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<b>Woman</b>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
How can I have something like in the first image where the text it's centered correctly?
You can use text-align property for center your text like below
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<ion-label class="centerlabel">Woman</ion-label>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
SCSS
.centerlabel {
text-align: center;
}
Hope this will helps!
(Posted solution on behalf of the question author).
<ion-list>
<ion-item>
<ion-row>
<ion-col col-1 style="text-align: left;">
<ion-icon name="lock"></ion-icon>
</ion-col>
<ion-col col-10 style="text-align: center;">
<b>Woman</b>
</ion-col>
<ion-col col-1 style="text-align: right;">
<ion-icon name="lock"></ion-icon>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
try this
<ion-list>
<ion-item >
<ion-icon item-left name="lock"></ion-icon>
<div text-center><b style="margin-left: -20px;">Woman</b></div>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
</ion-list>
I'm trying to replicate the sliding list as seen on the Official Docs. The list shows up but there is no divider. The docs says that the divider/border shows by default, but it is not showing.
This is the template:
<ion-content padding>
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-avatar item-start>
<img src="../assets/imgs/logo.png">
</ion-avatar>
<h2>Slimer</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary">
<ion-icon name="text"></ion-icon>
Text
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon>
Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-avatar item-start>
<img src="../assets/imgs/logo.png">
</ion-avatar>
<h2>Slimer</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary">
<ion-icon name="text"></ion-icon>
Text
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon>
Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Hello DevApp!
</ion-content>
This is what I get:
You are using ion-list for each ion-item-sliding. May be this is a typo. All ion-item-sliding should have single parent ion-list
<ion-content padding>
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-avatar item-start>
<img src="../assets/imgs/logo.png">
</ion-avatar>
<h2>Slimer</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary">
<ion-icon name="text"></ion-icon>
Text
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon>
Email
</button>
</ion-item-options>
</ion-item-sliding>
<!-- Remove these lines -->
<!-- </ion-list> -->
<!-- <ion-list> -->
<ion-item-sliding>
<ion-item>
<ion-avatar item-start>
<img src="../assets/imgs/logo.png">
</ion-avatar>
<h2>Slimer</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary">
<ion-icon name="text"></ion-icon>
Text
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon>
Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Hello DevApp!
</ion-content>