File

packages/components/eui-tree-list/item-content/item-content.component.ts

Description

Content projection component for custom content within eui-tree-list-item. Provides a structured container for rich content beyond simple labels. Applies consistent styling for custom item content. Must be used within eui-tree-list-item to define custom content areas.

Basic Usage

<eui-tree-list-item>
  <eui-tree-list-item-content>
    <eui-icon-svg icon="eui-file" size="s" />
    <span>Document.pdf</span>
    <eui-badge euiInfo>New</eui-badge>
  </eui-tree-list-item-content>
</eui-tree-list-item>

<!-- Complex content -->
<eui-tree-list-item>
  <eui-tree-list-item-content>
    <div class="custom-layout">
      <img src="icon.png" alt="File icon" />
      <div>
        <strong>File Name</strong>
        <small>Last modified: 2 hours ago</small>
      </div>
    </div>
  </eui-tree-list-item-content>
</eui-tree-list-item>

Accessibility

• Content should include appropriate semantic HTML
• Images should have alt text
• Interactive elements should be keyboard accessible

Notes

• Replaces default label rendering when used
• Supports any HTML content or Angular components
• Maintains consistent spacing and alignment
• Works with expand/collapse functionality

<ng-content />