I am working in the Ionic App and In that I have some list items with the radio button and at the bottom of the page, I have the checkout button. I want to disable the button until the user checked one of the item.
This is my shipping.html:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-list radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-radio item-start value="{{itm.id}}"></ion-radio>
<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 class="myedit22" (click)="editshipping(itm)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end class="dele22" (click)="removeshipping(itm.id)">
<ion-icon name="ios-trash-outline"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-12 style="text-align: right;">
<button (click)="presentProfileModal()" class="myaddto22" ion-button square item-right>
Add Address
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="single-footer" style="bottom: 51px; background-color: #fff;">
<ion-grid>
<ion-row>
<ion-col class="addCart">
<button class="myaddto22" [disabled]="!value" full ion-button round="true">
Make Payment
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
In this html, I am showing the items with the radio button and the checkout button at the bottom of the page but the problem is that, I am not able to disable the bottom button until the user checks the radio button.
In this, I am showing the items with the radio button and I have the button at the bottom. It will disable until the user select the item but the problem is that when the user select the item after that the button is not clickable.
Any help is much appreciated.
Seems like you need to store the selected radio button in a model, and then set your disabled flag based on that.
<ion-list radio-group [(ngModel)]="yourSelectedRadioValue">
...
<button class="myaddto22" [disabled]="!yourSelectedRadioValue" full ion-button round="true">
Make Payment
</button>
Related
I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.
<ion-list text-wrap>
<ion-list-header>
...
</ion-list-header>
<ion-item *ngIf="classes?.length === 0">No Data</ion-item>
<ion-item-group *ngFor="let classObj of classes">
<ion-item-divider>...</ion-item-divider>
<ion-item-sliding *ngFor="let class of classObj?.classes">
<ion-item *ngFor="let class of classObj?.classes">
<ion-grid>
...
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary">
Change
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
I have no idea what went wrong. This happened to both Android and iOS
Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now
I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
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 want to implement three ion-button's in ion-footer, each algining to left, middle and right respectively.
It seems ion-button's with start and end can do left and right.
How about middle? I have checked the API and ion component, it seems ion-title is by default centered, but there is no out-of-box way to get button in the middle?
In the ion-footer element, try using ion-grid and then remove the padding from the grid.
<ion-footer>
<ion-grid>
<ion-row no-padding no-margin>
<ion-col col-4 no-padding>
<button ion-button full>Button 1</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 2</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 3</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
You can add the float-start and float-end to the first and third button respectively. By making use of float-[start|end] instead of float-[left|right] your buttons will shift position with the app direction
HTML:
<ion-footer>
<div class="btn-wrapper">
<button ion-button float-start>Button1</button>
<button ion-button>Button2</button>
<button ion-button float-end>Button3</button>
</div>
</ion-footer>
CSS:
.btn-wrapper {
text-align: center;
}
EDIT:
Added a wrapping <div> for the buttons and gave it the style text-align: center;, becasue I was experiencing weird animation behavior without the wrapping <div>.
I've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference