DaffSidebarViewportComponent

The DaffSidebarViewportComponent is the "holder" of sidebars throughout an entire application.

<daff-sidebar-viewport> should only ever be used once in an application, but it's possible for there to be multiple sidebars of many modes at the same time. See DaffSidebarMode.

Since this is a functional component, it's possible to have multiple "open" sidebars at the same time. As a result, this component attempts to gracefully handle these situations. However, importantly, there can only be one sidebar of each mode, on each side, at any given time.

If this is violated, this component will throw an exception.

import { DaffSidebarViewportComponent } from '@daffodil/design/sidebar'

@Component()
class DaffSidebarViewportComponent implements AfterContentChecked, OnDestroy {
  @HostBinding() hostClass: true
  @HostBinding() 
  get classes()
  get isNavOnSide()
  onContentAnimationStart(e: AnimationEvent_2)
  onContentAnimationDone(e: AnimationEvent_2)
  @Input() navPlacement: DaffNavPlacement
  _backdropInteractable: false
  _animationState: DaffSidebarViewportAnimationStateWithParams
  @Output() backdropClicked: EventEmitter<void>
  ngAfterContentChecked()
  ngOnDestroy()
}

Selector: 'daff-sidebar-viewport'

Properties

Name	Type	Description
hostClass	true
classes
isNavOnSide
onContentAnimationStart
onContentAnimationDone
@Input() navPlacement	DaffNavPlacement	The placement of the nav in relation to the sidebar. The default is set to `top`. Note that this is really only available when there is a `side-fixed` sidebar.
_backdropInteractable	false	Whether or not the backdrop is interactable
_animationState	DaffSidebarViewportAnimationStateWithParams	The animation state
@Output() backdropClicked	EventEmitter<void>	Event fired when the backdrop is clicked. This is often used to close the sidebar.
ngAfterContentChecked
ngOnDestroy

Examples

Using the sidebar viewport

<daff-sidebar-viewport>
   <daff-sidebar></daff-sidebar>
   <p>Site content</p>
</daff-sidebar-viewport>