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
],
...
})
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'm working on an ionic application. I’m trying to use an infinite-scroll item in a custom component that contains a segement with two Lists that are showen according to the user's choices.
This is the code of the component :
<ion-content *ngIf="show">
<div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
<ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
MOST TRUSTED
</ion-segment-button>
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
LATEST
</ion-segment-button>
</ion-segment>
</div>
<div no-margin no-padding [ngSwitch]="chx">
<ion-list no-margin no-padding *ngSwitchCase="'most'">
<post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite2($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
<ion-list no-margin no-padding *ngSwitchCase="'recent'">
<page-post-card no-margin *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
</page-post-card>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</div>
</ion-content>
The component is used in an ionic page like this:
<ion-content no-padding>
<topicsearch [show]="showresult"></topicsearch> <!-- This is the custom component -->
<div *ngIf="!showresult" >
<ion-list *ngFor="let top of topics">
<ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
</ion-list>
</div>
</ion-content>
The problem is that the infinite-scroll doesn’t fire when scrolling down in the custom component.
Does anyone have a solution for that ?
Your component using ion-content which including inside another ion-content. Remove ion-content from component.
And also doInfinite function will be declared inside the component ts.
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
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>