Divider on Ionic lists not showing - ionic-framework

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>

Related

How to change color of a button in ion-item-sliding in Ionic 4

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 :)

ionic 4: <ion-reorder> not working as expected

i'm working with ionic 4 angular 7. I'm using <ion-reorder> to reorder list. Drag n Drop works for the first time fine but when I release the click, item got stuck. After first reorder everything freezes. And I'm unable to attempt reorder for the second time.
Here my .html file
<ion-list lines="none">
<ion-reorder-group disabled="false">
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
When I drag n Drop Item. It get stuck when I drop it. After this, everything freezes.
Any Help...?
I'm using
Ionic: 4.10.2
Angular: 7.3.0

I think you need to store your data in a variable and ngFor on these data to build your reorder items.
this.items: Array<img: string; title: string; description: string; icon:
string> = [yourArrayOfObjects];
I think then you need to catch the ionItemReorder event like this
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
and in your .ts the reorderItems() function could be
reorderItems(ev) {
const itemMove = this.items.splice(ev.detail.from, 1)[0];
this.items.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}

The key here is to complete the event and you have to do it manually. So the ionItemReorder event callback is a must. So something as simple as this should do the trick:
Typescript :
public onItemReorder({ detail }) {
detail.complete(true);
}
HTML :
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="false">

ionic4 version:
html code:
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>INCLUDE</ion-label>
</ion-list-header>
<ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
<ion-item *ngFor="let accessory of accessories">
<ion-label>{{accessory}}</ion-label>
<ion-reorder></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
</ion-content>
typescript code:
accessories = ['test', 'test1', 'test2'];
reorder(event) {
const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
this.accessories.splice(event.detail.to, 0, itemToMove);
}
This will never throw any type of error, it works. I am 100% sure, have used 3-4 times. I hope, this will also help you.

<ion-list >
<ion-item-group (ionItemReorder)="reorder($event)" reorder='true' >
<ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
<ion-avatar item-left >
<img src="assets/{{item.bunch}}.svg">
</ion-avatar>
<h2 color="primary_secound">{{item.bunch}}
</h2>
<p>Click To See Menu of {{item.bunch}}
</p>
<ion-icon name="arrow-dropright" item-right></ion-icon>
</ion-item>
</ion-item-group>
</ion-list>
reorder(event) {
const itemToMove = this.file_uri.splice(event.from, 1)[0];
this.file_uri.splice(event.to, 0, itemToMove);
}

With Angular - Ionic - Typescript
in HTML file/Code:
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
<ion-item *ngFor="let item of yourArray">
<ion-label> {{ item.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
Controller or .ts Code:
reorderItems(ev): void {
const itemMove = this.yourArray.splice(ev.detail.from, 1)[0];
this.yourArray.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}
As per the above example, If you did not add reorderItems() in your controller it will not work. you can change function name as you like.

How to display different type of elements on different segment button clicks in ionic?

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>

ionic2: menuToggle button align to right automatically

I want to set menuToggle button in the left side of input text I used this code:
<div id="searchDiv">
<ion-item>
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<input type="text" placeholder="I'm Searching For .." [(ngModel)]="searchInput" />
</ion-item>
</div>
and I get this output:
If I remove menuToggle from tag button to be:
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
It align to left correctly, I don't know what is the problem with menuToggle, what should i do?

In src\app\app.html set this:
<ion-menu [content]="content" side='right'>
This will work correctly.
if you want menu toggle at right side then do it and this will be at your page
<div class="bar bar-header"> <h1 class="title">Header Buttons</h1> <button item-start ion-button icon-only color="dark" menuToggle> <ion-icon name="menu"></ion-icon> </button> </div>
use this code for buttons

ionic2: how to make Bottom sheet

I want to make bottom sheet with some buttons in ionic2, all resources I found are examples in ionic1: this is an example:
this is the link I want to do like it:
enter link description here
is is my html:
<ion-content no-padding no-margin>
<ion-list no-lines no-padding no-margin>
<ion-list-header>
Share Options
</ion-list-header>
<ion-item>
<ion-grid>
<ion-row>
<ion-col col-3 text-center>
<button ion-button clear icon-only>
<ion-icon name="md-copy" id="copyIcon"></ion-icon>
</button><br/>
<span class="optionName">Copy Link</span>
</ion-col>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="FBBtn">
<ion-icon name="logo-facebook" color="light" id="FBIcon"></ion-icon>
</button><br/>
<span class="optionName">Facebook</span>
</ion-col>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="twitterBtn">
<ion-icon name="logo-twitter"></ion-icon>
</button><br/>
<span class="optionName">Twitter</span>
</ion-col>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="googleBtn">
<ion-icon name="logo-googleplus"></ion-icon>
</button><br/>
<span class="optionName">Google Plus</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="whatsBtn">
<ion-icon name="logo-whatsapp" id="copyIcon"></ion-icon>
</button><br/>
<span class="optionName">Wahts Up</span>
</ion-col>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="tumblrBtn">
<ion-icon name="logo-tumblr"></ion-icon>
</button><br/>
<span class="optionName">Tumblr</span>
</ion-col>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="linkedBtn">
<ion-icon name="logo-linkedin"></ion-icon>
</button><br/>
<span class="optionName">Linked-in</span>
</ion-col>
<ion-col col-3 text-center>
<button ion-button icon-only class="SMBtn" id="moreBtn">
<ion-icon name="ios-more"></ion-icon>
</button><br/>
<span class="optionName">More</span>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
</ion-content>
I make it appear like a popover but I don't want that I want it to be like action sheet appear from bottom, anyone can help me in this issue?