File

packages/eui/packages/components/eui-dashboard-card/eui-dashboard-card.component.ts

Description

Dashboard card component that can display content with various styling options, including avatar/icon, labels, and clickable behavior.

Implements

OnInit

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-dashboard-card'

Element attribute for e2e testing

hasNoBackgroundAvatar
Type : boolean
Default value : false

Whether to display the avatar without background

iconLabel
Type : string

Label for the icon (accessibility)

iconSvgName
Type : string

Name of the icon to display

iconSvgSize
Type : "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"
Default value : 'm'

Size of the icon

imageUrl
Type : string

URL for the avatar image

isClickeable
Type : boolean
Default value : false

Whether the card is clickable

isFlat
Type : boolean
Default value : false

Whether to display the card without elevation

isFlatAvatar
Type : boolean
Default value : false

Whether to display the avatar without elevation

isHorizontal
Type : boolean
Default value : false

Whether to display the card in horizontal layout

isStacked
Type : boolean
Default value : false

Whether to display the card without elevation

label
Type : string

Primary label/title of the card

labelMaxLines
Type : "1" | "2" | "3" | "4" | "5"
Default value : 2

Maximum number of lines for the primary label

subLabel
Type : string

Secondary label/subtitle of the card

subLabelMaxLines
Type : "1" | "2" | "3" | "4" | "5"
Default value : 2

Maximum number of lines for the secondary label

url
Type : string

Internal router link URL

urlExternal
Type : string

External URL

urlExternalTarget
Type : string
Default value : '_blank'

Target attribute for external URLs

Outputs

cardClick
Type : EventEmitter

Event emitted when the card is clicked

HostBindings

attr.tabindex
Type : string

Tab index for keyboard navigation

class
Type : string

HostListeners

click
Arguments : '$event'
click(event: MouseEvent)

Handles card click events

Methods

onClick
onClick(event: MouseEvent)
Decorators :
@HostListener('click', ['$event'])

Handles card click events

Parameters :
Name Type Optional
event MouseEvent No
Returns : void

Properties

baseStatesDirective
Default value : inject(BaseStatesDirective)
customContent
Type : QueryList<EuiDashboardCardContentComponent>
Decorators :
@ContentChild(undefined)

Reference to the custom content component

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the dashboard card component based on its current state:

  • Adds base dashboard card classes
  • Adds horizontal layout class if isHorizontal is true
  • Adds link class if the card is clickable or has a URL
  • Adds flat class if isFlat is true
Returns : string
tabindex
gettabindex()

Tab index for keyboard navigation

Returns : string

results matching ""

    No results matching ""