{"id":14985815,"url":"https://github.com/jeneser/ionic-super-bar","last_synced_at":"2025-04-11T22:11:50.976Z","repository":{"id":118362247,"uuid":"86665095","full_name":"jeneser/ionic-super-bar","owner":"jeneser","description":"Transparent statusBar and awesome toolBar DEMO in ionic","archived":false,"fork":false,"pushed_at":"2019-01-07T17:40:28.000Z","size":5883,"stargazers_count":175,"open_issues_count":10,"forks_count":42,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-11T22:11:43.720Z","etag":null,"topics":["android","ionc2","ionic","ionic-framework","ionic3","toolbar-demo","transparent-statusbar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeneser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"support_info.png","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-30T06:05:01.000Z","updated_at":"2025-01-24T08:43:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"e20e3621-b8e4-4dca-a9a6-f68e6521da8a","html_url":"https://github.com/jeneser/ionic-super-bar","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"6213e23442d838b06bcbe1f61302525a8d269f01"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeneser%2Fionic-super-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeneser%2Fionic-super-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeneser%2Fionic-super-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeneser%2Fionic-super-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeneser","download_url":"https://codeload.github.com/jeneser/ionic-super-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487691,"owners_count":21112190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ionc2","ionic","ionic-framework","ionic3","toolbar-demo","transparent-statusbar"],"created_at":"2024-09-24T14:11:43.810Z","updated_at":"2025-04-11T22:11:50.947Z","avatar_url":"https://github.com/jeneser.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cb\u003eTransparent statusBar and awesome toolBar DEMO in ionic.\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"support_info.png\" /\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshot.gif\" /\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n## Get started\n\n* Clone this repository:  `git@github.com:jeneser/ionic-super-bar.git`\n* Run `npm install` from the project root.\n* Run `ionic serve` in a terminal from the project root.\n\n## Transparent statusBar for android\n\n* Run `ionic cordova platform add android` in a terminal\n* On `MainActivity.java` file on Android platform folder`platforms/android/src/../../MainActivity.java`, paste the following code after super.onCreate()\n\n```java\nif (Build.VERSION.SDK_INT \u003e= Build.VERSION_CODES.KITKAT) {\n\tgetWindow().getDecorView().setSystemUiVisibility(\n\t   View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |\n\t   View.SYSTEM_UI_FLAG_LAYOUT_STABLE);\n}\n```\n\n* Remember to add these packages in MainActivity.java\n\n```java\nimport android.os.Build;\nimport android.view.View;\n```\n\n* Last set `StatusBarBackgroundColor` in `app.component.ts` from the project folder `src/app/app.component.ts`. \nIf 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!\n\n```javascript\n// #AARRGGBB where AA is an alpha value\nif (this.platform.is('android')) {\n\tthis.statusBar.backgroundColorByHexString(\"#33000000\");\n}\n```\n\n* In the same way. You can set `StatusBarBackgroundColor` in `config.xml` from the project root.\nBut, When you build an Ionic project for IOS platform. You may need to remove it. Pick one you like.\n\n```\n\u003cpreference name=\"StatusBarBackgroundColor\" value=\"#33000000\"/\u003e\n```\n\n## File Structure\n\n```\n.\n├── config.xml\n├── ionic.config.json\n├── package.json\n├── README.md\n├── resources\n├── src\n│   ├── app\n│   │   ├── app.component.ts\n│   │   ├── app.html\n│   │   ├── app.module.ts\n│   │   ├── app.scss                  * transparent statusBar and SuperBar style\n│   │   └── main.ts\n│   ├── assets\n│   │   ├── icon\n│   │   └── img\n│   ├── index.html\n│   ├── manifest.json\n│   ├── pages\n│   │   ├── home                      * transparent statusBar and SuperBar page\n│   │   │   ├── home.html\n│   │   │   ├── home.scss\n│   │   │   └── home.ts\n│   │   ├── language-details          * transparent statusBar and SuperBar page\n│   │   │   ├── language-details.html\n│   │   │   ├── language-details.scss\n│   │   │   └── language-details.ts\n│   │   └── list\n│   │       ├── list.html\n│   │       ├── list.scss\n│   │       └── list.ts\n│   ├── service-worker.js\n│   └── theme\n│       └── variables.scss\n├── tsconfig.json\n└── tslint.json\n```\n\n## Environment\n\n```\nglobal packages:\n\n    @ionic/cli-utils : 1.4.0\n    Cordova CLI      : 7.0.1 \n    Ionic CLI        : 3.4.0\n\nlocal packages:\n\n    @ionic/app-scripts              : 1.3.7\n    @ionic/cli-plugin-cordova       : 1.4.0\n    @ionic/cli-plugin-ionic-angular : 1.3.1\n    Cordova Platforms               : android 6.2.3\n    Ionic Framework                 : ionic-angular 3.4.2\n\nSystem:\n\n    Node       : v6.10.3\n    OS         : Linux 4.8\n    Xcode      : not installed\n    ios-deploy : not installed\n    ios-sim    : not installed\n    npm        : 3.10.10 \n```\n\n## ChangeLog\n\n- June 28, 2017:\n  - PR #14 Platform separately:\n  - Each platform does not affect each other\n  - Make code harmless\n- June 25, 2017:\n  - Upgrade this project to Ionic 3 Fix issue#12\n  - Rename repertory: `ionic-super-bar`\n  - Move ionic2 version to branch `dev-ionic2-v1`\n \n## Contribute\n\nPlease make sure to read the [Contributing Guide](https://github.com/jeneser/ionic-super-bar/blob/master/CONTRIBUTING.md) before making a pull request.\n\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload\nionic serve\n\n```\n\n## License\n\n[MIT](https://github.com/jeneser/ionic-super-bar/blob/master/LICENSE) Copyright (c) 2017 Jeneser\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeneser%2Fionic-super-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeneser%2Fionic-super-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeneser%2Fionic-super-bar/lists"}