Version:

Install ​

shell
npm i @mate-angular/details

Import ​

typescript
import { MateDetailsComponent } from '@mate-angular/details';

Variants ​

Default ​

html
<mate-details-ng titleText="More information">
  <p>Detail content here</p>
</mate-details-ng>

Object Header ​

html
<mate-details-ng titleText="Customer Data" [objectHeader]="true">
  <span slot="title" theme="badge success">Active</span>
  <p>Detail content here</p>
</mate-details-ng>

With badges and actions ​

html
<mate-details-ng titleText="Document">
  <span slot="title" theme="badge">PDF</span>
  <vaadin-button slot="action" theme="icon tertiary" (click)="onDownload()">
    <span theme="icon">download</span>
  </vaadin-button>
  <p>Content</p>
</mate-details-ng>