Header module adds a header area to the top of the landing page and manages its content. Header module supports responsive web design.
It comes many features
- theme
- scroll spy
- mobilized
- alignment (right, left, center)
Click here for demo
Installation
All public npm packages of Logo Software is at https://www.npmjs.com/~logofe. To
install Header Module:
$ npm set registry https://registry.npmjs.org/
$ npm install @logo-software/header -s
Just import it to your project of @NgModule
import section.
@NgModule({
imports: [CommonModule, HeaderModule],
})
export class AppModule {
}
Headers are navigation components that display information and actions relating to the current screen. Add the below code to your code stack and give initializer parameters.
Add the below code to your code stack and give initializer parameters.
app.component.html
<logo-header
[containerStatus]="true"
[defaultTheme]="headerTheme.START"
[isMobilized]="true"
[menuPosition]="'left'"
[scrollPoint]="75"
[scrollSpy]="true"
[scrolledTheme]="headerTheme.SCROLL"
[watchElement]="'body'"
>
<div class="section-main">
<logo-link [classes]="'ghost large'" [url]="'/products'">Products</logo-link>
<logo-link [classes]="'ghost large'" [fragment]="'solutions'" [url]="'/'">Solutions</logo-link>
<logo-link [classes]="'ghost large'" [url]="'/info/about'">About Us</logo-link>
<logo-link [classes]="'ghost large'" [url]="'/blog'">Blog</logo-link>
<logo-link [classes]="'ghost large'" [url]="'/contact'">Contact</logo-link>
</div>
</logo-header>
For API details, please visit http://design.logo.com.tr/#/docs/components/components-overview