I'm working in ionic v5. I want to slide images on pager dots click, but it is not working now.
My code is:
<ion-slides pager="true">
<ion-slide>
<p>Page1</p>
</ion-slide>
<ion-slide>
<p>Page2</p>
</ion-slide>
<ion-slide>
<p>Page3</p>
</ion-slide>
</ion-slides>
</ion-content>
By default they are not clickable but, as you can see in the Ionic docs you can set the options of the slider to change that:
options: Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
Component
import { Component } from "#angular/core";
#Component({
selector: "app-home",
templateUrl: "home.page.html",
styleUrls: ["home.page.scss"]
})
export class HomePage {
public items = ["Option 1", "Option 2", "Option 3"];
public sliderOptions = {
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true
}
};
}
Template
<ion-header>
<ion-toolbar>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2>Welcome to Ionic!</h2>
<p>
Slider with clickable pager:
</p>
<ion-slides pager="true" [options]="sliderOptions">
<ion-slide *ngFor="let item of items">
<p>{{ item }}</p>
</ion-slide>
</ion-slides>
</ion-content>
Please take a look at this stackblitz demo.
Related
I would like to set a button that opens and hides some ion-item in a dropdown.
I know that there might be a solution in the docs but I am unable to find it
<ion-header>
<ion-toolbar>
<ion-title>Technical Information</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>Manuales</ion-label>
</ion-list-header>
<ion-item *ngFor="let m of manuals">
<ion-label>{{m}}</ion-label>
</ion-item>
</ion-list>
<!-- Other <ion-list-header>s and <ion-item>s -->
</ion-content>
I would like to hide and show all Items when clicking on each ion-list-header, show his own ion-item with *ngFor, like if there are 20 manuals, dropdown all 20 manuals and hide others ion-list-headers...
Is there a way to do it with this structure or maybe with another?
Try this:
<ion-header>
<ion-toolbar>
<ion-title>Technical Information</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let m of manuals; let i=index">
<ion-list-header>
<ion-label (click)="showOrHide(i)">Manuales</ion-label>
</ion-list-header>
<ion-list id="{{i}}" style="display:none">
<ion-item *ngFor="let m of m.list">
<ion-label>{{m}}</ion-label>
</ion-item>
</ion-list>
</ion-list>
</ion-content>
In .ts component:
import { Component } from '#angular/core';
import { NavController , AlertController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
manuals = [{
id:1,
list: ["1","2","3"]
},
{
id:2,
list: ["1","2","3"]
},
{
id:3,
list: ["1","2","3"]
},
{
id:4,
list: ["1","2","3"]
}]
constructor() {
}
showOrHide(id){
const listItemShow = document.getElementById(id);
if(listItemShow.style.display === "none")
listItemShow.style.display = "block"
else
listItemShow.style.display = "none"
}
}
I am using ion-slide in ionic4 and i want to go for next slide manually by clicking on button. I have seen the ion-slide documentation in which they have mention slideNext method. But I don't know how to use this method for changing slide.
Ya, I got the solution. In ionic 4 you have to import IonSlides instead of Slides.
home.ts
import { IonSlides} from '#ionic/angular';
export class HomePage {
#ViewChild('mySlider') slides: IonSlides;
swipeNext(){
this.slides.slideNext();
}
}
home.html
<ion-slides pager="true" pager="false" #mySlider>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
<ion-button (click)="swipeNext()">Next</ion-button>
</ion-slides>
In Angular 8 :
#ViewChild('mySlider', { static: true }) slides: IonSlides;
Is simple and just necessary in html
<ion-slides #slides pager="true">
<ion-slide>1
</ion-slide>
<ion-slide>2
</ion-slide>
</ion-slides>
<ion-button (click)="slides.slidePrev()" > Prev </ion-button>
<ion-button (click)="slides.slideNext()" > Next </ion-button>
Simple way (same as above answer but I tried to make it simpler):
import { Slides } from 'ionic-angular';
class abc {
#ViewChild(Slides)slides: Slides;
public next(){
this.slides.slideNext();
}
public prev(){
this.slides.slidePrev();
}
}
I'm not able to get parallax effect to work with ionic4 ion-slider. I've tried examples from the original source code of idangero but none seem to work.
import { Component } from '#angular/core';
#Component({
selector: 'slides-example',
template: `
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<ion-img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></ion-img>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
`
})
export class SlideExample {
slideOpts = {
effect: 'flip', // <-- this does not work either
parallax: true
};
constructor() {}
}
I'm building a mobile app in ionic and I wanna make a slack-like side menu by placing slides.
For example, when you click on main menu item, it will slide out another slide in the sidemenu as slack does.
I tried to use ion-slides in ion-menu but slides is not working.
Check out the screenshot, please.
Here is the code snippet.
<ion-menu [content]="mycontent" [swipeEnabled]="false">
<ion-content>
<ion-slides>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
Here is what I'm trying to build.
Any thoughts on how to implement this?
Thanks.
The ion-slides component makes use of the Swiper library under the hood. Part of the init code for Swiper depends on knowing the width of the slide container, and the code uses clientWidth to get it. Since the menu starts out with display:none, the retrieved width is always zero and the init code bails on you.
You can get around this by temporarily setting display:block while Swiper initializes. I have my side menu inside of a component, so you may need to adjust this code to your situation:
app.html:
<sidebar [content]="content"></sidebar>
<ion-nav #content [root]="rootPage" swipeBackEnabled="false"></ion-nav>
sidebar.html:
<ion-menu [content]="content" swipeEnabled="false">
<ion-content>
<ion-slides pager>
<ion-slide>
<h2>Slide 1</h2>
</ion-slide>
<ion-slide>
<h2>Slide 2</h2>
</ion-slide>
<ion-slide>
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
</ion-content>
</ion-menu>
sidebar.component.ts:
...
#Component({
selector: 'sidebar',
templateUrl: 'sidebar.html',
})
export class SidebarComponent implements AfterViewInit {
#Input('content') content: NavController;
#ViewChild(Slides) slides: Slides;
#ViewChild(Menu, { read: ElementRef }) menuRef: ElementRef;
// Use Renderer2 instead of direct DOM manipulation through the
// ElementRef.nativeElement.
//
// #see: https://medium.com/#kmathy/angular-manipulate-properly-the-dom-with-renderer-16a756508cba
//
constructor(private renderer: Renderer2) {
}
// ViewChild template references might not be available until
// AfterViewInit lifecycle hook runs.
//
// #see: https://blog.angular-university.io/angular-viewchild/
//
ngAfterViewInit() {
this.renderer.setStyle(this.menuRef.nativeElement, 'display', 'block');
setTimeout(() => {
// Swiper init has its own ngAfterViewInit code that delays 300ms
// before running. Don't remove the 'display' style until after that.
this.renderer.removeStyle(this.menuRef.nativeElement, 'display');
}, 310);
}
}
I am building a tabbed application in Ionic 2 which has five tabs one being the home page. The tabs work fine. I am trying to add a menu for each tab page other than the home page. I have duplicated and added the code below for each of the 4 pages in the home page just changing the menu id;s and the content id's. Everything works fine for the first page I access the subsequent pages I access just don't do anything. I thought this would be quite simple but already have spent days looking for a solution. The docs just refer to different menus on one page not different menus on several pages. Newbie so guess its simple. Help please.
<ion-header>
<ion-navbar color="dark">
<button ion-button menuToggle="menujoinus">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>JOIN US</ion-title>
</ion-navbar>
</ion-header>
<ion-menu [content]="joinuscontent" id="menujoinus">
<ion-content>
<ion-list>
<button ion-button block icon-right color="secondary" menuClose="menujoinus">Close
<ion-icon name="close"></ion-icon>
</button>
<button ion-item icon-left (click)="openPageFieldguides()">
<ion-icon name="compass"></ion-icon>
Field Guides
</button>
<button ion-item icon-left (click)="openPageVolunteers()">
<ion-icon name="clipboard"></ion-icon>
Volunteers
</button>
<button ion-item icon-left (click)="openPageOwner()">
<ion-icon name="key"></ion-icon>
Owners
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #joinuscontent [root]="rootPage"></ion-nav>
It's a bit confusing but you need to add all the menus to the app component - not any of the sub pages - and then reference whichever you need from the sub page using the MenuController. In some cases you may need to disable/enable menus on the sub page but depends on the situation. Take a look at http://ionicframework.com/docs/api/components/app/MenuController/ and the "Multiple Menus on the Same Side" and "Multiple Menus on Different Sides" for more information.
An example:
<!-- Menu 1 -->
<ion-menu id="menu-one" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 1</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Menu 2 -->
<ion-menu id="menu-two" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #nav [root]="rootPage"></ion-nav>
And on the sub page:
import { Component } from '#angular/core';
import { MenuController } from 'ionic-angular';
#Component({
selector: 'sub-page',
templateUrl: 'sub-page.html'
})
export class SubPage {
constructor(public menuCtrl: MenuController) {
// menuCtrl.enable(false, 'menu-one');
menuCtrl.enable(true, 'menu-two');
}
toggleMenu() {
this.menuCtrl.toggle();
}
}
The gotcha is the doSomething() method needs to be on the app component, not the sub page component.