hello, can i use this market in my ionic react apps ?
Best regards.
1 post - 1 participant
↧
Ionic market
↧
Collapsed header
Hi,
I’m trying to implement a collapsed header
that will be collapsed on scrolling down and expand on scrolling up
all examples I found are expanding only when the user reaches the top of the page
while I want it to expand when the user scrolls up without a connection to the location of the page
thanks
1 post - 1 participant
↧
↧
Ionic background card
Hello community,
I added the image as background for my card, but I did not find the way to fix the size and the position.
I created a class to add image as background :
.ion-card-content-background-1{
--background: url(../../../assets/icon/settings.png) no-repeat ;
}
anyone can help me ?
1 post - 1 participant
↧
Offline-first app development (local storage + server sync)
I’m delving into my first Ionic Vue cross-platform offline-first app and would love to hear any advice for tools to go about it, particularly for local data storage and two-way sync to server. Here’s a simple summary of technical needs for the app:
- Offline, local storage by default
- Optional account signup enables two-way sync with server
- CRUD operations on text data (no images or other file types for now)
- Cross-platform Android, iOS, and web
The two-way sync needs to be robust enough to handle frequent usage back and forth between mobile and web apps, and I’d like to use a library that handles as much of the sync logic as possible. If it has integrations for Ionic and/or Vue even better.
From what I’ve researched these seem to be the existing options for local storage with sync to server:
- PouchDB + CouchDB (tutorial: Offline First Shopping List – The Data Lab)
- Realm + MongoDB Atlas
- AWS Amplify DataStore + AppSync (tutorial)
PouchDB looks ideal, I’m just surprised by the small number of GitHub repos using it with Vue. I’m also open to SQL-based options.
Also I get the impression that to really persist local storage, I’ll need to also use the Ionic storage module as well. Is this accurate?
Much thanks for any recommendations or advice.
1 post - 1 participant
↧
How can I do that?
I want to make it like the picture below if a user is online. 
1 post - 1 participant
↧
↧
Angular, Vue or React - Which one should we choose?
We are currently evaluating Ionic for an app project and find it very exciting. Meanwhile there is the possibility to choose Angular, Vue or React as a frontend framework.
Regardless of personal preferences, is there a recommendation on what to go with?
Iconic started with Angular, is its base the best developed and matured or does it make no difference today to take Angular, Vue or React and it is then really only dependent on personal preference?
Thanks a lot for the help!
Best regards,
Marvin
1 post - 1 participant
↧
Humanoid Robots Customized for your Business - MI Robots
Searching for robotics solutions for your business? Look no further than MI Robots. We have a fantastic range of humanoid robots that can be used for a variety of business tasks including greeting visitors, guiding visitors to different locations, give product information through audio, videos, and pictures, etc. To learn about its other features and functions, check out our official website now!
1 post - 1 participant
↧
My Pwa doesnt work offline. I have all data available on local storage
Hi everyone, I have a problem with my PWA ionic5 + angular 10.x. on firebase.
All the data I use on the app is served only by localstorage so whenever I access the pwa I have already all the data on client side, I just need to update some data when it is needed.
Now, it works as it should without any issue, the problem is when I switch off the network simulating no internet connection then there is nothing to do the app doesnt even start, I only get the message from the browser saying no internet connection.
In the same moment I can inspect the localstorage and all the data are there available so I cannot understand what is wrong…
I just would need that the pwa to start as usual and access localstorage (in app.component) to get all the data needed to work.
Is there a way to have a control of the app on browser or in PWA mode if there is not an active connection?
P.S: I use ionic for the website, the pwa and the usual native versions.
1 post - 1 participant
↧
Implementation of Animations API
Hi,
I seem to be often struggling with applying certain additional Ionic API’s to my codebase.
At this moment I’m trying out the basics of the new Animations API, but I cannot even get the simplest example to work.
Does anyone know what I do wrong?
<template>
<ion-page>
<ion-content fullscreen>
<div ref="pages" class="pages">
Pages
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, createAnimation } from '@ionic/vue'
import { ref, onMounted, defineComponent } from 'vue'
export default defineComponent({
name: 'Editor',
components: {
IonPage,
IonContent,
},
setup(){
const pages = ref()
const animation = createAnimation()
.addElement(pages.value)
.duration(1500)
.iterations(Infinity)
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
.fromTo('opacity', '1', '0.2')
onMounted(() => {
animation.play()
})
return { pages }
},
})
</script>
1 post - 1 participant
↧
↧
Boucle avec ionic
bonjour
j’ai effectuer une boucle pour afficher un tableau, le problème c est que lorsque je remet un nouveau produit il me réaffiche tout le tableau complet a la suite.
comment je peut mettre la boucle [i] dans ce code?
merci
1 post - 1 participant
↧
Custom TabBarButtons with styled-components (problem)
Hey Ionic team, thanks for an amazing project love using it.
I am working on a mobile app with IonicReact and I hit an issue that I cannot wrap TabBarButton components with styled-components (for example) or make my own button and push into the TabBar because of this still if (I assume it’s where it’s happening) in the source code. ionic-framework/IonTabBar.tsx at master · ionic-team/ionic-framework · GitHub
Am I missing something that makes it possible to use my own component? Let’s call it StyledTabBarButton?
And if not, what is the reasoning behind this approach, quite curious if there is a reason behind it as well.
Thanks for your time
1 post - 1 participant
↧
New capacitor 3 "run" command
Hi!
Just started updating capacitor to rc3 and when executing “npx cap run android” I only get this output:
npx cap run android
√ Copying web assets from www to android\app\src\main\assets\public in 10.95s
√ Creating capacitor.config.json in android\app\src\main\assets in 6.98ms
√ copy android in 11.00s
√ Updating Android plugins in 6.40ms
[info] Found 4 Capacitor plugins for android:
@capacitor/app@0.3.6
@capacitor/haptics@0.3.6
@capacitor/keyboard@0.5.6
@capacitor/storage@0.3.6
√ update android in 101.56ms
Then the terminal returns to the command prompt. Could this be a bug or am I missing some step on the upgrade process?
1 post - 1 participant
↧
Problem hosting Ionic app on Heroku (Ionic Vue)
Hi, I am trying to host my Ionic app on Heroku and I am having trouble. Here is what I have tried:
-
I followed Simon Grimms YouTube video “How to Deploy Your Ionic App as Website to Heroku” and I did the following steps:
-
Made a server.js file at the top level of my Ionic app. Added the following code:
var express = require('express');
var app = express();
var morgan = require('morgan');
var bodyParser = require('body-parser');
var cors = require('cors');
app.use(morgan('dev'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(cors());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(express.static('dist'));
const port = process.env.PORT || 5000;
console.log(port);
app.listen(port, () => console.log(`Server started on port ${port}`));
And installed the packages in the project obviously. Here I changed from “www” to “dist” as that is now name of the build folder.
3. Move the contents of devDependencies into dependencies in package.json
4. Made Procfile with the content: web: npm run build && npm start
5. I had already created the Heroku app, initialized repo and had everything set up
6. Standard Heroku procedure of git add ., git commit -m “”, and then git push heroku master
This builds and deploys my app, but when I go to /login (where I start) or any other route it doesn’t know what I am talking about and I get the following error:
2021-03-09T21:04:03.203199+00:00 heroku[router]: at=info method=GET path="/login" host=quiz-app-client.herokuapp.com request_id=53a308e2-72ce-40df-a758-6315af4b5399 fwd=“212.10.104.241” dyno=web.1 connect=1ms service=3ms status=404 bytes=541 protocol=https
And the same behavior happens when I run it with heroku local on the 5000 port.
Here is what my dependencies look like:
“scripts”: {
“serve”: “vue-cli-service serve”,
“start”: “node server.js”,
“build”: “vue-cli-service build”,
“test:unit”: “vue-cli-service test:unit”,
“test:e2e”: “vue-cli-service test:e2e”,
“lint”: “vue-cli-service lint”
},
“dependencies”: {
“@capacitor/android”: “^2.4.5”,
“@capacitor/core”: “2.4.5”,
“@ionic/vue”: “^5.4.0”,
“@ionic/vue-router”: “^5.4.0”,
“axios”: “^0.21.1”,
“body-parser”: “^1.19.0”,
“core-js”: “^3.6.5”,
“cors”: “^2.8.5”,
“express”: “^4.17.1”,
“firebase”: “^8.2.2”,
“ionicons”: “^5.4.0”,
“mongoose”: “^5.11.11”,
“morgan”: “^1.10.0”,
“vue”: “^3.0.0-0”,
“vue-router”: “^4.0.0-0”,
“vuex”: “^4.0.0-rc.2”,
“@capacitor/cli”: “2.4.5”,
“@vue/cli-plugin-babel”: “~4.5.0”,
“@vue/cli-plugin-e2e-cypress”: “~4.5.0”,
“@vue/cli-plugin-eslint”: “~4.5.0”,
“@vue/cli-plugin-router”: “~4.5.0”,
“@vue/cli-plugin-unit-jest”: “~4.5.0”,
“@vue/cli-service”: “~4.5.0”,
“@vue/compiler-sfc”: “^3.0.0-0”,
“@vue/test-utils”: “^2.0.0-0”,
“eslint”: “^6.7.2”,
“eslint-plugin-vue”: “^7.0.0-0”,
“vue-jest”: “^5.0.0-0”
},
Everything works perfectly fine if I use ionic serve and use the 8100 port. I don’t know if it has something to do with the router in Vue and setting up routes in the server.js?
I’m hoping you can help figure out what is wrong. Any help or any attempts to help are greatly appreciated. Thank you.
5 posts - 2 participants
↧
↧
Ionic Vue Insomnia
↧
iOS Status Bar and Home Indicator styling
Hello!
I am a product owner and am looking for answers to help my dev team solve a problem we have with status bar and home indicator styling. Basically, I need to know if what we want to do is possible, and if so, would love some direction to documentation that I can share with the team.
Our mobile app is built in Angular using Ionic framework and Capacitor 2.3.
What we would like to do is style the home indicator bar on iOS (I think that is what the very bottom footer is called on iOS) differently than the status bar. As you can see in the screenshot below, the footer and status bar are both blue. We want the footer to be white to match our bottom nav bar like in the screenshot of the mockup.
We found this documentation on the status bar and my lead dev thinks this says we can’t do what we want to do. Is that correct?
Thanks!
1 post - 1 participant
↧
Ionic Vue nested list - connected arrays
How can I achieve a two-level nested list with every record can have several tracks. like this:
<ion-list>
<ion-item :key="record.id" v-for="record in records">
<ion-label>
<h2>{{ record.date }} </h2>
</ion-label>
<ion-list no-lines>
<ion-item :key="track.id" v-for="track in getTracks(record.id)">
<ion-label>
<h2>{{ track.nr}} {{ track.name}} </h2>
</ion-label>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
such as the tracks are dependent of the specific record. above code was my intuitive way of doing it but I am getting an infinite loop (max range of stack exceeded). the method getTracks returns an array of tracks
1 post - 1 participant
↧
How to create a global component on ionic.io with angular 11?
Hello I am trying to create a global component on Ionic.io v6.13.1 with Angular 11
I made a basic app and generated a component naming header
In header component I changed the selector to
Now when I am trying to call the component in any of the modules it throws an error
core.js:14841 NG0304: 'dynamic-header' is not a known element:
1. If 'dynamic-header' is an Angular component, then verify that it is part of this module.
2. If 'dynamic-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
on the console
here is the header.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'dynamic-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
Here is the app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [AppComponent,HeaderComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
I also tried importing the Schema but didn’t work
Here is the other module contact.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ContactPageRoutingModule } from './contact-routing.module';
import { ContactPage } from './contact.page';
import { HeaderComponent } from '../header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HeaderComponent,
ContactPageRoutingModule
],
declarations: [ContactPage]
})
export class ContactPageModule {}
And this is the html code
<ion-header>
<ion-toolbar>
<ion-title></ion-title>
</ion-toolbar>
</ion-header>
<dynamic-header></dynamic-header>
<ion-content>
<ion-grid class="ion-padding">
<ion-card>
<ion-card-header>
<ion-card-subtitle class="ion-padding">Feel free to write to us</ion-card-subtitle>
<ion-card-title class="ion-padding">Contact Us</ion-card-title>
</ion-card-header>
<ion-card-content>
echo background using --background
</ion-card-content>
</ion-card>
<ion-row>
<ion-col class="ion-align-self-center">
<h3 class="ion-padding">Meet us at our Location</h3>
<ul>
<li><strong>Address:</strong> Jalpaiguri, West Bengal</li>
<li><strong >Email:</strong><ion-button class="mail" href="mailto:khabarjalpaiguri@gmail.com" size="small" slot="end" color="light" fill="trasparent">khabarjalpaiguri@gmail.com</ion-button></li>
</ul>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label position="floating"> Your Name</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Your Email</ion-label>
<ion-input type="mail"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Subject</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Your Message</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-button type="submit" color="primary" class="ion-text-center" >Submit Query</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
2 posts - 2 participants
↧
↧
Password Reset with RESTful API
What’s the best way to do a reset password page if you’re connected to a restful API?
I want to send a code to the email of the user and if then if the code typed by the user is the same as the one sent to the email, the user can have the right to update the password. I’m having issues creating the node.js requests also, cause I can’t seem to find a way to connect them. Any help is appreciated. Thanks in advance!
1 post - 1 participant
↧
Integrating form and form validation in Ionic Framework React JS Application using Formik and Yup
1 post - 1 participant
↧
Feedback: add GIFs to plugin repositories
A lot of Capacitor plugins maintained by the community on GitHub don’t have a GIF which shows the functionality of the plugin. A maintainer could make a screenrecording of his app, convert it as a GIF and put it into his readme.md to show the functionality of the plugin, without other developers having to spend minutes to integrate the plugin into their app just to see how it works / looks like.
Would it be possible to make this as requirement for the plugin repositories on GitHub?
1 post - 1 participant
↧