https://github.com/hugotomazi/navigation-bar
Navigation Bar plugin for Capacitor
https://github.com/hugotomazi/navigation-bar
android capacitor-community capacitor-plugin ionic-framework ionic5 ios navigation-bar web
Last synced: 5 months ago
JSON representation
Navigation Bar plugin for Capacitor
- Host: GitHub
- URL: https://github.com/hugotomazi/navigation-bar
- Owner: hugotomazi
- License: mit
- Created: 2021-08-22T15:32:45.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-23T12:59:01.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T18:18:09.326Z (about 1 year ago)
- Topics: android, capacitor-community, capacitor-plugin, ionic-framework, ionic5, ios, navigation-bar, web
- Language: TypeScript
- Homepage:
- Size: 1.27 MB
- Stars: 72
- Watchers: 3
- Forks: 25
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-capacitor - Navigation bar - Manipulation and control of the navigation bar visibility. (Other plugins / Specialized Hardware)
README
Navigation Bar
@hugotomazi/capacitor-navigation-bar
Capacitor plugin for Navigation Bar manipulation.
## Maintainers
| Maintainer | GitHub | Social |
| ----------- | ------------------------------------------- | --------------------------------------------------------------- |
| Hugo Tomazi | [hugotomazi](https://github.com/hugotomazi) | [@hugotomazi](https://br.linkedin.com/in/hugo-tomazi-299034101) |
## Install
```bash
npm install @hugotomazi/capacitor-navigation-bar
npx cap sync
```
## Configuration
No configuration required for this plugin.
## API
* [`show()`](#show)
* [`hide()`](#hide)
* [`setColor(...)`](#setcolor)
* [`setTransparency(...)`](#settransparency)
* [`getColor()`](#getcolor)
* [`addListener(...)`](#addlistener)
* [`addListener(...)`](#addlistener)
* [`addListener(...)`](#addlistener)
* [Interfaces](#interfaces)
* [Enums](#enums)
### show()
```typescript
show() => Promise
```
Display the navigation bar.
--------------------
### hide()
```typescript
hide() => Promise
```
Hide the navigation bar.
--------------------
### setColor(...)
```typescript
setColor(options: ColorParameters) => Promise
```
Change the color of the navigation bar.
*Support alpha hexadecimal numbers.
| Param | Type |
| ------------- | ----------------------------------------------------------- |
| **`options`** | ColorParameters |
--------------------
### setTransparency(...)
```typescript
setTransparency(options: { isTransparent: boolean; }) => Promise
```
Set the Transparency
| Param | Type |
| ------------- | ---------------------------------------- |
| **`options`** | { isTransparent: boolean; } |
--------------------
### getColor()
```typescript
getColor() => Promise<{ color: string; }>
```
Gets the current color of the navigation bar in Hexadecimal.
**Returns:** Promise<{ color: string; }>
--------------------
### addListener(...)
```typescript
addListener(event: NavigationBarPluginEvents.SHOW, listenerFunc: () => void) => Promise
```
Event fired after navigation bar is displayed
| Param | Type | Description |
| ------------------ | ------------------------------------------------------------------------------------ | ----------- |
| **`event`** | NavigationBarPluginEvents.SHOW | The event |
| **`listenerFunc`** | () => void | Callback |
**Returns:** Promise<PluginListenerHandle>
--------------------
### addListener(...)
```typescript
addListener(event: NavigationBarPluginEvents.HIDE, listenerFunc: () => void) => Promise
```
Event fired after navigation bar is hidden
| Param | Type | Description |
| ------------------ | ------------------------------------------------------------------------------------ | ----------- |
| **`event`** | NavigationBarPluginEvents.HIDE | The event |
| **`listenerFunc`** | () => void | Callback |
**Returns:** Promise<PluginListenerHandle>
--------------------
### addListener(...)
```typescript
addListener(event: NavigationBarPluginEvents.COLOR_CHANGE, listenerFunc: (returnObject: { color: string; }) => void) => Promise
```
Event fired after navigation bar color is changed
| Param | Type | Description |
| ------------------ | -------------------------------------------------------------------------------------------- | ----------- |
| **`event`** | NavigationBarPluginEvents.COLOR_CHANGE | The event |
| **`listenerFunc`** | (returnObject: { color: string; }) => void | Callback |
**Returns:** Promise<PluginListenerHandle>
--------------------
### Interfaces
#### ColorParameters
| Prop | Type | Description |
| ----------------- | -------------------- | ------------------------------------------------------------------------- |
| **`color`** | string | Sets the new color of the navigation bar. |
| **`darkButtons`** | boolean | Sets whether the default navigation bar buttons should be black or white. |
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| **`remove`** | () => Promise<void> |
### Enums
#### NavigationBarPluginEvents
| Members | Value | Description |
| ------------------ | ---------------------------- | -------------------------------------------- |
| **`SHOW`** | 'onShow' | Called after the navigation bar is displayed |
| **`HIDE`** | 'onHide' | Called after navigation bar is hidden |
| **`COLOR_CHANGE`** | 'onColorChange' | Called after navigation bar color is changed |