eui documentation
  1. Components
  2. EuiDiscussionThreadItemComponent

File

packages/components/eui-discussion-thread/eui-discussion-thread-item.component.ts

Description

Individual item component for discussion threads, representing a single message or entry in a conversation. Displays author information, timestamp, message content, and optional metadata with support for visual variants.

Basic Thread Item

Example :
<eui-discussion-thread-item
  [author]="'John Doe'"
  [date]="'2024-01-15'"
  [body]="'This is a comment in the discussion'">
</eui-discussion-thread-item>

With Type Styling

Example :
<eui-discussion-thread-item
  [author]="'System'"
  [date]="'2024-01-15T10:30:00'"
  [body]="'Status updated to In Progress'"
  [typeClass]="'info'">
</eui-discussion-thread-item>

With Tooltip

Example :
<eui-discussion-thread-item
  [author]="'Jane Smith'"
  [date]="'2024-01-15'"
  [body]="'Review completed'"
  [tooltip]="'Approved by manager'">
</eui-discussion-thread-item>

Accessibility

  • Uses role="listitem" for proper list semantics
  • Author and date information announced before message content
  • Tooltip provides additional context for assistive technologies
  • Ensure date format is screen reader friendly

Notes

  • Use within eui-discussion-thread component for proper structure
  • typeClass affects icon and styling (info, warning, success, danger)
  • isOdd property used for alternating row styling
  • Date accepts string format and is displayed with DatePipe
  • Supports rich content in body via content projection

Metadata

selector eui-discussion-thread-item
imports EUI_LABEL EUI_ICON EUI_ICON_STATE DatePipe
templateUrl ./eui-discussion-thread-item.component.html
styleUrl ./eui-discussion-thread-item.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

author
Type : string

Name or identifier of the author who created the item.
body
Type : string

Content body of the discussion thread item.
date
Type : string

Date when the thread item was created or modified.
id
Type : string

Unique identifier for the discussion thread item.
isOdd
Type : boolean

Indicates if this item is in an odd position in the list. Used for alternating styling patterns within the thread.
tooltip
Type : string

Tooltip text to display additional information when hovering over the item.
typeClass
Type : string

Type class defining the visual style of the item (e.g., 'info', 'warning', 'error'). This affects the color scheme applied to the item.

HostBindings

attr.role
Type : string
Default value : 'listitem'

ARIA role for the host element to ensure proper accessibility.
class
Type : string

Sets CSS classes on the host element based on the typeClass property. This helps maintain consistent styling with the parent theme variant.

Properties

role
Type : string
Default value : 'listitem'
Decorators :
@HostBinding('attr.role')

ARIA role for the host element to ensure proper accessibility.

Accessors

cssClasses
getcssClasses()

Sets CSS classes on the host element based on the typeClass property. This helps maintain consistent styling with the parent theme variant.

Returns : string
isOdd
getisOdd()

Indicates if this item is in an odd position in the list. Used for alternating styling patterns within the thread.

Returns : boolean
setisOdd(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void

results matching ""

    No results matching ""