eui documentation
  1. Components
  2. EclTimelineItemComponent

File

packages/ecl/components/ecl-timeline/ecl-timeline-item.component.ts

Extends

ECLBaseDirective

Implements

AfterContentInit AfterViewChecked OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector ecl-timeline-item, li[eclTimelineItem]
imports EUI_ECL_ICON EUI_ECL_BUTTON NgTemplateOutlet
styles ecl-timeline-item { display: list-item; }
templateUrl ecl-timeline-item.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

collapseLabel
Type : string
Default value : 'Collapse'

Text label shown when the item is expanded and can be collapsed. Defaults to 'Collapse'.
expandLabel
Type : string
Default value : 'Expand'

Text label shown when the item is collapsed and can be expanded. Defaults to 'Expand'.
isCollapsed
Type : boolean
Default value : false

Whether the item is collapsed. Adds the ecl-timeline__item--collapsed CSS class when true.
isHeadline
Type : boolean
Default value : false
isToggler
Type : boolean
Default value : false

Whether the item is a toggler (e.g. expands/collapses related items). Adds the ecl-timeline__item--toggle CSS class when true.
isTogglerExpanded
Type : boolean
Default value : false

Indicates whether the toggler is initially expanded. Used for toggler-type items.
toggleGroup
Type : string

Name of the toggle group that this item belongs to. Used to coordinate collapsing/expanding related items.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

toggle
Type : EventEmitter

Event emitted when the toggler is clicked. Consumers can call preventDefault() on the event to cancel toggle behavior.

HostBindings

class
Type : string

Adds the ecl-timeline__item class to the host element.

Methods

hasDefaultToggler
hasDefaultToggler()

Checks whether the default toggler UI should be used. Returns true if this is a toggler and no custom toggler component is projected.

Returns : boolean
onTogglerClick
onTogglerClick(evt: MouseEvent)

Handles click events from the default toggler element.

Parameters :
Name Type Optional Description
evt MouseEvent No

The mouse click event.
Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

eclLink
Type : EclLinkDirective
Decorators :
@ContentChild(undefined)

Reference to a projected ECL link, used for setting focus after toggle.
eclTimelineItemLabel
Type : ElementRef
Decorators :
@ContentChild(undefined, {read: ElementRef})

Reference to a projected label for the item. Used to set height, when item has no content and title.
timelineItemToggler
Type : EclTimelineItemTogglerComponent
Decorators :
@ContentChild(undefined)

Reference to a projected custom toggler component.
timelineTitle
Type : EclTimelineItemTitleDirective
Decorators :
@ContentChild(undefined)

Accessors

cssClasses
getcssClasses()

Adds the ecl-timeline__item class to the host element.

Returns : string
isShowExpandLabel
getisShowExpandLabel()

True if the expand label should be visible.

Returns : boolean
isShowCollapseLabel
getisShowCollapseLabel()

True if the collapse label should be visible.

Returns : boolean

results matching ""

    No results matching ""