How to add spashscreen to your ionic 5 app with capacitor. The fast way!
npm install -g cordova-res
resources/icon.(png|jpg) must be at least 1024×1024pxresources/splash.(png|jpg) must be at least 2732×2732px
$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy
Build you apps, done!
Little snippet shows how to pass and receive data in a modal in ionic 5. This technique is useful when updating dynamic data.
Little snippet shows how to pass and receive data in a modal in ionic 5. This technique is useful when updating dynamic data.
uppercase
lowercase
titlecase
date[:format[:timezone]]
number[:digitInfo]
currency[:currencyCode[:display[:digitInfo]]]
percent[:digitInfo]
slice:start[:end]
json
async
i18nSelect: mapping
Thats it have fun
// your.scss
/* VERTICAL ROW CENTER */
ion-grid {
height: 100%;
}
ion-row {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
// if you have to adjust your content use this code below
.stat-badge {
top: -10px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
Thats it so far have fun
ionic build // build if never built
ionic cap add android // add android support if not added while start
ionic cap copy // Builds and Copy Web Assets to Capacitor native platform
ionic cap sync // update Project Data
ionic cap open android // opens Project in Android Studio
adb devices //checks android device connection
ionic capacitor copy android
ionic capacitor run android -l --external
Thats it so far have fun
How to add SQLite Database in to your Ionic Project fast and easy without any issues with some short snippets that are very easy to understand!
npm i @capacitor-community/electron
npx cap add @capacitor-community/electron
npx cap open @capacitor-community/electron
Thats it so far have fun
How to add SQLite Database in to your Ionic Project fast and easy without any issues with some short snippets that are very easy to understand!
//main.ts
import { defineCustomElements as jeepSqlite} from 'jeep-sqlite/loader';
jeepSqlite(window);
If you need to install some other platform
npm install @capacitor/android
npm install @capacitor/ios
npm i @capacitor-community/electron
Install SQLite for Capacitor.
npm install @capacitor-community/sqlite
npm run build
npx cap add android
npx cap add ios
npx cap add @capacitor-community/electron
If you want sqlite with web apps
@capacitor-community/sqlite@web
Code updating
npx cap sync
npx cap sync @capacitor-community/electron
For Web App
copy manually the file sql-wasm.wasm from nodes_modules/sql.js/dist/sql-wasm.wasm to the src/assets folder of YOUR_APP
Electron App
cd electron
npm install --save sqlite3
npm install --save-dev @types/sqlite3
npm run build
Build App
npm run build
npx cap copy
npx cap copy web
npx cap copy @capacitor-community/electron
npx cap serve
npx cap open ios
npx cap open android
npx cap open @capacitor-community/electron
Thats it so far have fun
Creating a pipe
// ./pipes/weakness.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'weakness'
})
export class WeaknessPipe implements PipeTransform {
transform(value: any): string {
if (value == null) {
return '1x';
} else if (value == 0.5) {
return '1/2x';
} else if (value == 0.25) {
return '1/4x';
} else {
return value + 'x';
}
}
}
A module for the import in to your page.
// ./pipes/pipes.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WeaknessPipe } from './weakness.pipe';
@NgModule({
imports: [CommonModule],
declarations: [WeaknessPipe],
exports: [WeaknessPipe]
})
export class PipesModule { }
Import the pipe module to your page.
// ./pages/yourpage.module.ts
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
imports: [
CommonModule,
PipesModule
],
})
export class YourPagePageModule {}
Use it like this in your html.
// ./pages/YourPage.page.html
{{your.value | weakness}}
Or in your typescript. import and declare in the constructor.
// ./pages/YourPage.page.ts
import {WeaknessPipe} from '../../pipes/weakness.pipe';
constructor(public weakness: WeaknessPipe) {}
If you want use your pipe only in .html. you don’t have to import to .ts.
If you want to add multiple arguments
// your.html
value="{{c.value | stats : c.key}}"
Thats it have fun
To get started with some custom colors in an ionic 5 app. To use them like the normal ionic colors fast and easy without any issues.
// theme/custom-ion-colors.scss
@import "mixins/ion-color";
:root {
@include ion-color("digital") {
--ion-color-digital: #a5c0c2;
--ion-color-digital-rgb: 165, 192, 194;
--ion-color-digital-contrast: #000000;
--ion-color-digital-contrast-rgb: 0, 0, 0;
--ion-color-digital-shade: #91a9ab;
--ion-color-digital-tint: #aec6c8;
}
}
// theme/mixins/ion-color.scss
@mixin ion-color($color) {
@content;
.ion-color-#{$color} {
--ion-color-base: var(--ion-color-#{$color}) !important;
--ion-color-base-rgb: var(--ion-color-#{$color}-rgb) !important;
--ion-color-contrast: var(--ion-color-#{$color}-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-#{$color}-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-#{$color}-shade) !important;
--ion-color-tint: var(--ion-color-#{$color}-tint) !important;
}
}
// global.scss
@import "theme/custom-ion-colors.scss";
// your-page.scss
--background: var(--ion-color-digital);
// your-page.html
<ion-header>
<ion-toolbar color="digital">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Test Color
</ion-title>
</ion-toolbar>
</ion-header>