ngx-fixed-settings-bar

v13.0.1

Published

2 years ago

A simple Angular fixed settings bar component with dropdown menu with help of Bootstrap

Downloads

0High
0Medium
0Low

pepe19000

angular typescript javascript dropdown menu fixed bootstrap settings bar

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"
]

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>
    <!--Mark icon container with `settings-icon` attribute-->
  <div settings-icon>
    Icon
  </div>
    <!--Mark body container with `settings-body` attribute-->
  <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 |

Published

Vulnerabilities

Links

Maintainers

Keywords