I am using ionic Slide box and I want to disable for a user to slide between content horizontally using $ionicSlideBoxDelegate.enableSlide(false);
but this means i cant scroll vertically with the content. How do I work around this.
Use ion-content scroll == true inside ion-slide
<ion-slide-box show-pager="false" on-slide-changed="yourfunction()" does-continue="false" auto-play="false" slide-interval="100" >
<ion-slide>
<ion-content scroll="true">
your first slide
</ion-content>
</ion-slide>
<ion-slide>
<ion-content scroll="true">
your second slide
</ion-content>
</ion-slide>
<ion-slide>
<ion-content scroll="true">
your third slide
</ion-content>
</ion-slide>
</ion-slide-box>
Related
I'm trying to add a fullscreen view but the notch area gets a white bar
page.html
<ion-content>
<ion-slides>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
</ion-slides>
</ion-content>
how do I extend the background image to the notch area?
Add preference for staus bar
<preference name="StatusBarStyle" value="color" />
Is it possible to select a slide to display with a focus on as the initial one? I have an array of items to display in Ionic slides, and I want to "preselect" (= put focus on the slide) based on preferences but keep the order.
I have read the Ionic documentation, but I am probably missing something. So far it looks I would need to use the slideTo function in the constructor of the page, but I was looking for a directive to use directly in the html template.
Thank you for any info.
.html
<ion-slides pager="true" [options]="slideOpts">
<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>
.ts
slideOpts = {
initialSlide: 2,
speed: 400
};
all the options are here http://idangero.us/swiper/api/
I'm using Ionic 4 and tab layout.
I have one tab page with QR Code Scanner. Hence the the page is set to transparent as below
<ion-content padding color="transparent">
<ion-item lines="none" class="top-content">
<ion-grid>
<ion-row>
<ion-col>
<ion-label text-center no-margin>
Scan QR Code to start
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
and have following interface
The second tab displays a list of items and thus have pull-to-refresh on the page. The code is
<ion-header>
<ion-toolbar color="primary">
<ion-title>Item List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher slot="fixed" (ionRefresh)="refreshList($event)">
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<ion-card color="primary" (click)="showAction(1)">
<ion-card-content>
<!-- item content -->
</ion-card-content>
</ion-card>
</ion-content>
But on pulling the page, it shows transparent background from the first page where the QR Code scanner has opened the camera and thus on pulling it shows camera output.
How can I close or hide page before opening a new page?
I want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
I'm trying to create a card in my ionic 2 application, like this example from the documentation:
So I wrote this:
<ion-content padding>
<ion-card *ngFor="let item of myItems">
<ion-item id="card-header">
<ion-avatar item-start>
<img src="image_url" >
</ion-avatar>
<h2>Person name</h2>
<p>99/99/9999</p>
</ion-item>
<ion-card-content>
My content
</ion-card-content>
</ion-card>
</ion-content>
But what I'm getting is this:
As you can see the avatar is positioned on a full line, not on the same line as the person name and other line. Why my avatar icon is not beeing shown on the left side of the line?