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
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 am working in Ionic app and I have used the ion-item in my app and I want select one item before moving to the next page but I am not able to select the item.
This is my shipping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end"></ion-checkbox>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the items in the loop. It is showing the data but the problem is that I am not able to select the item. I have also used the checkbox but when using the checkbox, it is not showing the p and h2 tags in the view.
This is result in the html, when using the checkbox it is not showing the p and h2 tag. When I am not using the checkbox, it is showing the p and h2 tag.
Any help is much appreciated.
Just Try This: It Works!
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, It will show the checkbox for all the items and the text also.
I have an ion-list of food items to display wrapped in an ion-item, each of them is editable with three input fields (name, amount, unit), plus I would like to have a delete button at the left side of the row.
The inputs appear nicely within ion-item but I can't make the "trash" icon button to show up.
If I remove all the inputs, the button shows up.
What should I do to make both appear? Is it possible?
Here is the plunkr: http://plnkr.co/edit/JvHNEISfUCwcnujDB2jg?p=preview
Code:
<ion-content>
<ion-list>
<ion-item>
<button ion-button icon-only clear small>
<ion-icon name="trash"></ion-icon>
</button>
<ion-input type="text" value="peanut"></ion-input>
<ion-input type="number" value="1"></ion-input>
<ion-select>
<ion-option>oz</ion-option>
<ion-option>cup</ion-option>
<ion-option>glass</ion-option>
<ion-option>piece</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
ion-col and ion-row seemed to help, I wonder if this is the right way?
<ion-row>
<ion-col>
<button ion-button icon-only clear small>
<ion-icon name="trash"></ion-icon>
</button>
</ion-col>
<ion-col>
<ion-input type="text" value="peanut"></ion-input>
</ion-col>
<ion-col>
<ion-input type="number" value="1"></ion-input>
</ion-col>
<ion-col>
<ion-select>
<ion-option>oz</ion-option>
<ion-option>cup</ion-option>
<ion-option>glass</ion-option>
<ion-option>piece</ion-option>
</ion-select>
</ion-col>
</ion-row>
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>
I'm having trouble with dynamic button in navbar. Here's the code:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons end>
<button *ngIf="view.searchable">
<ion-icon name="search"></ion-icon>
</button>
<button *ngIf="view.creatable">
<ion-icon name="create"></ion-icon>
</button>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Output:
Please help. Thanks!
For some reason, the *ngIfis causing that issue (you can try by removing it, and the button is properly displayed). In order to solve it, you can change it like this:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons *ngIf="view.searchable" end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons *ngIf="view.creatable" end>
<button>
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Notice that I bind the *ngIfto the ion-buttons element instead of the button directly. Please take a look at this working plunker.