How to set the segment-button is pressed as default? I had set aria-pressed=true it doesn't work.
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<ion-segment [ngClass]="platformnow" [(ngModel)]="getTaskList">
<ion-segment-button class="segment-button" role="button" tappable="" value="onGoing" aria-pressed="true">
Normal
</ion-segment-button>
<ion-segment-button class="segment-button" role="button" tappable="" value="history" aria-pressed="false">
Complete
</ion-segment-button>
<ion-segment-button class="segment-button" role="button" tappable="" value="queue" aria-pressed="false">
High
</ion-segment-button>
<ion-segment-button class="segment-button" role="button" tappable="" value="other" aria-pressed="false">
Other
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="getTaskList">
<button ion-item (click)="viewDetailP()" *ngSwitchCase="'history'">history <ion-icon name="timer"></ion-icon>
</button>
<button ion-item (click)="viewDetailP()" *ngSwitchCase="'onGoing'">on going <ion-icon name="timer"></ion-icon>
</button>
<button ion-item (click)="viewDetailP()" *ngSwitchCase="'queue'">on going <ion-icon name="timer"></ion-icon>
</button>
<button ion-item (click)="viewDetailP()" *ngSwitchCase="'other'">other <ion-icon name="timer"></ion-icon></button>
</div>
</ion-card-content>
</ion-card>
The output of my code, one of the tab should be pressed by default:
You have to define variable in ts like
getTaskList: String = "onGoing";
Full example here
https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/segments/basic
In ionic 4
<ion-segment class="equip-tab" (ionChange)="segmentChanged($event)" value="customer">
<ion-segment-button value="customer">
<ion-label>Customer</ion-label>
</ion-segment-button>
<ion-segment-button value="equipment">
<ion-label>Equipment</ion-label>
</ion-segment-button>
Related
I'm new to Angular and Ionic. I'm trying to create an element that when I choose a segment value, it appears a different ion-slides.
This is the code I have tried so far.
<ion-segment value="Value 1" (ionChange)="segmentChanged(cat)" >
<ion-segment-button value="cat.value" *ngFor="let cat of items">
<ion-label>{{cat.category}}</ion-label>
</ion-segment-button>
</ion-segment>
<ion-slides [options]="sliderConfig">
<ion-slide *ngFor="let product of cat.products">
<ion-card>
<ion-card-header>
<ion-card-title>{{product.name}} </ion-card-title>
<ion-card-content>
<ion-button expand="full">Item</ion-button>
</ion-card-content>
</ion-card-header>
</ion-card>
</ion-slide>
</ion-slides>
However I don't know how to select the value of the segment, because the ngFor is inside the segment-buttons. I also don't know how can I can choose the "Slides" I need to show. In the example I showed previously, each slide is a product from an specific category.
try this one to get the segment value :
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button *ngFor="let cat of items" value={{cat.value}} >
<ion-label>{{cat.category}}</ion-label>
</ion-segment-button>
</ion-segment>
inside the ts file :
segmentChanged(ev) {
console.log(ev.value)
}
I am trying to design a calculator for various formulas which may have inputs in different units. Specifically, I need to have this alignment (from left to right):
Essentially, I need to have a "3 column" layout of repeating items.
Below I am providing my form code with my actual results compared to what I am trying to achieve (can't post images yet so I have added links). Thanks in advance for your help!
I have tried using multiple columns in a grid system but this has not worked. I have also tried playing with the "slot".
<form #form="ngForm" (ionChange)="sendUserData(form)">
<ion-grid>
<ion-row>
<ion-col
no-margin
no-padding
size-sm="6"
offset-sm="3"
size-md="4"
offset-md="4"
>
<ion-card color="primary" style="display:block">
<ion-card-header>
<ion-card-title text-center>{{ output }}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
<ion-row color="primary" justify-content-center>
<ion-col align-self-center size-sm="6" size-md="4">
<ion-item lines="full">
<ion-label (click)="presentAlert()" slot="start" fixed
>Dialysis:</ion-label
>
<ion-label
color="secondary"
(click)="presentAlert()"
slot="start"
fixed
>More Info</ion-label
>
<ion-segment
slot="end"
mode="ios"
no-padding
no-margin
(ionChange)="sendUserData()"
[(ngModel)]="userData.dialysis"
name="dialysis"
>
<ion-segment-button mode="ios" value="true">
<ion-label>Yes</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" value="false">
<ion-label>No</ion-label>
</ion-segment-button>
</ion-segment>
</ion-item>
<ion-item lines="full">
<ion-label slot="start" fixed>Creatinine:</ion-label>
<ion-input
slot="start"
placeholder="0"
(ionChange)="sendUserData()"
[(ngModel)]="userData.creatinine"
name="creatinine"
type="number"
no-margin
no-padding
></ion-input>
<ion-segment
slot="end"
mode="ios"
no-padding
no-margin
(ionChange)="sendUserData()"
[(ngModel)]="userData.creatinineUnits"
name="creatinineUnits"
>
<ion-segment-button mode="ios" value="umol">
<ion-label>µmol/L</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" value="mgdl">
<ion-label>mg/dL</ion-label>
</ion-segment-button>
</ion-segment>
</ion-item>
<ion-item lines="full">
<ion-label slot="start" fixed>Bilirubin:</ion-label>
<ion-input
slot="start"
placeholder="0"
(ionChange)="sendUserData()"
[(ngModel)]="userData.bilirubin"
name="bilirubin"
type="number"
no-margin
no-padding
></ion-input>
<ion-segment
slot="end"
mode="ios"
no-padding
no-margin
(ionChange)="sendUserData()"
[(ngModel)]="userData.bilirubinUnits"
name="bilirubinUnits"
>
<ion-segment-button mode="ios" value="umol">
<ion-label>µmol/L</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" value="mgdl">
<ion-label>mg/dL</ion-label>
</ion-segment-button>
</ion-segment>
</ion-item>
<ion-item lines="full">
<ion-label slot="start" fixed>INR:</ion-label>
<ion-input
slot="start"
placeholder="0"
(ionChange)="sendUserData()"
[(ngModel)]="userData.inr"
name="inr"
type="number"
no-margin
no-padding
></ion-input>
</ion-item>
<ion-item lines="full">
<ion-label slot="start" fixed>Sodium:</ion-label>
<ion-input
slot="start"
placeholder="0"
(ionChange)="sendUserData()"
[(ngModel)]="userData.sodium"
name="sodium"
type="number"
no-margin
no-padding
></ion-input>
<ion-segment
slot="end"
mode="ios"
no-padding
no-margin
(ionChange)="sendUserData()"
[(ngModel)]="userData.sodiumUnits"
name="sodiumUnits"
>
<ion-segment-button mode="ios" value="mmol">
<ion-label>mmol/L</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" value="meq">
<ion-label>mEq/L</ion-label>
</ion-segment-button>
</ion-segment>
</ion-item>
<ion-button
(click)="clear()"
id="clear"
color="danger"
fill="outline"
expand="block"
margin
padding
>Clear</ion-button
>
</ion-col>
</ion-row>
</ion-grid>
</form>
This is what I get with the above code:
https://i.imgur.com/la0IFXE.jpg
Trying to get something like this:
https://i.imgur.com/3PYWf9I.jpg
Figured it out, for anyone who is curious:
<ion-grid>
<ion-item>
<ion-row>
<ion-col align-self-center size="4">
<ion-label>Creatinine:</ion-label>
</ion-col>
<ion-col align-self-center size="3">
<ion-input (ionChange)="sendUserData()" [(ngModel)]="userData.creatinine" placeholder="0" type="number"></ion-input>
</ion-col>
<ion-col align-self-center size="5">
<ion-segment (ionChange)="sendUserData()" [(ngModel)]="userData.creatinineUnits">
<ion-segment-button value="umol">
<ion-label>µmol/L</ion-label>
</ion-segment-button>
<ion-segment-button value="mgdl">
<ion-label>mg/dL</ion-label>
</ion-segment-button>
</ion-segment>
</ion-col>
</ion-row>
</ion-item>
<ion-item>
</ion-grid>
I currently stuck on a ionic 4 segment to get mode="md" working.
I am on version 4.1.2. This is the code:
<ion-toolbar text-capitalize>
<ion-segment mode="md">
<ion-segment-button value="seg1" text-capitalize checked>
segment1
</ion-segment-button>
<ion-segment-button value="seg2" text-capitalize>
segment2
</ion-segment-button>
<ion-segment-button value="seg3" text-capitalize>
segment3
</ion-segment-button>
</ion-segment>
</ion-toolbar>
Does anyone has an idea why it isn't working?
When i go on site with Chrome iOS responsive mode i see an iOS-Segment, not an md-segment.
Can you try to add the mode md to the toolbar ?
<ion-toolbar mode="md" text-capitalize>
<ion-segment mode="md">
<ion-segment-button value="seg1" text-capitalize checked>
segment1
</ion-segment-button>
<ion-segment-button value="seg2" text-capitalize>
segment2
</ion-segment-button>
<ion-segment-button value="seg3" text-capitalize>
segment3
</ion-segment-button>
</ion-segment>
</ion-toolbar>
You have to change mode to class as below updated code
<ion-toolbar class="md" text-capitalize>
<ion-segment class="md">
<ion-segment-button value="seg1" text-capitalize checked>
segment1
</ion-segment-button>
<ion-segment-button value="seg2" text-capitalize>
segment2
</ion-segment-button>
<ion-segment-button value="seg3" text-capitalize>
segment3
</ion-segment-button>
</ion-segment>
</ion-toolbar>
Globally you can use as below code
import { IonicModule } from '#ionic/angular';
#NgModule({
...
imports: [
BrowserModule,
IonicModule.forRoot({
rippleEffect: false,
mode: 'md'
}),
AppRoutingModule
],
...
})
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'm using the ion-grid / ion-row / ion-col to define a form and it works fine. On the top of this form, I'm also using an ion-segment to implement some tabs:
<ion-header no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title class="home-toolbar-background">Mes sports</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div padding *ngIf="items && items.length > 0">
<ion-segment text-center [(ngModel)]="item"
(ngModelChange)="onItemChange($event)">
<ion-segment-button value="item1" *ngIf="hasSport('item1')">
Item1
</ion-segment-button>
<ion-segment-button value="item2" *ngIf="hasSport('item2')">
Item2
</ion-segment-button>
<ion-segment-button value="item3" *ngIf="hasSport('item3')">
Item3
</ion-segment-button>
(...)
</ion-segment>
</div>
<ion-grid>
...
</ion-grid>
</ion-content>
It works fine within the browser in development mode but, in IonicView, I can't reach the end of the form by scrolling. It seems the height of the screen is calculated without the height of the tabs block.
Note that this screen is part of
<ion-tabs>
<ion-tab tabIcon="pricetag" tabTitle="Tab1" [root]="tab1"></ion-tab>
<ion-tab tabIcon="calendar" tabTitle="Tab2" [root]="tab2"></ion-tab>
<ion-tab tabIcon="walk" tabTitle="Items" [root]="tabItems"></ion-tab> <--------------
<ion-tab tabIcon="person" tabTitle="Tab3" [root]="tab3"></ion-tab>
<ion-tab tabIcon="chatboxes" tabTitle="Notifs" [root]="tabNotifications"></ion-tab>
</ion-tabs>
Thanks very much for your help!
I too faced similar issue and it might look silly but it does the trick.
At the end of your ion-content your <div padding></div>
<ion-content padding>
<div padding *ngIf="items && items.length > 0">
<ion-segment text-center [(ngModel)]="item"
(ngModelChange)="onItemChange($event)">
<ion-segment-button value="item1" *ngIf="hasSport('item1')">
Item1
</ion-segment-button>
<ion-segment-button value="item2" *ngIf="hasSport('item2')">
Item2
</ion-segment-button>
<ion-segment-button value="item3" *ngIf="hasSport('item3')">
Item3
</ion-segment-button>
(...)
</ion-segment>
</div>
<ion-grid>
...
</ion-grid>
<div padding></div>
<div padding></div>
</ion-content>
What happens is .scroll-content is been occupied till the bottom of the screen.
and tabs are placed above the .scroll-content NOTE: tabs are not a part of the respected Screen.thats why we are faceing this issue will solve just by bottom of the screen upto the tabs min-height:58px will solve it