@smartbit4all/navbar NPM

Smart Navbar

References

These packages must be updated in case of a new version:

There are no references yet

How to use

Installation

Go to your project, open the terminal and use the following command:

npm i @smartbit4all/navbar

Then import it in the AppModule:

app.module.ts:

import { SmartNavbarModule } from '@smartbit4all/navbar';
...
@NgModule({
    declarations: [...]
    imports: [
        ...
        SmartNavbarModule,
    ],
    ...
})

Usage

example.component.html:

<smart-navbar [smartNavbar]="exampleNavbar"></smart-navbar>

example.component.css:

.navbar {
    height: 250px;
}

::ng-deep .navbarHeight {
    background-color: transparent !important;
}

example.component.ts:

export class ExampleComponent {
    exampleNavbar: SmartNavbar;
    user: ExampleUser;

    constructor() {
        this.exampleNavbar = {
            icon: 'assets/icon.png',
            searchBar: {
                placeholder: 'Search',
                quickFilterLabel: 'Quick filters',
                quickFilters: ['Quick filter 1'],
                searchCallback: this.onSearch.bind(this)
            },
            iconCallback: this.onHome.bind(this),
            filterButtonLabel: 'Filters',
            filterButtonCallback: this.onFilter.bind(this),
            userSettings: {
                label: user.name,
                settings: [
                    {
                        label: 'Logout',
                        icon: 'logout',
                        position: SmartUserSettinsIconPosition.POST,
                        callback: logout.bind(this)
                    }
                ]
            }
        };
    }

    logout(): void {
        ...
    }
}

You can put your custom component before input field. In this way the iconCallback wont be called.:

<smart-navbar [smartNavbar]="exampleNavbar">
    <div titleComponent> Custom title </div>
</smart-navbar>

You can put your custom component into the filter button:

<smart-navbar [smartNavbar]="exampleNavbar">
    <div filterComponent> Custom title </div>
</smart-navbar>

Version logs

@smartbit4all/form v1.0.5

Type: Feature

From now on the user drop-down menu can be used. The menu items can be parameterized with an icon, its position (FRONT or POST), label and a callback.