Version:

Object Page ​

Component nesting ​

  • Vertical Layout
    • Details
      • Floating layout with Key Value Facets
    • Anchor Nav
      • Single entity section
        • Toolbar (inside section slot)
          • Edit button
        • Multiple Block Layouts
          • Up to three Form Layouts per Block Layout
      • List entity section
        • Toolbar (inside section slot; connected to Grid)
          • Filter input
          • Batch delete Button
          • Add Button
        • Grid

Implementation ​

Template ​

html
<mate-vertical-layout-ng theme="spacing" style="align-items: stretch;">
    <mate-breadcrumbs-ng theme="padding">
      <mate-breadcrumb-ng> </mate-breadcrumb-ng>
    </mate-breadcrumbs-ng>
    <mate-details-ng titleText="Max Mustermann" theme="object-header">
    <mate-floating-layout-ng>
      <mate-facet-list-ng>
        <mate-facet-ng key-text="Person Nr.">1234567</mate-facet-ng>
        <mate-facet-ng key-text="Geburtsdatum">15.06.1952</mate-facet-ng>
      </mate-facet-list-ng>
      <mate-facet-list-ng>
        <mate-facet-ng key-text="Anrede">Herr</mate-facet-ng>
        <mate-facet-ng key-text="Vorname">Max</mate-facet-ng>
        <mate-facet-ng key-text="Nachname">Mustermann</mate-facet-ng>
      </mate-facet-list-ng>
    </mate-floating-layout-ng>
  </mate-details-ng>
  <mate-anchor-nav-ng theme="expand-last">
    <mate-anchor-nav-section-ng title="Personendaten">
      <mate-toolbar-ng slot="header" title-text="Personendaten" theme="section">
        <mate-button-ng>Bearbeiten</mate-button-ng>
      </mate-toolbar-ng>
      <mate-block-layout-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="Person Nr.">1234567</mate-facet-ng>
          <mate-facet-ng key-text="Geburtsdatum">15.06.1952</mate-facet-ng>
        </mate-facet-list-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="Anrede">Herr</mate-facet-ng>
          <mate-facet-ng key-text="Vorname">Max</mate-facet-ng>
          <mate-facet-ng key-text="Nachname">Mustermann</mate-facet-ng>
        </mate-facet-list-ng>
      </mate-block-layout-ng>
    </mate-anchor-nav-section-ng>
    <hr />
    <mate-anchor-nav-section-ng title="Adresse">
      <mate-toolbar-ng slot="header" title-text="Adresse" theme="section">
        <mate-button-ng>Bearbeiten</mate-button-ng>
      </mate-toolbar-ng>
      <mate-block-layout-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="Strasse">Musterstrasse</mate-facet-ng>
          <mate-facet-ng key-text="Hausnummer">1</mate-facet-ng>
        </mate-facet-list-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="PLZ">12345</mate-facet-ng>
          <mate-facet-ng key-text="Ort">Musterhausen</mate-facet-ng>
          <mate-facet-ng key-text="Land">Deutschland</mate-facet-ng>
        </mate-facet-list-ng>
      </mate-block-layout-ng>
    </mate-anchor-nav-section-ng>
    <hr />  
    <mate-anchor-nav-section-ng title="Kinder">
      <mate-toolbar-ng slot="header" title-text="Kinder" theme="section">
        <mate-button-ng>Loeschen</mate-button-ng>
      </mate-toolbar-ng>
      <mate-grid-ng [items]="childrenItems">
        <mate-grid-sort-column-ng header="Vorname" path="prename" [resizable]="true"></mate-grid-sort-column-ng>
        <mate-grid-sort-column-ng header="Nachname" path="familyName" [resizable]="true"></mate-grid-sort-column-ng>
      </mate-grid-ng>
    </mate-anchor-nav-section-ng>
  </mate-anchor-nav-ng>
</mate-vertical-layout-ng>

Component ​

typescript
@Component({
  selector: 'app-object-page',
  standalone: true,
  imports: [
    MateDetailsComponent,
    MateFacetComponent,
    MateFacetListComponent,
    MateAnchorNavComponent,
    MateAnchorNavSectionComponent,
    MateToolbarComponent,
    MateButtonComponent,
    MateGridComponent,
    MateGridSortColumnComponent,
  ],
  templateUrl: './object-page.component.html',
})
export class ObjectPageComponent {
  childrenItems = childrenData;
}