Transparent statusBar and awesome toolBar DEMO in ionic
MIT License
[email protected]:jeneser/ionic-super-bar.git
npm install
from the project root.ionic serve
in a terminal from the project root.ionic cordova platform add android
in a terminalMainActivity.java
file on Android platform folderplatforms/android/src/../../MainActivity.java
, paste the following code after super.onCreate()if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
import android.os.Build;
import android.view.View;
StatusBarBackgroundColor
in app.component.ts
from the project folder src/app/app.component.ts
.// #AARRGGBB where AA is an alpha value
if (this.platform.is('android')) {
this.statusBar.backgroundColorByHexString("#33000000");
}
StatusBarBackgroundColor
in config.xml
from the project root.<preference name="StatusBarBackgroundColor" value="#33000000"/>
.
├── config.xml
├── ionic.config.json
├── package.json
├── README.md
├── resources
├── src
│ ├── app
│ │ ├── app.component.ts
│ │ ├── app.html
│ │ ├── app.module.ts
│ │ ├── app.scss * transparent statusBar and SuperBar style
│ │ └── main.ts
│ ├── assets
│ │ ├── icon
│ │ └── img
│ ├── index.html
│ ├── manifest.json
│ ├── pages
│ │ ├── home * transparent statusBar and SuperBar page
│ │ │ ├── home.html
│ │ │ ├── home.scss
│ │ │ └── home.ts
│ │ ├── language-details * transparent statusBar and SuperBar page
│ │ │ ├── language-details.html
│ │ │ ├── language-details.scss
│ │ │ └── language-details.ts
│ │ └── list
│ │ ├── list.html
│ │ ├── list.scss
│ │ └── list.ts
│ ├── service-worker.js
│ └── theme
│ └── variables.scss
├── tsconfig.json
└── tslint.json
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.4.2
System:
Node : v6.10.3
OS : Linux 4.8
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 3.10.10
ionic-super-bar
dev-ionic2-v1
Please make sure to read the Contributing Guide before making a pull request.
# install dependencies
npm install
# serve with hot reload
ionic serve
MIT Copyright (c) 2017 Jeneser