Get started   Components   Icons   What's New
  Get a License
⚡️New Release! Material X components for Angular⚡ view demo
SetAppbar

Class: SetAppbarDirective

Selector: set-appbar, [set-appbar]

Exported as: setAppbar

Properties
NameDescriptionDefault 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 nameBreakpoint 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'