I have the following layout for ion-tabs:
<ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()" >
<ion-tab-bar slot="bottom">
<ion-tab-button routerDirection='root' *ngFor="let tab of tabList" [tab]="tab.root" class="actual-tab">
<ion-grid>
<ion-row>
<ion-col size="10">
<ion-thumbnail id="thumbnail_viewer{{tab.root}}"></ion-thumbnail>
</ion-col>
<ion-col size="2" class="ion-align-self-start ion-justify-content-end">
<ion-icon class="close" name="close" (click)=closeTab(tab.root) title="Close tab" [style.visibility]="tab.root === 'tab1' ? 'hidden' : 'visible'"></ion-icon>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="10">
<ion-label>{{tab.title}}</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-tab-button>
<ion-tab-button (click)="addTab(false)">
<ion-icon name="add-circle"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
I want my the ion-grid contained within my ion-tab-button to take up the full width of the tab button i.e. I want the red space to extend to the same size as the white space in the screenshot below:
I've been able to find that if I change the flex-direction from column to row in the developer tools at the grid level it gives me the result I want. But I cannot work out how to do that in css or even an inline style. I've spent way to long trying many things from the ionic documentation. Can someone point me in the right direction?
Found a solution in the end. All that I needed was:
ion-tab-button {
flex-direction: row;
}
Related
all working fine before adding ion-tab-button, I have buttons ionic with routing to another page
when i have added ion-tabs , the router link not work in button after click
where is my error ?! i need a solution .
this is my home.page.html
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>SERVER STORE</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="assets/{{s.id}}.png">
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/iptv-list']" >IPTV List </ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/sharing']" >Sharing List </ion-button>
</ion-col> </ion-row>
</ion-grid>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button >
<ion-icon name="speedometer"></ion-icon>
<ion-label>مباريات اليوم</ion-label>
</ion-tab-button>
<ion-tab-button >
<ion-icon name="play-circle"></ion-icon>
<ion-label>WATCH</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
i find the solution :
adding <ion-toolbar> as parent of ion-tabs
solve my problem
I have an element which is a header with two buttons. I have the buttons organized in a ion-grid, where the two buttons are side by side with the same size and centered in the column. This way the size is perfect for mobiles, but the buttons are too big when using a browser:
<ion-header>
<ion-toolbar>
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button style="width: 75%;">Menu</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button style="width: 75%;">Abcdefghijklmn</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<style>html, body { margin: 0; }</style>
</ion-header>
I tried to change the min-width and max-width, but when it gets perfect for browser screen size it gets too small for mobile and the button became smaller then the text inside.
As suggested here, I tried to apply expand="full", class="ion-text-wrap" and set a max-width to the button, but it loses its center property defined by class="ion-text-center" on ion-col. I then added style="text-align: center" to maintain the center property in ion-col tag, but does not make difference`.
Stackblitz
You can make responsive grid like this. (You may adjust grid size for your use case)
Ref : https://ionicframework.com/docs/layout/grid#grid-size
<ion-grid>
<ion-row>
<ion-col size-sm="6" size="6" class="ion-text-center">
<ion-button expand="full" class="ion-text-wrap min-max-width">Menu</ion-button>
</ion-col>
<ion-col size-sm="6" size="6" class="ion-text-center">
<ion-button expand="full" class="ion-text-wrap min-max-width">Abcdefghijklmn</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<style>
.min-max-width {
max-width: 200px;
margin: 0 auto;
}
</style>
I am learning ionic and i want to align my 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right.
But I don't know how to do it?
Here is My code.
<div>
<button ion-button icon-left>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-right>
Right Icon
<ion-icon name="home"></ion-icon>
</button>
</div>
Can Anyone guide me with this? As I am a beginner and learning ionic.
You can achieve this using Grid, ionic provide it grid link
It is based on a 12 column layout with different breakpoints based on the screen size.
By default, columns will take up equal width inside of a row for all devices and screen sizes.
<ion-grid>
<ion-row>
<ion-col>
1 of 2
</ion-col>
<ion-col>
2 of 2
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col>
2 of 3
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.
<ion-grid>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-8>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-6>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using grid.
<ion-grid>
<ion-row>
<ion-col col-4>
<button ion-button>
First
</button>
</ion-col>
<ion-col col-4>
<button ion-button>
Second
</button>
</ion-col>
<ion-col col-4>
<button ion-button>
Third
</button>
</ion-col>
</ion-row>
</ion-grid>
In Ionic 5 you can also use justify classes
<ion-buttons class="ion-justify-content-center">
<ion-button fill="outline" color="medium">
<ion-icon name="add-outline" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
Ionic React
I adopted the above solutions which were great thanks, but also I needed to get a smaller button right in the middle which the solution below fixes
<IonGrid>
<IonRow>
<IonCol size={"4"} className="ion-align-self-start">
<IonButton expand={"block"} onClick={}>
Left
</IonButton>
</IonCol>
<IonCol size={"4"}>
<p style={{ textAlign: "center", margin: 0 }}>
<IonButton onClick={}> Middle </IonButton>
</p>
</IonCol>
<IonCol size={"4"} className="ion-align-self-end">
<IonButton expand={"block"} onClick={}>
Right
</IonButton>
</IonCol>
</IonRow>
</IonGrid>
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