SetAppbar
Class: SetAppbarDirective
Selector: set-appbar, [set-appbar]
Exported as: setAppbar
Properties
Name | Description | Default value |
---|---|---|
@Input() color: string | Color of the component | primary |
@Input() size: SetAppbarSize | Size of the component | adaptive |
@Input() appearance: SetAppbarAppearance | The appbar appearance style | filled |
We using CDK Layout for detecting media screen size. If size is ‘adaptive’ then appbar layout styles will be applied depending on the media breakpoint.
Size name | Breakpoint value |
---|---|
mobile | max-width: 1024px |
dense | (min-width: 1025px) and (max-width: 1440px) |
desktop | min-width: 1441px |
SetAppbarLogo
Class: SetAppbarLogoDirective
Selector: set-appbar-logo, [set-appbar-logo]
Exported as: setLogo
SetAppbarNav
Class: SetAppbarNavDirective
Selector: set-appbar-nav, [set-appbar-nav]
Exported as: setAppbarNav
Supported items: MatTabNav or MatAnchor components
Use mat-button-active class for styling active item in setAppbarNav with MatAnckor buttons
SetAppbarActions
Class: SetAppbarActionsDirective
Selector: set-appbar-actions, [set-appbar-actions]
Exported as: setAppbarActions
Types aliases
type SetAppbarAppearance = 'raised' | 'filled'
type SetAppbarSize = 'mobile' | 'dense' | 'desktop' | 'adaptive'