packages/eui/packages/components/eui-dashboard-card/eui-dashboard-card.component.ts
Dashboard card component that can display content with various styling options, including avatar/icon, labels, and clickable behavior.
OnInit
changeDetection | ChangeDetectionStrategy.OnPush |
HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeXS euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSizeVariant euiDisabled euiOutline
|
selector | eui-dashboard-card |
imports |
NgClass
RouterModule
NgTemplateOutlet
EUI_AVATAR
EUI_LABEL
EUI_ICON
|
templateUrl | ./eui-dashboard-card.component.html |
styleUrl | eui-dashboard-card.scss |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
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 |
cardClick |
Type : EventEmitter
|
Event emitted when the card is clicked |
attr.tabindex |
Type : string
|
Tab index for keyboard navigation |
class |
Type : string
|
click |
Arguments : '$event'
|
click(event: MouseEvent)
|
Handles card click events |
onClick | ||||||
onClick(event: MouseEvent)
|
||||||
Decorators :
@HostListener('click', ['$event'])
|
||||||
Handles card click events
Parameters :
Returns :
void
|
baseStatesDirective |
Default value : inject(BaseStatesDirective)
|
customContent |
Type : QueryList<EuiDashboardCardContentComponent>
|
Decorators :
@ContentChild(undefined)
|
Reference to the custom content component |
cssClasses |
getcssClasses()
|
Computes and returns the CSS classes for the dashboard card component based on its current state:
Returns :
string
|
tabindex |
gettabindex()
|
Tab index for keyboard navigation
Returns :
string
|