README
@nativescript/ionic-portals
Ionic Portals are supercharged native WebView components for iOS and Android that let you add web-based experiences to native mobile apps.
npm install @nativescript/ionic-portals
Usage
- Register and create portals on app boot - Get a Portal API Key here:
import { Application } from '@nativescript/core';
import { IonicPortalManager } from '@nativescript/ionic-portals';
Application.on(Application.launchEvent, () => {
// Register IonicPortals
IonicPortalManager.register('<portal-api-key>');
// Create as many Portals as you need to use in your app
// By default, the app will look for folders equal to the portal id you use here
// For iOS: App_Resources/iOS/webPortal
// For Android: App_Resources/Android/src/main/asssets/webPortal
IonicPortalManager.create('webPortal');
});
// boot app here, for example:
Application.run({ moduleName: 'app-root' });
- Use in your views
Vanilla/Plain/Core
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:ionic="@nativescript/ionic-portals">
<StackLayout class="p-20">
<ionic:IonicPortal id="webPortal">
</ionic:IonicPortal>
</StackLayout>
</Page>
Angular
import { registerElement } from '@nativescript/angular';
import { IonicPortal } from '@nativescript/ionic-portals';
registerElement('IonicPortal', () => IonicPortal);
// use in any component:
<IonicPortal id="webPortal"></IonicPortal>
API
IonicPortalManager.register(apiKey: string)
: Register Portals when your app bootsIonicPortalManager.create(portalId: string, startDir?: string)
: Create a PortalportalId
: The portal id to registerstartDir
: Set the web applications directory. By default it will look for a folder named the same as the portalId as the location of the web assets. Use this optional 2nd arg if you would like the folder name to be different that the portalId.
License
Apache License Version 2.0