I would like to add css backdrop which allows the user to close FAB button options once it's clicked. I tried the following CSS solution from here but covers the options and cannot be seeing.
<button ion-button (click)="toggle!=toggle ">Add</button>
<div [ngClass]="{ 'blur' : toggle }">
your content
</div>
<!-- fab placed to the bottom & center -->
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="toggle!=toggle ">
<ion-icon name="arrow-dropup"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="restaurant"></ion-icon>
<div class="list-label">Meals</div>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<div [ngClass]="{ 'blur' : toggle }">
<ion-content
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-subtitle>Get Started</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
</ion-content
</div>
CSS
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
transition: -webkit-filter 200ms linear;
}
We have a similar thing in our app, but we use the backdrop as a loading screen with animations inside. I used a separate component with a high z-index:50 and if I want to have something on a higher level, I just add a lager number to the z-index of that element. I have ran some tests and it should work with ion-fab.
Related
I created scrollTo functionality by clicking on an icon in a sidebar.
The scrolling works but the ion-header is moved out of view when scrolling to the desired location.
Here is a video of the behavior I am describing:
https://drive.google.com/file/d/1XeCr0RKOlas_9PpZZTUx5pEteA8Np42-/view?usp=sharing
Almost identical template works with Ionic 4 & Angular
Any ideas on what is wrong here?
Template
<template>
<ion-modal>
<ion-header>
<ion-toolbar>
// Close modal button
</ion-toolbar>
<ion-searchbar />
<div>
// Vertical column of scroll to anchor tags
<a #click="scrollTo('Math')">
<ion-icon :icon="calculator"/>
</a>
</div>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header id="Math">
<ion-label>
Math
</ion-label>
</ion-list-header>
</ion-list>
</ion-content>
</ion-modal>
</template>
scrollTo Function
function scrollTo (category: string) {
let elementId = category.replace(' ', '')
let subject = document.getElementById(elementId)
if (subject) {
subject.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
I have used ion-tabs and side-menu for change route the app, both uses routerLink. And when i press Home tab in ion-tab to go back to home page inside other pages, route changed to home but home page constructor method and onInit methods does not invoke.
side-menu.component.ts
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu *ngIf="isAuthenticated$ | async" contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<div class="menu-header">
<ion-list-header>
<img src="assets/wa-logo.ico">
</ion-list-header>
<ion-note></ion-note>
</div>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
<ion-footer>
<ion-menu-toggle auto-hide="false">
<ion-item
(click)="logout()"
routerDirection="root"
lines="none"
detail="true"
>
<ion-icon
slot="start"
ios='log-out-outline'
md="log-out-sharp"
></ion-icon>
<ion-label> Logout </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
<ion-tabs *ngIf="isAuthenticated$ | async">
<ion-tab-bar [translucent]="true" slot="fixed">
<ion-tab-button (click)="onClick()">
<ion-icon name="home"></ion-icon>
<ion-label> Home </ion-label>
</ion-tab-button>
<ion-tab-button [routerLink]="['/features/new-request']">
<ion-icon name="document-text"></ion-icon>
<ion-label> New Request </ion-label>
</ion-tab-button>
<ion-tab-button [routerLink]="['/features/prev-requests']">
<ion-icon name="reader"></ion-icon>
<ion-label> All Requests </ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-split-pane>
</ion-app>
So if i go inside prev-request page using ion-tab and once using hardware back button or ion-toolbar back button to changes route back to home page constructor and ngOnInit does not invoke, but if i route using side menu and go back with hardware back button or ion-toolbar back button constructor and ngOnInit methods are invoked.
prev-req.page
constructor(private _preReqService: PrevReqService,private platform: Platform,
private _modal: ModalService,
private _router: Router) {
this.platform.backButton.subscribeWithPriority(10, () => {
this._router.navigate(['/features/home'])
});
}
Still i don't have any clue why this happens.
Any idea why this happens ?
If you want to execute a function every time you go to a page Use Ionic Page Life Cycle.
ionViewWillEnter: Fired when the component routing to is about to animate into view.
ionViewDidEnter: Fired when the component routing to has finished animating.
ionViewWillLeave: Fired when the component routing from is about to animate.
ionViewDidLeave: Fired when the component routing to has finished animating.
export class ExamplePage implements OnInit {
constructor(){
}
ionViewWillEnter(){
console.log('Will Enter Fired') // will fire every time to go to a page.
}
}
Ionic Life Cycle Docs
I currently have an Ion-Segment with two switchCases. That is Management & Market. However I want to include a FAB button to run different functions depending on what SwitchCase the user is at.
Ive already tried placing the FAB in the SwitchCase Options,however the FAB seems to be scrolling on with the page instead of sticking.
The fab should run different functions for the different switch cases.
//CODE FOR THE SEGMENT
<ion-header>
<ion-segment [(ngModel)]="options" color="grey">
<ion-segment-button value="Management">
Management
</ion-segment-button>
<ion-segment-button value="Market">
Crop Market
</ion-segment-button>
</ion-segment>
</ion-header>
//CODE FOR IMPLEMENTATION OF THE SEGMENT
<ion-content>
<div [ngSwitch]="options" class="management-class"> //FIRST SWITCH CASE
<div *ngSwitchCase="'Management'">
<//MANAGEMENT CONTENT FOR THIS SWITCH CASE>
</div>
</div>
<div [ngSwitch]="options" class="management-class">//SECOND SWITCH CASE
<div *ngSwitchCase="'Market'">
<//MARKET CONTENT FOR THIS SWITCH CASE>
</div>
</div>
//This is the ion-fab button to that switches functions based on the users current switch case.
<ion-fab right bottom>
<button *ngIf="this.options=Market" ion-fab (click)="addToMarket()" color="primary" mini><img src="assets/imgs/add1.png"></button>
<button *ngIf="this.options=Management" ion-fab (click)="plantNew()" color="primary" mini><img src="assets/imgs/add1.png"></button>
</ion-fab>
</ion-content>
Use ionChange event on your segment like:
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button value="enemies">
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>
in your component.ts
segmentChanged(e){
console.log(e.detail.value)
this.segmentValue = e.detail.value;
}
change you fab on value:
<ion-fab right bottom>
<button *ngIf="segmentValue == 'friends'" ion-fab (click)="addToMarket()" color="primary" mini><img src="assets/imgs/add1.png"></button>
<button *ngIf="segmentValue == 'enemies'" ion-fab (click)="plantNew()" color="primary" mini><img src="assets/imgs/add1.png"></button>
</ion-fab>
I have a page where I have a section which is scrollable. However I am not able to implement infinite scroll function inside the ion-scroll section. I know infinite-scroll applies on ion-content but how can I fire an event when the user scroll downs in an ion-scroll section.
<ion-content class="main-view">
<div class="overlay" tappable (click)="dismiss()">
</div>
<div (click)="CloseScreen()">
<ion-icon name="close" tappable class="close-modal"></ion-icon>
</div>
<div>
<div class="modal_content">
<ion-scroll scrollY="true" style="height:300px">
<ion-spinner class="loading-center" *ngIf="loadingCustomers"></ion-spinner>
<div class="customer-items">
<ion-item *ngFor="let customer of customersView.paginatedCustomers" tappable (click)="SelectCustomer(customer)">
<h6>
{{customer.BusinessName}}
</h6>
</ion-item>
</div>
<ion-infinite-scroll (ionInfinite)="LoadMoreCustomers($event)"> // NOT FIRING!
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
....OTHER STUFF
</div>
</div>
</ion-content>
I will post this in case you or someone else is still looking for an answer.
Like you said ion-infinite-scroll would only applies to the ion-content even when placed inside an ion-scroll. So you could see it firing if you add some margin to your ion-scoll and try to scroll the page itself.
However, for your case, you may want to try something like this:
https://stackoverflow.com/a/42176764/4084776
If you want to check when you reach the bottom of the scroll you could add a dummy element and check if it is near the bottom of the scroll. See the example below.
...
#ViewChild(Scroll) ionScroll: Scroll;
#ViewChild("endOfScroll") endOfScroll: ElementRef;
updating: Boolean = false;
private threshold: number = 0.01; //1% This is similar to ion-infinite-scroll threshold
...
ionViewDidLoad() {
this.ionScroll.addScrollEventListener(this.scrollHandler.bind(this));
}
...
scrollHandler(evenman){
let endOfScroll = this.endOfScroll.nativeElement.getBoundingClientRect();
let ionScroll = this.ionScroll._scrollContent.nativeElement.getBoundingClientRect();
let clearance = 1 - ionScroll.bottom/endOfScroll.bottom;
if(clearance <= this.threshold){
this.updating = true;
// DO your work here
console.log(JSON.stringify({fen: endOfScroll.bottom, lis: ionScroll.bottom}));
this.updating = false;
}
}
...
...
<ion-scroll scrollY="true">
<ion-list>
<ion-item-sliding *ngFor="let machann of lisMachann.lisMachann let endeks = index" [class.active]="endeks == endeksKlik">
<ion-item (click)="ouveFenet(endeks)">
...
</ion-item>
<ion-item-options side="left">
...
</ion-item-options>
</ion-item-sliding>
<ion-item *ngIf="updating">
<ion-spinner class="loading-center"></ion-spinner>
</ion-item>
</ion-list>
<div #endOfScroll></div>
</ion-scroll>
...
I'm not a programmer, as my guy left, and I'm left debugging the code:
Currently in an ion-item I have an ion-avatar which has displays a circular image. As best as I can tell, it is using the class="round_image" the following code:
<ion-thumbnail class="round-image" item-right>
But where does round-image come from, and how can i get a regular rectangular image?
Please advise.
Here is the entire code:
<ion-title padding>Events</ion-title>
<!--<ion-toolbar>
</ion-toolbar> -->
</ion-header>
<ion-content>
<ion-segment [(ngModel)]="genderSegment" color="danger" padding>
<ion-segment-button value="men" (click)="updateGenderSegment(1)">
Men
</ion-segment-button>
<ion-segment-button value="women" (click)="updateGenderSegment(2)">
Women
</ion-segment-button>
<ion-segment-button value="both" (click)="updateGenderSegment(3)">
Both
</ion-segment-button>
</ion-segment>
<ion-list text-wrap>
<ion-item-group *ngFor="let group of groups">
<ion-item-divider dark><h2>{{ group.label }}</h2></ion-item-divider>
<button ion-item detail-none *ngFor="let event of group.events" [navPush]="eventDetailsPage" [navParams]="{eventId: event.$key}">
<ion-thumbnail class="my-image" item-right>
<div image-cache class="photo" [ngStyle]="{ 'background-image': 'url(' + (event.user | async)?.photoURL + ')'}"></div>
</ion-thumbnail>
<h2><strong>{{ event.title }}</strong></h2>
<p>By: <strong><i>{{ (event.user | async)?.name }}</i></strong></p>
<p>{{ event.category }}</p>
</button>
</ion-item-group>
</ion-list>
<!--<ion-fab hideWhen="ios" right bottom>
<button ion-fab color="danger" (click)="addEvent()">
<ion-icon name="create" ></ion-icon>
</button>
</ion-fab>
-->
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I'd recommend you to learn the basics of HTML and CSS. Check out this link http://www.w3schools.com/
Now, back to your question.
2 options.
1.
Remove the class="round-image" since I believe ion-thumbnail will be squared by default, if this isn't the case, move on to 2.
2.
Your page is called 'Events' so depending on how clean your programmer was, there should be a events.scss, events.component.scss or events.css file
scss and css are used for styling your page. So if you have a round image it will be defined here.
In that file (if it exists, else it's hidden in some other scss or css file) there should be a .round-image (ctrl+f -> .round-image). There will be a property called border-radius. This is the amount your borders will 'curve'. So setting it to 0 will create a square/rectangle image.
If they are rectangle and you want it to be a square you could use this SO question How to "crop" a rectangular image into a square with CSS? The answer provided will prevent your image from 'squishing'*.
*Squishing example: if it's a profile image which is higher than wide, the person in the profile image will look fat when you force it into a square.
It looks like you should remove class="round-image"
<ion-thumbnail class="round-image" item-right>
should be
<ion-thumbnail item-right>