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>
Related
Having problems trying to nest lists, I expected them to be inset the further down they go, but instead I've got a complete mess as you can see in the screenshot below.
Here's the code:
<ion-content padding>
<div *ngIf="categories && categories.length > 0; then validContent else noContent"></div>
<ng-template #validContent>
<p>Please select the categories you wish to receive content for.</p>
<form (ngSubmit)="processForm($event)" id="userForm" class="ssp__form">
<ion-list lines="none" no-padding>
<ion-item lines="none" *ngFor="let category of categories">
<ion-label>{{ category.name }}</ion-label>
<ion-checkbox [name]="category.slug" [(ngModel)]="submissionData[category.term_id]"></ion-checkbox>
<ion-list inset="true" style="width:100%;" lines="none" no-padding *ngIf="category.children.length > 0">
<ion-item *ngFor="let subCategory of category.children">
<ion-label>{{ subCategory.name }}</ion-label>
<ion-checkbox [name]="subCategory.slug" [(ngModel)]="submissionData[subCategory.term_id]"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
<ion-button type="submit" style="width:100%;" color="primary" expand="block">Save Categories</ion-button>
</form>
</ng-template>
<ng-template #noContent>
<ion-card>
<ion-card-header>
<ion-card-title style="text-align: center; font-size: 14px;">No Categories Found.</ion-card-title>
</ion-card-header>
<ion-card-content>
<p style="text-align: center">There are no categories for you to read at this time.</p>
</ion-card-content>
</ion-card>
</ng-template>
</ion-content>
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.
I'm getting a problem using ion-slides on Ionic 3.
It's using all my screen size, but when i scroll down there is all my stuft and it is ok, but i need those slides be smaller
This is my code:
<ion-header>
<ion-navbar>
<ion-title>
Productos
</ion-title>
<ion-buttons end>
<button (click)="reloadProducts()" style="background:none" ion-button round full large text-center icon-right> <!--(click)="imeiViewer()"-->
<ion-icon name="cart"></ion-icon>
<ion-badge *ngIf="itemInfoHeader.length > 0" id="cart-badge">{{itemInfoHeader.length}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager>
<ion-slide style="width:100%; height: 50%; " *ngFor="let slide of slide_items" >
<div>
<img src="assets/img/{{slide}}.png">
</div>
</ion-slide >
</ion-slides>
<ion-grid>
<ion-row>
<ion-col col-6>
<button ion-button block icon-start>Filtrar
<ion-icon name="options"></ion-icon>
</button>
</ion-col>
<ion-col col-6>
<button ion-button block icon-end>Ordenar
<ion-icon name="reorder"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let producto of itemInfo">
<ion-item class="item-thumbnail-left" >
<ion-grid>
<ion-row>
<ion-col col-6>
<img src="http://186.176.206.154:8088/images/Products/{{producto.ItemId}}_l_.PNG" >
</ion-col>
<ion-col col-6>
<h3>{{producto.ItemId}}</h3>
<ion-item class="item item-text-wrap">{{producto.ItemName}}</ion-item>
<p style="position:absolute;right:10px;">
<button ion-button (click)="addToCart(producto)" icon-end >
<ion-icon name="cart"></ion-icon>
</button>
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col>
</ion-content>
if anyone knows how to make my slides "circles" goes up. I tried reducing Height but it doesn't work.
I am using this as guide -> https://ionicframework.com/docs/components/#slides
Fixed! I had to add style="height: 300px;" on ion-slides.
I have referred this example from ionic framework documentation and created a segment of my own.
<div padding>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
...
</ion-list>
<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-kitten-1.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
...
</ion-list>
</div>
Here, they are displaying different ion-list on different button clicks.
But I am a different element type to be displayed on two different button clicks.
Here is my code-
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
//this is coming
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
//this is not coming
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let images of image; let i = index;">
<ion-row *ngIf="i % 3 === 0">
<ion-col col-4 *ngIf="i < images.length">
<img [src]="images[i].url" />
</ion-col>
<ion-col col-4 *ngIf="i+1 < images.length">
<img [src]="images[i+1].url" />
</ion-col>
<ion-col col-4 *ngIf="i+2 < images.length">
<img [src]="images[i+2].url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
in .ts file i have stored images as
this.image = [
{ url: 'assets/imgs/placeholder.png'},
{ url: 'assets/imgs/placeholder.png' },
{ url: 'assets/imgs/placeholder.png' }
];
As you can see i want to display a ion-list on first segment button click and display a image grid on second segment button click. As of now nothing comes up when i click on the second button
I think you're for loop is not correct, You are using the loop and inside it, you are trying to use an index on each item which is not an array. Below code should be working
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let image of images; let i = index;">
<ion-row>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
I am using Ionic2 and I want to make design like that:
I made the cart but I can't make the position as image
this is card code:
<ion-grid>
<ion-row wrap>
<ion-col width-50>
<ion-card>
<ion-item>
<ion-icon name="start" item-start></ion-icon>
<ion-icon name="ios-heart-outline" item-end></ion-icon>
</ion-item>
<ion-card-content text-center>
<ion-item text-center>
<img src="http://safe-pay.co/safepay/public/uploadedimg/user/avatar.png" style="width:40px;height:40px" />
</ion-item>
<ion-item>
<span>Canon Power <br/>shot SX60 HS</span>
</ion-item>
<ion-item>
<span id="oldPrice">119.900KD</span>
</ion-item>
<ion-item>
<span id="newPrice">100.900KD</span>
</ion-item>
<ion-item>
<ion-rating [numStars]="5" [readOnly]="false" [value]="3" (clicked)="starClicked($event)">
</ion-rating>
</ion-item>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
this is the output
can any one tell me the how to position them
try putting style to make it aligned as you want ..
<div style="width:100%;float:left;">
<ion-card style="width:33.33%;float:left;">
<ion-card-content text-center>
SAMLE1
</ion-card-content>
</ion-card>
<ion-card style="width:33.33%;float:left;">
<ion-card-content text-center>
SAMLE2
</ion-card-content>
</ion-card>
<ion-card style="width:33.33%;float:left;">
<ion-card-content text-center>
SAMLE3
</ion-card-content>
</ion-card>
</div>