I am using ionic 3.
Here is my code
<ion-range dualKnobs="true" min="$10" max="$100" color="secondary" >
<ion-label range-left>$10</ion-label>
<ion-label range-right>$100</ion-label>
</ion-range>
But range slider does not work.
Kindly advice me,
Thanks
With dual knob slider you need to set an object as default value.
This should work-
HTML:
<ion-range dualKnobs="true" min="$10" max="$100" [(ngModel)]="rangeObject" color="secondary" >
<ion-label range-left>$10</ion-label>
<ion-label range-right>$100</ion-label>
</ion-range>
TS:
public rangeObject:any= {lower: 0, upper: 100};
Related
I'm trying to add an icon to ionic ion-list-header element in order to manage list item addition.
I tried the following code and it doesn't work. I start believing this is not admitted, but it looks quite silly at my eyes that it is not possible to add icons to a list header.
I appreciate your help.
Thanks in advance.
<ion-list-header color="primary">
<ion-icon name="add" slot="end"></ion-icon>
<ion-label>Header text</ion-label>
</ion-list-header>
Yes it is possible just put you icon and label in ion-item like this.
<ion-list-header color="primary">
<ion-item>
<ion-icon name="add" slot="end"></ion-icon>
<ion-label>Header text</ion-label>
</ion-item>
</ion-list-header>
For list-header, We can add an icon inside a button. Example:
<ion-list-header>
<ion-label>Header text</ion-label>
<ion-button>
<ion-icon name="add"></ion-icon>
</ion-button>
</ion-list-header>
I try this:
.ion-item:disabled {
background-color:#ffffff !important;
}
But it has no effect. I don't want it to have gray background when disabled, I try keep the original (white) color.
The code is like:
<ion-list>
<button ion-item *ngFor="let item of items [disabled]="!item.enabled" (click)="itemSelected(item)">
{{ item }}
</button>
</ion-list>
So if item.enabled is false, the background gets gray but I need it white.
UPDATE: No need to add anything to CSS, the container's background color was gray, and perhaps the disabled items got transparent or something, but changing the container's color from gray to white resolved this issue.
button.item[disabled]{
background-color: #ffffff;
}
With changing the container's background color the issue was resolved. (Container where this list in.)
The container's default background color was grey.
Probably something like:
ion-item [disabled] {
background-color: #f00;
}
Note that you are targetting ion-item as an element, not a class.
Here is the corresponding markup:
<ion-list>
<ion-item>
<ion-label>Normal input</ion-label>
<ion-input type="text" placeholder="Normal Input"></ion-input>
</ion-item>
<ion-item>
<ion-label>Disabled input</ion-label>
<ion-input type="text" placeholder="Disabled input" disabled></ion-input>
</ion-item>
</ion-list>
Here is a Plunker.
It's actually the opacity which changes your background color, to retain background color, simply add opacity: 1 to any disabled element you want to retain background color. default opacity for any disabled element is 0.4.
CSS style for [disabled]
a[disabled], button[disabled], [ion-button][disabled] {
cursor: default;
opacity: .4;
pointer-events: none;
}
I have one view in portrait mode and another in landscape mode where I want to show chart and I hide tabs and header (fullscreen mode, no scrolling). My view in landscape mode would look something like this:
<div showWhen="landscape" class="chart-settings split-container">
<ion-toolbar showWhen="landscape">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Period</ion-label>
<ion-select [(ngModel)]="period">
//options
</ion-select>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Won/Lost</ion-label>
<ion-select [(ngModel)]="gender">
//options
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<div class="flexChart">
<div id="chartdiv" [style.width.%]="100" [style.height.%]="100"></div>
</div>
I use flex to fill out the page and create "fullscreen effect with no scrolling".
Thanks
Well it seems there is this:
http://ionicframework.com/docs/api/platform/Platform/
It has:
isPortrait()
isLandscape()
so you can do:
platform.isPortrait() or platform.isLandscape()
if you inject platform into constructor.
Combine this with *NgIf:
https://angular.io/guide/template-syntax#ngif
CSS overflow, overflow-x, overflow-y is what you'd look to for prevent scrolling provided it's a block level container:
https://developer.mozilla.org/en/docs/Web/CSS/overflow
UPDATE
Based on this comment:
That was my initial thought. The problem with this is that it leaves
padding on top. I solved it by configuring styles, but it seemed
pretty dirty solution to me
You can fix that padding issue by getting the instance of the Content and call the resize() method like this:
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class MyPage{
#ViewChild(Content) content: Content;
public yourMethod(): void {
this.content.resize();
}
}
https://ionicframework.com/docs/api/components/content/Content/#resize
Tell the content to recalculate its dimensions. This should be called
after dynamically adding/removing headers, footers, or tabs.
You can check landscape or portrait with platform, then you can get the ref of nav from template:
<ion-header>
<ion-navbar #navBar>
...
</ion-navbar>
</ion-header>
and call setHidden(true) in component with its ref:
#ViewChild('navBar') navBar: Navbar
// call in proper place
this.navBar.setHidden(true)
for tabs, I think you can do in the same way
I have some cards that repeat using *ngFor. It works perfectly, however the array I pass to ngFor will have an amount that varies unpredictably, it could be a small number it could be big. I want to implement virtual scroll incase the number is large.
The ionic documentation examples show virtual scroll used with a list.
I don't see the need for a list tag in my code, but the way I've done it doesn't seem to be right for virtualScroll because the page won't render at all in the simulator. It's completely blank. Everything was fine before I added virtualScroll.
My Code:
<ion-card id="card" [virtualScroll]="listOfEvents" >
<ion-item *virtualItem="let event"]>
<ion-row>
<ion-col><span class="showDetails">Date:</span>{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}</ion-col><ion-col><span class="showDetails">Time:</span>{{getFormattedTime(event.eventTime, 'HH:MM')}}</ion-col><ion-col><span class="showDetails">Venue:</span> {{event.venue}}</ion-col> <!-- convert time to normal time-->
</ion-row>
<ion-row>
<ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col><ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col><ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>
</ion-row>
<ion-row>
<ion-col><span class="showDetails">Will Reimburse:</span> {{event.reimburse}}</ion-col>
</ion-row>
<button id="volunteer" ion-button block> volunteer </button>
</ion-item>
</ion-card>
</ion-content>
I have a string property with values like "primary", "secondary" or "danger". I am able to bind it to a badge in this way:
<ion-badge class="badge badge-{{product.colorStock}}">1</ion-badge>
But I am not able to do the same with a label (this does NOT work):
<ion-label class="label label-{{product.colorStock}}">Text</ion-label>
How could I bind my property to the label so it changes its color?
Thank you
I think this should work:
<ion-label class="label" [ngClass]="['label-'+product.colorStock]">Text</ion-label>
It was solved by Ionic2 Framework itself, introducing the "color" tag. Now label sintax is:
<ion-label color="danger">Text</ion-label>
So, the problem does not exist anymore.