DaffSidebarComponent

DaffSidebarComponent is heavily based upon the work done by the @angular/components team on mat-drawer and mat-sidenav. daff-sidebar is intended to be a simplified version (with a different design) of mat-drawer.

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

@Component()
class DaffSidebarComponent implements DaffOpenable {
  @HostBinding() 
  get transformSidebar()
  @Output() escapePressed: EventEmitter<void>
  @Input() side: DaffSidebarSide
  @Input() mode: DaffSidebarMode
  get width()
  get open()
  @HostListener() onAnimationStart(e: AnimationEvent_2)
  @HostListener() onAnimationComplete(e: AnimationEvent_2)
  reveal()
  hide()
  toggle()
}

Selector: 'daff-sidebar'

Properties

Name	Type	Description
transformSidebar		The animation state of the sidebar.
@Output() escapePressed	EventEmitter<void>	Event fired when `ESC` key is pressed when the sidebar has focus
@Input() side	DaffSidebarSide	What side of the viewport to show the sidebar on.
@Input() mode	DaffSidebarMode	The mode of the sidebar.
width		The width of the sidebar.
open
onAnimationStart		Animation event that can be used to hook into when the transformSidebar animation begins. This is used in sidebar to determine when to show the visibility of the sidebar so that the animation does not jump as the element is shown.
onAnimationComplete		Animation event that can be used to hook into when the transformSidebar animation is complete.
reveal		Reveal the contents of the sidebar
hide		Hide the contents of the sidebar
toggle		Toggle the visibility of the sidebar