ion-affix
ion-affix copied to clipboard
Published
20 hours ago •
jonaszuberbuehler
jonaszuberbuehler
Is it possible to use this directive in an ion-slides?
Hi i´m trying to use this directive in an ion-slides this is the code i´m using.
What i´m trying to do is to sticky the header in this case is the day.
<ion-content padding #content no-bounce style="background-image: url('assets/img/bg/2.jpg');">
<ion-slides>
<ion-slide *ngFor="let day of days">
<div class="card-content">
<div class="card-header">
<h3 ion-affix [content]="content" (onSticky)="sticky($event)" class="margin_top_0 margin_bottom_0 mayuscula">{{ day === weekDay? 'TODAY' : day }}</h3>
</div>
<div *ngFor="let activitie of navData['activities'][day]" class="card-body">
<div class="card-activity" (click)="scheduleEvent(activitie, day, $event, activitie['schedule'])">
<div class="activity-hour"> {{ activitie['hour'] }} </div>
<div class="activity-title">{{ activitie['name'] }}</div>
<div class="activity-title">{{ activitie['place'] }}</div>
<div *ngIf="activitie['schedule']" [ngClass]="{'is_schedule' : activitie['schedule'], 'is_not_schedule': !activitie['schedule']}" ><ion-icon name="alarm"></ion-icon></div>
</div>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-content>
page-demo {
.swiper-container {
width: 100%;
padding-top: 5px;
}
.swiper-slide {
background-color: transparent;
text-align: center;
font-size: 18px;
width: 75%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: block;
overflow-y: scroll;
}
ion-content, ion-content {
background-color: #1066ab !important;
}
.card-content{
width: 100%;
order-radius: 8px;
}
.card-content .card-header h3{
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
.card-content .card-body .card-activity .activity-hour{
text-align: left;
margin-left: 12px;
margin-bottom: 12px;
font-size: 15px;
}
.card-content .card-body .card-activity .activity-title{
margin-bottom: 10px;
font-size: 15px;
}
.is_not_schedule{
position: absolute;
top: 6px;
right: 10px;
color: grey;
}
.is_schedule{
position: absolute;
top: 6px;
right: 10px;
color: #F44336;
}
.card-header {
width: 75%;
position: fixed;
z-index: 100;
background-color: rgba(255, 255, 255, 1);
border-radius: 0px !important;
}
.card-content .card-body {
width: 100%;
padding-bottom: 0px !important;
position: relative;
display: block;
}
.card-content .card-body .card-activity{
width: 100%;
padding-bottom: 0px !important;
position: relative;
display: block;
-webkit-box-shadow: 2px 2px rgba(19, 13, 13, 0.48);
margin-bottom: 26px;
padding: 10px;
border-right: solid 2px rgba(19,13,13,0.48);
height: 100px;
}
.content-ios {
color: #040200 !important;
background-color: #fff;
}
}
This is how I nitialize the slider.
import { Component , ViewChild} from '@angular/core';
import { NavController , NavParams , Slides} from 'ionic-angular';
@Component({
selector: 'page-demo',
templateUrl: 'demo.html'
})
export class ActividadPage {
@ViewChild(Slides) slider: Slides;
public navData = [];
public days : Array<string>;
constructor(public navCtrl: NavController) {
this.navData = {
"activities":
{
"monday":
[
{"description":"","finish":"","id":"1","hour":"9:00am","lat":"","long":"","name":"LOST OBJECTS GAME","order":"1","set":true},
{"description":"","finish":"","id":"2","hour":"10:00am","lat":"","long":"","name":"MY GYM ART EXPLORERS","order":"2","set":true},
{"description":"","finish":"","id":"3","hour":"11:00am","lat":"6768723","long":"-869875","name":"MY GYM OPEN PLAY","order":"3","set":true},
{"description":"","finish":"","id":"2","hour":"12:00pm","lat":"354654","long":"-68769","name":"MY GYM AQUA CHALLENGE (KIDS POOL)","order":"4","set":true},
{"description":"","finish":"","id":"4","hour":"1:00pm","lat":"","long":"","name":"LUNCH TIME","order":"5","set":true},
{"description":"","finish":"","id":"2","hour":"2:00pm","lat":"1321354","long":"-3436546","name":"KARAOKE","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"3:00pm","lat":"1321354","long":"-3436546","name":"FACEPAINTING","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"4:00pm","lat":"1321354","long":"-3436546","name":"BRACELETS","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"5:00pm","lat":"1321354","long":"-3436546","name":"CLOSED","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"7:30pm","lat":"1321354","long":"-3436546","name":"PUPPETS SHOW (8:00PM) NIGHT PERFORMANCE (THEATER)","order":"6","set":true}
],
"tuesday":
[
{"description":"","finish":"","id":"1","hour":"9:00am","lat":"","long":"","name":"MY GYM PARENTS & BABY (AGES 1MO - 2YRS)","order":"1","set":true},
{"description":"","finish":"","id":"2","hour":"10:00am","lat":"","long":"","name":"ZUMBA KIDS","order":"2","set":true},
{"description":"","finish":"","id":"3","hour":"11:00am","lat":"6768723","long":"-869875","name":"SPACE ROCKET","order":"3","set":true},
{"description":"","finish":"","id":"2","hour":"12:00pm","lat":"354654","long":"-68769","name":"MY GYM ON THE BEACH - GAMES & RELAYS (KIDS ONLY MEETING POINT AZULITOS)","order":"4","set":true},
{"description":"","finish":"","id":"4","hour":"1:00pm","lat":"","long":"","name":"LUNCH TIME","order":"5","set":true},
{"description":"","finish":"","id":"2","hour":"2:00pm","lat":"1321354","long":"-3436546","name":"NICK TIME (SPONGE BOB & PATRICK)","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"3:00pm","lat":"1321354","long":"-3436546","name":"FACEPAINTING","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"4:00pm","lat":"1321354","long":"-3436546","name":"WATER BALLOON PLAY (KIDS POOL)","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"5:00pm","lat":"1321354","long":"-3436546","name":"CLOSED","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"7:30pm","lat":"1321354","long":"-3436546","name":"MOVIE NIGHT & POP CORN (THEATER 7:30)","order":"6","set":true}
],
"wednesday":
[
{"description":"","finish":"","id":"1","hour":"9:00am","lat":"","long":"","name":"MY GYM PARENTS & TODDLER (AGES 2YRS-4YRS)","order":"1","set":true},
{"description":"","finish":"","id":"2","hour":"10:00am","lat":"","long":"","name":"PIRATE HAT","order":"2","set":true},
{"description":"","finish":"","id":"3","hour":"11:00am","lat":"6768723","long":"-869875","name":"PLAY TIME","order":"3","set":true},
{"description":"","finish":"","id":"2","hour":"12:00pm","lat":"354654","long":"-68769","name":"MY GYM TREASURE HUNT","order":"4","set":true},
{"description":"","finish":"","id":"4","hour":"1:00pm","lat":"","long":"","name":"LUNCH TIME","order":"5","set":true},
{"description":"","finish":"","id":"2","hour":"2:00pm","lat":"1321354","long":"-3436546","name":"NICK TIME (DORA & BOOTS)","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"3:00pm","lat":"1321354","long":"-3436546","name":"FACEPAINTING","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"4:00pm","lat":"1321354","long":"-3436546","name":"FOOD SHAPES (COOKING CLASS MEETING POINT AZULITOS)","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"5:00pm","lat":"1321354","long":"-3436546","name":"CLOSED","order":"6","set":true},
{"description":"","finish":"","id":"2","hour":"7:30pm","lat":"1321354","long":"-3436546","name":"MY GYM PARENTS NIGHT OUT GAMES (AT THE PLAY HOUSE 7:30) (4-12 YRS) NIGHT PERFORMANCE (THEATER)","order":"6","set":true}
]
}
}
this.days = Object.keys(this.navData['activities']);
}
ionViewDidLoad() {
this.slider.slidesPerView = 'auto';
this.slider.centeredSlides = true;
this.slider.paginationClickable = true;
this.slider.spaceBetween = 30;
this.slider.loop = true;
}
}
Can you post a minimal example (template) where I can reproduce the issue? I've tried quickly but slides don't seem to be meant to be scrollable (vertically). I need to see how you're using them.
Thx for the update, but the scrolling still does not happen for me. Could you also post your scss file? I guess you modify in there the overflow style somehow.
Sorry, didn't get a chance yet. I'll try once I have better connection.
Yes, I can reproduce it. Will have a look, but I'm not sure if there's a 'clean' fix for this. Will post back.
@jorgemejia Can you please try the following and tell me if this will work for you? Instead of modifying the slides CSS I tried the approach using an ion-scroll. The solution is not perfect (yet) but looks like a way to continue. This is my template:
<ion-header>
<ion-navbar>
<ion-title>
Sticky w/ ion-slides
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding scrollY="false">
<ion-slides>
<ion-slide *ngFor="let day of days">
<ion-scroll scrollY="true" style="height:80vh" #content>
<ion-card>
<ion-item ion-affix [content]="content" no-lines>
<h3>{{day}}</h3>
</ion-item>
<ion-card-content>
<div *ngFor="let item of items" class="card-body" style="height: 80px">
{{item}}
</div>
</ion-card-content>
</ion-card>
</ion-scroll>
</ion-slide>
</ion-slides>
</ion-content>
This is my component:
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage({
name: 'slides',
priority: 'high'
})
@Component({
templateUrl: 'slides.html'
})
export class SlidesPage {
days = ['SUNDAY', 'MONDAY', 'TUESDAY'];
items = Array.from({length: 15}, (value, key) => key);
}
The only CSS change I added was
.swiper-slide {
display: block;
}
Do you think this approach is working for you?
This works fine in the web browser, but in iOS sometimes disappear the entire slide, the header sticky transition is slow and when I scroll down appears the header twice (one small and the sticky)
Argh, ok. I will have another look when I have time. If you have a fix PRs are always welcome :).
Thanks alot for your time, if I have a better way to do it i will post it.