Skip to main content

Themeable Browser

In-app browser that allows styling.

https://github.com/initialxy/cordova-plugin-themeablebrowser

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

Installation#

$ npm install cordova-plugin-themeablebrowser $ npm install @ionic-native/themeable-browser $ ionic cap sync

Supported Platforms#

  • Amazon Fire OS
  • Android
  • Blackberry 10
  • Browser
  • FirefoxOS
  • iOS
  • Ubuntu
  • Windows
  • Windows Phone

Usage#

React#

Learn more about using Ionic Native components in React

Angular#

import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser/ngx';
constructor(private themeableBrowser: ThemeableBrowser) { }
...
// can add options from the original InAppBrowser in a JavaScript object form (not string)// This options object also takes additional parameters introduced by the ThemeableBrowser plugin// This example only shows the additional parameters for ThemeableBrowser// Note that that `image` and `imagePressed` values refer to resources that are stored in your appconst options: ThemeableBrowserOptions = {     statusbar: {         color: '#ffffffff'     },     toolbar: {         height: 44,         color: '#f0f0f0ff'     },     title: {         color: '#003264ff',         showPageTitle: true     },     backButton: {         image: 'back',         imagePressed: 'back_pressed',         align: 'left',         event: 'backPressed'     },     forwardButton: {         image: 'forward',         imagePressed: 'forward_pressed',         align: 'left',         event: 'forwardPressed'     },     closeButton: {         image: 'close',         imagePressed: 'close_pressed',         align: 'left',         event: 'closePressed'     },     customButtons: [         {             image: 'share',             imagePressed: 'share_pressed',             align: 'right',             event: 'sharePressed'         }     ],     menu: {         image: 'menu',         imagePressed: 'menu_pressed',         title: 'Test',         cancel: 'Cancel',         align: 'right',         items: [             {                 event: 'helloPressed',                 label: 'Hello World!'             },             {                 event: 'testPressed',                 label: 'Test!'             }         ]     },     backButtonCanClose: true}
const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://ionic.io', '_blank', options);

We suggest that you refer to the plugin's repository for additional information on usage that may not be covered here.