NgxFixedSettingsBar
This is an Angular module. It helps with show a fixed settings bar with dropdown menu on the right side with help of Bootstrap.
Check out the demo!
Note: v13.0.1 is out and supports Angular 13!
Install
-
Install by running npm install ngx-fixed-settings-bar
-
Add NgxFixedSettingsBarModule
to your app.module.ts
imports:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgxFixedSettingsBarModule } from 'ngx-fixed-settings-bar';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxFixedSettingsBarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Important: This module work with bootstrap, popper, jquery and bootstrap-material-design, so install & import of these are REQUIRED!!
-
Next step is install dependencies: npm install bootstrap bootstrap-material-design jquery popper.js
-
After that you have to import them:
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js"
]
In case of scss:
styles.scss
@import "~bootstrap/scss/bootstrap";
In case of css:
angular.json
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css"
]
OR
index.html
<head>
...
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
...
</head>
Basics
Usage
You can use this module easily after imports. Just use ngx-fixed-settings-bar
tag in your html and set settings bar icon and body.
For example:
app.component.html
<ngx-fixed-settings-bar>
<div settings-icon>
Icon
</div>
<div settings-body>
Body
</div>
</ngx-fixed-settings-bar>
Override Default Styles
Currently you can only set settings bar's top, background and transform-origin (x-placement) styles with config.
Default config looks like this:
...
export class AppComponent {
config: INgxFixedSettingsBarStyleConfig = {
top: 115,
backgroundColor: "rgba(30,30,30,0.5)",
xPlacement: "bottom-end"
};
...
}
And give this config to Component through styleConfig
attribute like an @Input()
<ngx-fixed-settings-bar [styleConfig]="config">
...
</ngx-fixed-settings-bar>
INgxFixedSettingsBarStyleConfig properties
Property | Type |
---|
top | number? |
backgroundColor | string? |
xPlacement | string?: bottom-start , bottom-end , top-start , top-end |