ionic3 footer with ion-tabs - javascript

I want to make a common footer for all the pages , the footer have 5 buttons,
the first one is selected by default and this one or the page opened by the first button have three tabs, i made the three tabs and everything fine,but i don't know how to add the footer? should i add it on every single page? (there will be a lot of repetition) any idea ?
the ion-tabs it not appear on all pages as i want because i add on app.module.ts
tabsHideOnSubPages: true
<ion-tabs [selectedIndex]="mySelectedIndex"
name="mainTabs"
tabsPlacement="top"
tabsLayout="icon-hide"
tabsHighlight="true"
[ngClass]="showTabs? 'appear-tabs':'disappear-tabs'">
<ion-tab [root]="exploreRoot" tabTitle="A"></ion-tab>
<ion-tab [root]="spotlightRoot" tabTitle="B"></ion-tab>
<ion-tab [root]="webinarsRoot" tabTitle="C"></ion-tab>
</ion-tabs>
footer:
<ion-footer>
<ion-toolbar>
<ion-buttons>
<!--Main-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-home"></ion-icon>
<label class="title-icon-footer">AAA</label>
</div>
</button>
<!--my Programs-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="ios-play"></ion-icon>
<label class="title-icon-footer">BBB</label>
</div>
</button>
<!--my webinars-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-desktop"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my notification-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-notifications"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my account-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-person"></ion-icon>
<label class="title-icon-footer">DDD</label>
</div>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

I wanted to do the same and ended up not using tabs and created a footer component that I included on every page. I passed the navController from the page to the footer so the footer could navigate to pages.
On every page .html
<ion-footer>
<my-footer [navController]="navController"></my-footer>
</ion-footer>
Footer component .html
<ion-grid no-padding>
<ion-row align-items-center>
<ion-col col-6 text-center>
<button ion-button icon-only (click)="gotoPage('HomePage')">
<ion-icon name="md-apps"></ion-icon>
<span>Home</span>
</button>
</ion-col>
<ion-col text-center>
<button ion-button icon-only (click)="gotoPage('ContactPage')">
<ion-icon name="md-list-box"></ion-icon>
<span>Contact</span>
</button>
</ion-col>
</ion-row>
</ion-grid>
Footer component .ts
import { Component, Input } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'mwc-footer',
templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {
#Input('navController') navController;
constructor() { }
public gotoPage(page: string): void {
this.navController.setRoot(page);
}
}

Related

How to make ion-element float on ion-header

I want to make the icon goes between the header and content section
but its keep going UNDER the header section..
This is the result I get:
my html code
<ion-header >
<ion-toolbar class="header">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="app-title" text-center>My app</ion-title>
</ion-toolbar>
<ion-toolbar class="header">
<ion-row>
<ion-col text-center routerLink="/mails-to-sign">
<p class="stat-title">Courriers à signer</p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/action">
<p class="stat-title"> Actions à réaliser </p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/refused-mails"></p>
<p class="stat-title">Courriers transmit</p>
</ion-col>
</ion-row>
</ion-toolbar>
<ion-content>
<ion-icon class="add-mail-btn" color="success" name="add-circle"></ion-icon>
</ion-content>
My css
.add-mail-btn{
font-size: 60px;
position: absolute;
top: -5%;
left: 79%;
}
Looks like you're looking for the ion-fab component:
<ion-content>
<!--
fab placed to the top and end and on the top edge
of the content overlapping header
-->
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button>
<ion-icon name="person"></ion-icon>
</ion-fab-button>
</ion-fab>
...
</ion-content>
Please notice that the position of the button is achieved by using the following properties: vertical="top" horizontal="end" edge

Ionic 2 Infinite Scroll event never fires

I'm trying to use ionic's infinite scroll. However, no matter what I do I can't get this working. Also, there example makes no sense to me what so ever.
I have this page I'm using to import messages:
<astoot-layout [pageName]="pageName" [basePage]="this">
<ion-content padding-horizontal padding class="messages-page-content">
<!--<ion-scroll scrollY="true" class="messages">-->
<ion-list>
<ion-item *ngFor="let message of messages">
<!--<div *ngFor="let message of messages" class="day-wrapper">-->
<div [class]="'message message-' + getOwnerClassPrefix(message.senderUserId)">
<div class="message-content message-content-text">{{message.messageText}}</div>
<span class="message-timestamp">{{ getCreated(message.created) }}</span>
</div>
<!--</div>-->
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullPage($event)">
<ion-infinite-scroll-content>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<!--</ion-scroll>-->
</ion-content>
<ion-footer>
<ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
<ion-input [(ngModel)]="messageText" class="message-editor" placeholder="Type a message"></ion-input>
<ion-buttons end>
<button ion-button icon-only *ngIf="messageText" class="message-editor-button" (click)="sendTextMessage()">
<ion-icon name="send"></ion-icon>
</button>
<button ion-button icon-only *ngIf="!messageText" class="message-editor-button">
<ion-icon name="mic"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</astoot-layout>
This is my pullPage Method which is never called:
pullPage(infiniteScroll: any) {
//TODO Get nextPage
setTimeout(() => {
this.baseProvider.getList(this.filterByConversationId).subscribe(entities => {
this.messages.concat(entities);
infiniteScroll.complete();
});
}, 500);
}
just incase its needed here is my layout component:
<ion-header>
<ion-navbar align-title="center">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> {{pageName}} </ion-title>
<ion-buttons end>
<button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
<ion-icon name="create"></ion-icon>
Edit
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
<ion-icon name="save"></ion-icon>
Save
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
<ion-icon name="save"></ion-icon>
Cancel
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
I'm generally confused on how ion-infinite-scroll even works how does it know when to signal, is it just based on the closest list above it?
How can I get the infinite scroll event to fired?
For anyone who is encountering something similar, the problem is an open issue with ionic caused by the nested ion-content, Luckily in my case I could remove it
My messages page now call the component with out wrapping the content:
<astoot-layout [pageName]="pageName" [basePage]="this"></astoot-layout>
My layout page now looks like this:
<ion-header>
<ion-navbar align-title="center">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> {{pageName}} </ion-title>
<ion-buttons end>
<button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
<ion-icon name="create"></ion-icon>
Edit
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
<ion-icon name="save"></ion-icon>
Save
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
<ion-icon name="save"></ion-icon>
Cancel
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

ionic 2 : disable scrolling on login form input focus

I have a login form created with ionic 2 and I want to disable scrolling when keyboard show up, here is the example :
here is the code of htmll login :
<ion-content no-bounce padding style="background:url('assets/imgs/bg.jpg') no-repeat center;background-size:cover;" id="page1">
<div class="header padding text-center">
<img class="logoApp" src="assets/img/logo.png" alt="DoggyDOG" />
</div>
<ion-card>
<ion-card-header>
Login to join DoggyDOG
</ion-card-header>
<ion-card-content>
<form (ngSubmit)="login()" novalidate>
<ion-list no-line>
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
</ion-item>
<div class="spacer" style="height:10px;" id="login-spacer2"></div>
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
</ion-item>
<div class="spacer" style="height:12px;" id="login-spacer2"></div>
<a>Forgot your login detail? <b>Get help signing in</b></a>
<div class="spacer" style="height:10px;" id="login-spacer2"></div>
<button id="login-button1" ion-button round large color="energized" block icon-left style="font-weight:500;color:#ffffff;">
<ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>
Login
</button>
</form>
<div class="spacer" style="height:10px;" id="login-spacer2"></div>
<button ion-button icon-left block color="facebookbtn">
<ion-icon name="logo-facebook" md="logo-facebook"></ion-icon> Login with Facebook
</button>
<div class="spacer" style="height:2px;" id="login-spacer2"></div>
<button ion-button icon-left block color="googlebtn">
<ion-icon ios="logo-google" md="logo-google"></ion-icon> Login with Google
</button>
</ion-list>
</ion-card-content>
</ion-card>
<button ion-button icon-left block color="light">
<ion-icon ios="ios-person-add" md="md-person-add"></ion-icon> Don't have an account? Sign up
</button>
</ion-content>
can anyone help please to solve this ?
Try this:
#NgModule({
declarations: [
...
],
imports: [
...
IonicModule.forRoot(MyApp,{
scrollPadding: false,
scrollAssist: false
}),
...
],
bootstrap: [IonicApp],
entryComponents: [
...
],
providers: [
...
]
By default for the forms in ios device you will not get the scrolling effect like android. all you have to do is just add the mode of the form.
<form (ngSubmit)="login()" novalidate mode="ios">
hope it helps you to solve this issue

How to center items inside ion-grid?

I'm trying to center (both horiz and vertical) and stack the 2 social buttons but it's not working. What am I doing wrong?
<ion-content padding>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline color="fb" (click)="fbClicked($event)">
<ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
CONNECT WITH FACEBOOK
</button>
</ion-col>
</ion-row>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline>
<ion-icon name="logo-google"></ion-icon>
CONNECT WITH GOOGLE
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
I am not fully aware of all ionic built in classes but you can use flexbox for this case and android and ios has a good support of it. I changed your code a bit and simplified it.
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
});
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Social Buttons</h1>
</ion-header-bar>
<ion-content class="Aligner">
<ion-grid>
<ion-row>
<div class = "col">
<button color="fb" (click)="fbClicked($event)">
<ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
CONNECT WITH FACEBOOK
</button>
</div>
<div class = "col">
<button>
<ion-icon name="logo-google"></ion-icon>
CONNECT WITH GOOGLE
</button>
</div>
</ion-row>
</ion-grid>
</ion-content>
</body>
</html>

overwrite ion-nav-bar with ion-header-bar in one page

i am tryng to show ion items with ion header bar having default ion nav bar.
The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.
Below from index.html
<ion-nav-bar class="bar-light bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
Below from one page:
<ion-view title="items" id="page15" >
<ion-content ng-controller="itemsCtrl" class="has-header" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
items
<div class="buttons">
<button class="button button-icon icon ion-log-out" ng-click="test()">
</button>
</div>
</ion-header-bar>
<ion-list show-delete="data.showDelete" >
<ion-item ng-repeat="item in items"
item="item"
class="item-remove-animate">
{{ item.name }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<div class="float-button" ng-click="additem()">
<span class="height-fix">
<a class="content">
<i class="ion-ios-plus-empty"> </i>
</a>
</span>
</div>
</ion-view>
The output is coming as below
i dont want the default ion nav bar n that page and want only ionic header bar.
I got it finally. Just add nav bar buttons instead of ionic header bar.

Categories