(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
1 post - 1 participant
↧
Set background gradient on ion-page
↧
Change ion-page background color when ion-slide transitions
Hi, I want to change the background color of the entire page of my app each time an ion-slider transitions. I’m new to Vue3 and Ionic and wondering if someone can point me in the right direction. The code I have so far is this
<template>
<ion-page>
<ion-header>
<h1>My Colorful Slider</h1>
</ion-header>
<ion-content :fullscreen="true">
<ion-slides :options="slideOpts" @ionSlideTransitionStart="slideChange()">
<ion-slide>
<p>Slide 1</p>
</ion-slide>
<ion-slide>
<p>Slide 2</p>
</ion-slide>
<ion-slide>
<p>Slide 3</p>
</ion-slide>
</ion-slides>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonPage, IonHeader, IonContent, IonSlides, IonSlide,} from '@ionic/vue'
export default {
name: 'Slider',
components: { IonHeader, IonContent, IonPage, IonSlides, IonSlide,},
setup() {
const slideOpts = {
autoplay: {
delay: 5000,
},
loop: true,
}
return { slideOpts }
},
methods: {
slideChange(event) {
/* Get current slide number and change class name of ion-page here? */
console.log('slideChange')
}
},
}
</script>
<style scoped>
ion-slides {
height: 100%;
}
.ion-page {
--ion-background-color: red;
}
.ion-page--2 {
--ion-background-color: green;
}
.ion-page--3 {
--ion-background-color: blue;
}
</style>
I don’t know if this is the right start or not but if it is I don’t know how to get the active slide in slideChange method in order to set the right class attribute on the ion-page element. If this is possible then presumably I need to put a binding in the ion-page element?
I guess I’m just not confident this is even the right approach so I’m hoping someone might be able to steer me in the right direction before I go (further) in the wrong direction!
5 posts - 2 participants
↧
↧
How to make IonHeader disappear on scroll down
Hey guys, i want to make the IonHeader disappear on scroll down and appear on scroll up in React. I saw so many stuff in Angular but I have not seen an example using React. Can you please give me a tip?
Thanks!
1 post - 1 participant
↧
How to get the value of searchbar in infinite scroll function
searchPublikasi(ev: any) {
// set val to the value of the searchbar
let val = ev.target.value;
this.publicationList.searchPublikasi(val).subscribe((publicationListData:any) => {
this.allPublication= publicationListData.data;
this.listDomain=this.allPublication[1];
})
}
doInfinite(infiniteScroll) {
console.log('Begin async operation');
this.page = this.page+1;
// set val to the value of the searchbar
let val = ev.target.value;;
setTimeout(() => {
this.publicationList.searchPublikasi(val).subscribe((publicationListData:any) => {
for (let pub of publicationListData.data[1]) {
this.listDomain.push(pub)
}
});
console.log('Async operation has ended');
infiniteScroll.complete();
}, 1000)
}
<!--Adds a search bar and an ionInput event to trigger the searchMovies function everytime a user types-->
<ion-searchbar placeholder = "Cari Publikasi" (ionInput)="searchPublikasi($event)"></ion-searchbar>
<span *ngFor="let list of allPublication" color="dark">
<ion-label style="font-size: 1rem;text-align: right;padding-right: 2%;">
Menampilkan {{list.total}} Publikasi
</ion-label>
<ion-grid *ngFor="let pub of listDomain">
<ion-card (click)="launchPubDetailsPage(pub)">
<ion-row>
<ion-col size="1">
<ion-item>
<ion-thumbnail>
<ion-img [src]="pub.cover"></ion-img>
</ion-thumbnail>
</ion-item>
</ion-col>
<ion-col size="11" style="font-weight: bold;">
<ion-label color="danger" style="font-size: 1.1rem;">{{pub.rl_date}}</ion-label>
{{pub.title}}
<ion-label color="secondary" style="font-size: 1.1rem;">{{pub.size}}</ion-label>
</ion-col>
</ion-row>
</ion-card>
</ion-grid>
</span>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="circles" loadingText=""></ion-infinite-scroll-content>
</ion-infinite-scroll>
searchPublikasi(searchStr:string){
return this.http.get(this.apiUrl+""+this.page+"/keyword/"+searchStr+"/key/790ab00650e59132961637e651ba47fb/")
.do(res=>console.log(res))
.map(res=>res);
}
I really confused, how to get the value that user input in search bar and used it in doInfinite.
2 posts - 2 participants
↧
Ionic firebasex subscribetopic not working with ios
In ionic ios app notification received when I sent using token but not received when I subscribe topic.
I have uploaded APNs Authentication Key in the firebase console.
1 post - 1 participant
↧
↧
Geolocation Watch Handling Errors
When you’re using Geolocation watchPosition what is best practice for restarting the watch when someone navigates away from the application and then comes back, or turns off the location service and then turns it back on during the use of the application?
These both seem to trigger an error, but not sure if I should just be recursively call the watch after an error occurs or if there’s a better way. The application I’m working on requires the position of the user often for navigation. Everything is working as expected except for these two cases where an error is thrown and I’m not sure of best practice.
2 posts - 2 participants
↧
Change z-index of overlays in ionic framwork version 5
Hi 
The Problem:
The z-index of the dialog is 90
The Question: How can i change the z-index of overlays in the ionic Framework?
1 post - 1 participant
↧
Can the content be "active" when a menu drawer is opened?
I am trying to create an application with a side menu.
The code is basically copied over from the <ion-menu> docs.
The current behavior is that the main content is “disabled” when the menu is opened. That is it is not possible to interact with the main content. It is covered with a backdrop that closes the menu on tap/click.
The behavior I’d like to have is the one from the <ion-split-pane> on larger screen: Users can interact with both the menu and the main content.
However I would like that behavior on any screen size (i.e. mobile and desktop).
I do use the latest ionic from the CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
Any help/hint would be appreciated.
(It hadn’t taken a look at ionic in a long time and I love the components and the native solution, congrats on a great project!)
1 post - 1 participant
↧
Capacitor android push notification
how can I configure the push notification to register to a topic??
1 post - 1 participant
↧
↧
Ionic Components for Filtering and Visible List Results
Dear Ionic Framework Community
it is fun working with Ionic Vue for creating a mobile app but right now I am asking myself how to solve the following:
I am loading a big list of up to 200 entries/items with images from a database to detect and choose the right animal. I want to include a filter option to narrow down the results of the list. however if possible I want to have the ‘filter window’ visible all the time when one wants to filter and at the same time immediately see the best results/items in the list after clicking on the filter options (quite some checkboxes in different categories)
thus I don’t know which components I can use to fulfill this. If I use a Ionic Menu too much of the screen is covered. With a modal window I can’t see the current list neither. do you know a solution somehow?
1 post - 1 participant
↧
NFC addTagDiscoveredListener and addNdefListener
Hello,
I want to write a bunch of NdefRecords and also use the low-level .transceive method to protect my tag (NTAG 213). Problem is you can’t subscribe both to addTagDiscoveredListener and addNdefListener because the addNdefListener takes precedence over the addTagDiscoveredListener and the second one never triggers an event.
Like wise you cannot unsubscribe from these two events in Ionic, the PhoneGap-NFC library supports unsubscribing/removeing the listeners but Ionic does not expose that and the API calls are actually a bit different than the one in the PhoGap-NFC lib.
How can this be done? (writing both NDEF records and low-level transceive)
1 post - 1 participant
↧
Load animation from animate.css after data is loaded
Hi, I’m using animate.css to animate my application. I load the data from firestore. Since it takes some 3sec to load the data, the animation is not shown. So, i need to show the animation after my data is loaded. Is there anyway to do this? I tried using ngClass and passing animate class after data is laoded but no luck. Kindly share your thoughts on this.
1 post - 1 participant
↧
Bottom and center
I’m looking at a Ionic tutorial that is a year old, and I made with it a basic page HTML page with Ionic components :
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title >Budget Planner</ion-title>
</ion-toolbar>
</ion-header>
<io-content>
<ion-card>
<ion-card-header>New Expense</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label position="floating">Expense Reason</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Expense Amount</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
</io-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
The result is this :
My question is why is it centered vertically and how could I make each new component not “start from the bottom” but from the top.
When I hadn’t had the footer. The components would be at the bottom of the page.
Note : in the tutorial I’m watching this doesn’t happen so I’m wondering if it’s normal or maybe I missed something
1 post - 1 participant
↧
↧
Air Operated Double Diaphragm in Chandigarh
Air Operated Double Diaphragm Pump in Chandigarh
Pioneers in the industry, we offer peristaltic AODD pumps for industries like the Chemical & Refineries, Wastewater Treatment, Food & Beverages, Paints & Coating, Pharmaceutical, Steelworks & Foundries, Cosmetics & Cleaning, Semiconductor & Electronics, Textile & Tanning, etc. We provide the best possible solution for the product and provide 24*7 services. To know more contact +91 93561 05272 or visit our website.
1 post - 1 participant
↧
Appflow build for Android fails: Illegal character in opaque part at index 2: C:\Keystore\---.jks
Hello,
I need help with Package Build 7180429, trying to build Ionic Vue for Android. I only just purchased Appflow, but unfortunately it is not yet working out of the box for me. I am getting the following error. Any ideas?
[13:31:54]: Shell command exited with exit status 1 instead of 0.
Welcome to Gradle 5.6.4!
Here are the highlights of this release:
- Incremental Groovy compilation
- Groovy compile avoidance
- Test fixtures for Java projects
- Manage plugin versions via settings script
For more details see https://docs.gradle.org/5.6.4/release-notes.html
Starting a Gradle Daemon (subsequent builds will be faster)
FAILURE: Build completed with 2 failures.
1: Task failed with an exception.
-----------
* Where:
Build file '/builds/gilbertsmink/fatpeacock-ionic/android/app/build.gradle' line: 6
* What went wrong:
A problem occurred evaluating project ':app'.
> java.net.URISyntaxException: Illegal character in opaque part at index 2: C:\Keystore\---.jks
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
==============================================================================
2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':app'.
> compileSdkVersion is not specified. Please add it to build.gradle
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
==============================================================================
* Get more help at [https://help.gradle.org](https://help.gradle.org/)
BUILD FAILED in 16s
1 post - 1 participant
↧
How to set Gradle Java (JDK) Version in IONIC
Hello,
i get this error: error: lambda expressions are not supported in -source 1.6
It is possible to switch the compileOptions in the build.gradle of platform/android to 1_8 and it works:
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_6 -> VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_6 -> VERSION_1_8
}
But when I remove the platform android this step is neccessarc and i am not able to automat the builds.
Why does IONIC take Java Version 1.6 instead of installed JDK 1.8?
Is it possible to change this?
My environment:
Ionic:
Ionic CLI : 6.4.0 (C:\Users\Oliver\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : ionic-angular 3.9.8
@ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : not installed
Cordova Platforms : -android 6.4.0, ___android 6.4.0, android 6.3.0, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 22 other plugins)
Utility:
cordova-res : not installed
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (C:\Users\Oliver\AppData\Local\Android\Sdk)
NodeJS : v10.23.1 (C:\P
Hope for your help, thanks in advance!
regards,
Oliver
1 post - 1 participant
↧
Understanding Changes to Capacitor 3 core plugins
Originally published at: https://ionicframework.com/blog/understanding-changes-to-capacitor-3-core-plugins/
When we announced Capacitor 3.0 beta last week, one of the biggest changes we mentioned was around the core Capacitor APIs. All officially supported plugins are now installed and versioned separately from Capacitor core. While this may seem like a pretty drastic change, the migration is fairly straight forward. With these changes, developers actually have…
2 posts - 1 participant
↧
↧
Artificial or ancient
Does anyone knows the difference between ancient and modern latest pendants?
see more to check the relatable answers.
1 post - 1 participant
↧
Value of litecoin
Does anyone knows how litecoin came into the market? how this currency will beat other currencies?
see more for relevant information
1 post - 1 participant
↧
Imported npm package not working
Hi all!
I am developing an app which has a list of objects that I want to paginate. I found vuejs-paginate plugin but I can’t make it work in my view.
After installing it via npm and importing in the view, its tag is in fact in the HTML skeleton of the page, but it shows nothing. No error is displayed in the console either, only this Vue warning:
[Vue warn]: Failed to resolve component: paginate
Might it be a problem with the import? Could you help me?
I attach part of my code so you can see how I’ve declared it.
<template>
<ion-page>
<ion-content>
<paginate
:pageCount="10"
:containerClass="'pagination'"
:clickHandler="clickCallback"
>
</paginate>
</ion-content>
</ion-page>
</template>
<script>
import {
IonContent,
IonPage,
} from "@ionic/vue";
import { defineComponent } from "vue";
import { VuejsPaginate } from "vuejs-paginate";
export default defineComponent({
name: "Gestion",
components: {
'paginate': VuejsPaginate,
},
methods: {
clickCallback: function(page) {
console.log(page)
},
});
</script>
This has also happened to me when trying to import other “external” components. Could it be a problem related to Ionic?
Thank you in advance!
1 post - 1 participant
↧