@smartbit4all/navbar
v1.0.14
Published
## References
Downloads
35
Keywords
Readme
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.
@smartbit4all/form v1.0.1
Type: Update
The package has been published.
@smartbit4all/navbar v0.0.3
Type: Feature
The basic smart navbar with its features.