I have an application with the tabs layout.
I need six tab-buttons in the tab-bar. There is not enough space for more than 4/5 elements.
So I decided to add an overflow element to the ion-tab-bar element.
But even here the tabs are displayed unfavorably.
May you have a better solution for me.
<ion-tabs>
<ion-tab-bar slot="bottom" style="width: 100%; overflow-y: auto; overflow-x: auto;">
<ion-tab-button tab="registrieren">
<ion-icon name="person-add"></ion-icon>
<ion-label>Registrieren</ion-label>
</ion-tab-button>
<ion-tab-button tab="aufnahme">
<ion-icon name="add-circle"></ion-icon>
<ion-label>Aufnahme</ion-label>
</ion-tab-button>
<ion-tab-button tab="entfernen">
<ion-icon name="remove-circle"></ion-icon>
<ion-label>Entfernen</ion-label>
</ion-tab-button>
<ion-tab-button tab="standortwechsel">
<ion-icon name="md-car"></ion-icon>
<ion-label>Übergabe</ion-label>
</ion-tab-button>
<ion-tab-button tab="admin-bestand">
<ion-icon name="ios-albums"></ion-icon>
<ion-label>Bestand</ion-label>
</ion-tab-button>
<ion-tab-button tab="system">
<ion-icon name="settings"></ion-icon>
<ion-label>System</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
CSS
ion-tab-bar {
overflow-x: scroll;
justify-content: left;
}
The best you can do, if you have that many TABS, is to use ion-segment instead. You can change styles so it can look as a tab, and you can make them slide in horizontal. The examples on ionic docs componets, look ugly but you can make them as TAB. Hope i could help.
If I'm not mistaken, the BMW's app that connects to the car use ion-segment as tab on the top, and it look preety good.
Related
how can I put the ion-tabs on top of all the displayed content.
<ion-content>
/* ion-item*/
</ion-content>
<ion-tabs>
/*ion-tab*/
</ion-tabs>
You shouldn't create your page inside the tabs file as your are doing now.
You should create a separate component with your content, and then use your tabs you navigate to these components(Views). Here is an example of some code I wrote for a previous application I created:
<ion-tabs #tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="home-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2" (click)="openModal()">
<ion-icon name="add-circle-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab3" [disabled]="!isAutenticated">
<ion-icon name="notifications-outline"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
As seen on the example each ion-tab-button references to a specific tab, these tabs will contain your content.
Hope that gave you some clarity.
I'm creating an ionic 4 application. using the Tab component to present 3 tabs. the default color of the tab component in ionic is blue. the default background color is white. I would like to change and choose another background color.
The documentation offer to add:
:root {
--ion-tab-bar-background: red; // or some other color
}
It did not work for me.
I also tried to modify variables.scss in theme folder in ionic 4 application
this also did not work for me.
I also read other posts in SOF but nothing succeeds or relevant to ionic 4
for example this post:How to change the background color of tab bar and tab icon in Ionic 4 offer solutions that did not work for me
my basic template:
<ion-tabs main color="primary">
<ion-tab-bar slot="top" >
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>tab2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>tab3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-header>
<ion-toolbar>
<ion-title>
home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card class="welcome-card">
<ion-img src="./../../assets/background-for-baby-picture.jpg"></ion-img>
<ion-card-header>
<ion-card-subtitle>guide</ion-card-subtitle>
<ion-card-title>welcome</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>info </p>
</ion-card-content>
</ion-card>
<ion-list lines="none">
<ion-list-header>
</ion-list-header>
</ion-list>
</ion-content>
Menu Example:
I am just starting out with Ionic and am not really sure why the two icons in the top left-hand corner are stacking and staying tiny. I have read through all docs and forums, however, I haven't seemed to come across a solution. Thanks in advance.
<ion-header no-lines>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons icon-left start>
<!-- Float the icon left -->
<button ion-button icon-start>
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
<ion-buttons icon-right end>
<!-- Float the icon right -->
<button ion-button icon-end>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I landed on this after copy & pasting some Ionic 3 code into my Ionic 4 project.
The best answer I can suggest is to have a look at the documentation for Ionic 4! A lot of what you've done is not Ionic 4, but Ionic 3.
Take the button docs for example: https://ionicframework.com/docs/api/button Your button won't work, because you must use something like:
<ion-button color="primary" fill="clear" expand="block" (click)="deleteRecord(i)">
<ion-icon name='trash'></ion-icon>
</ion-button>
Also, for the positioning, also look at the documentation. You should be using the slot property. for example:
<ion-chip outline="outline" color="primary" slot="start">
<ion-label> Job id : {{ interv.ts % 1000000}} </ion-label>
</ion-chip>
Note that in the two snippets above, I used different properties to determine the outline / fill. That's because the documentation told me to. So while it may not be entirely consistent, it is documented and for the most part, it works.
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
I am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (not exact same, however the important part is how to get that first block with such a picture and some text), with custom color for the entire toolbar etc?:
My application looks like following:
My app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
You can do it just adding some standard HTML code, and with CSS you can customize the style. Create the CSS Class rules in the .scss file. Rember to import
#import "build/app.html"; in the app.core.scss file. You'll find other information to personalize your app there
And for display the first block part you can add your code before the ion-list of the menu and after the tag <ion-content>.
You can delete this part, so it's more easy to create your custom layout.
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
The code will be:
<ion-menu [content]="content">
<ion-content>
<!--Here you can add all the code
you want, so you can display whatever you want-->
<!--Menu list-->
<ion-list class="menuList">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
If you need some more help, don't hesitate to ask.