eui documentation
  1. Components
  2. EclBreadcrumbComponent

File

packages/ecl/components/ecl-breadcrumb/ecl-breadcrumb.component.ts

Description

Displays navigation segments and handles overflow with ellipsis.

Extends

ECLBaseDirective

Implements

OnInit OnDestroy

Metadata

selector ecl-breadcrumb
imports NgTemplateOutlet TranslateModule EUI_ECL_BUTTON EclBreadcrumbSegmentComponent
styles :host { display: block; }
templateUrl ./ecl-breadcrumb.component.html

Index

Properties
Methods
Inputs
HostBindings
HostListeners
Accessors

Constructor

constructor(el: ElementRef, translate: TranslateService, renderer: Renderer2)
Parameters :
Name Type Optional
el ElementRef No
translate TranslateService No
renderer Renderer2 No

Inputs

isExpanded
Type : boolean
Default value : false

Expands all breadcrumb segments instead of collapsing them.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

HostBindings

attr.aria-label
Type : any

ARIA label describing the breadcrumb purpose.
attr.data-ecl-auto-initialized
Type : boolean | null

Returns true if breadcrumb was auto-initialized.
attr.role
Type : string
Default value : 'navigation'

ARIA role attribute for accessibility.
class
Type : string

CSS classes applied to the breadcrumb element.

HostListeners

window:resize
Arguments : '$event'
window:resize()

Handles window resize and recalculates overflown segments.

Methods

onEllipsisSegmentClick
onEllipsisSegmentClick(evt: MouseEvent)

Expands hidden breadcrumb segments after clicking ellipsis.

Parameters :
Name Type Optional
evt MouseEvent No
Returns : void
onWindowResize
onWindowResize()
Decorators :
@HostListener('window:resize', ['$event'])

Handles window resize and recalculates overflown segments.

Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

ariaLabel
Decorators :
@HostBinding('attr.aria-label')

ARIA label describing the breadcrumb purpose.
breadcrumbContainer
To be removed in v20. Not needed, replaced by 'eclBreadcrumbContainer'
Type : ElementRef
Decorators :
@ViewChild('breadcrumbContainer')
eclBreadcrumbContainer
Type : EclBreadcrumbContainerDirective
Decorators :
@ContentChild(EclBreadcrumbContainerDirective)

Reference to the breadcrumb container directive inside this component.
eclEllipsisSegment
Type : EclBreadcrumbSegmentComponent
Decorators :
@ViewChild('ellipsisSegment')

Reference to the ellipsis segment element.
eclSegments
Type : QueryList<EclBreadcrumbSegmentComponent>
Decorators :
@ContentChildren(undefined, {descendants: true})

List of breadcrumb segment components.
role
Type : string
Default value : 'navigation'
Decorators :
@HostBinding('attr.role')

ARIA role attribute for accessibility.

Accessors

cssClasses
getcssClasses()

CSS classes applied to the breadcrumb element.

Returns : string
autoInitialized
getautoInitialized()

Returns true if breadcrumb was auto-initialized.

Returns : boolean | null
hasContainer
gethasContainer()

Returns true if breadcrumb container directive exists.

Returns : boolean

results matching ""

    No results matching ""