Transparent statusBar and awesome toolBar DEMO in ionic.
- Clone this repository:
[email protected]:jeneser/ionic-super-bar.git - Run
npm installfrom the project root. - Run
ionic servein a terminal from the project root.
- Run
ionic cordova platform add androidin a terminal - On
MainActivity.javafile 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);
}- Remember to add these packages in MainActivity.java
import android.os.Build;
import android.view.View;- Last set
StatusBarBackgroundColorinapp.component.tsfrom the project foldersrc/app/app.component.ts. If you want use this option for Android and native status bar plugin for iOS devices on the same project. We advise you to do so. The code is harmless!
// #AARRGGBB where AA is an alpha value
if (this.platform.is('android')) {
this.statusBar.backgroundColorByHexString("#33000000");
}- In the same way. You can set
StatusBarBackgroundColorinconfig.xmlfrom the project root. But, When you build an Ionic project for IOS platform. You may need to remove it. Pick one you like.
<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
- June 28, 2017:
- PR #14 Platform separately:
- Each platform does not affect each other
- Make code harmless
- June 25, 2017:
- Upgrade this project to Ionic 3 Fix issue#12
- Rename repertory:
ionic-super-bar - Move ionic2 version to branch
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent