An iOS and Android system and navigation bar management implementation for Capacitor.
npm install @vmisoft/capacitor-bars@0.0.2
npx cap sync
If you want to run a local example located in capacitor-bars-example folder, you need to set up a few things:
- You've downloaded only the source code, so you need to build the library itself. Run this command from the root of the library
npm run build
- Now you need to tell where to ionic can find your android sdk. For that, create
local.properties
file insidecapacitor-bars/capacitor-bars-example/android
- Finally, navigate to
capacitor-bars-example
and run this:
ionic cap sync
ionic build
ionic cap run android
You can find a folder capacitor-bars-example with a working Android app. Also, here are a few examples:
//first, you need to import module itself:
import { CapacitorBars } from '@vmisoft/capacitor-bars';
//then you can use all the methods:
setRandomStatusColor = async () => {
let color = "#000000"; // black
CapacitorBars.setStatusBarColor({ color: color });
};
respectBars = async () => {
CapacitorBars.setRespectSystemBars({ isRespect: true });
};
setNavigationBarColor(options: { color: string; }) => Promise<void>
Param | Type |
---|---|
options |
{ color: string; } |
getNavigationBarColor() => Promise<{ color: string; }>
Returns: Promise<{ color: string; }>
setStatusBarColor(options: { color: string; }) => Promise<void>
Param | Type |
---|---|
options |
{ color: string; } |
getStatusBarColor() => Promise<{ color: string; }>
Returns: Promise<{ color: string; }>
setRespectSystemBars(options: { isRespect: boolean; }) => Promise<void>
Param | Type |
---|---|
options |
{ isRespect: boolean; } |
getRespectSystemBars() => Promise<{ isRespect: boolean; }>
Returns: Promise<{ isRespect: boolean; }>
setNavBarVisible(options: { isVisible: boolean; }) => Promise<void>
Param | Type |
---|---|
options |
{ isVisible: boolean; } |
getNavBarVisible() => Promise<{ isVisible: boolean; }>
Returns: Promise<{ isVisible: boolean; }>
setStatusBarVisible(options: { isVisible: boolean; }) => Promise<void>
Param | Type |
---|---|
options |
{ isVisible: boolean; } |
getStatusBarVisible() => Promise<{ isVisible: boolean; }>
Returns: Promise<{ isVisible: boolean; }>