Object Page

Component nesting

• Vertical Layout
  • Breadcumbs
  • 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>
  <MateVerticalLayout theme="spacing" style="align-items: stretch;">
    <MateBreadcrumbs theme="padding">
      <MateBreadcrumb href="#">Übergeordnet</MateBreadcrumb>
      <MateBreadcrumb>Objekt</MateBreadcrumb>
    </MateBreadcrumbs>
    <MateDetails theme="object-header" title-text="Max Mustermann">
      <MateFloatingLayout>
        <MateFacetList>
          <MateFacet key-text="Person Nr.">1234567</MateFacet>
          <MateFacet key-text="Geburtsdatum">15.06.1952</MateFacet>
        </MateFacetList>
        <MateFacetList>
          <MateFacet key-text="Anrede">Herr</MateFacet>
          <MateFacet key-text="Vorname">Max</MateFacet>
          <MateFacet key-text="Nachname">Mustermann</MateFacet>
        </MateFacetList>
      </MateFloatingLayout>
    </MateDetails>
    <MateAnchorNav theme="expand-last">
      <MateAnchorNavSection name="Personendaten">
        <MateToolbar slot="header" title-text="Personendaten" theme="section">
          <MateButton>Bearbeiten</MateButton>
        </MateToolbar>
        <MateBlockLayout>
          <MateFacetList>
            <MateFacet key-text="Person Nr.">1234567</MateFacet>
            <MateFacet key-text="Geburtsdatum">15.06.1952</MateFacet>
          </MateFacetList>
          <MateFacetList>
            <MateFacet key-text="Anrede">Herr</MateFacet>
            <MateFacet key-text="Vorname">Max</MateFacet>
            <MateFacet key-text="Nachname">Mustermann</MateFacet>
          </MateFacetList>
        </MateBlockLayout>
      </MateAnchorNavSection>
      <hr/>
      <MateAnchorNavSection name="Adresse">
        <MateToolbar slot="header" title-text="Adresse" theme="section">
          <MateButton>Bearbeiten</MateButton>
        </MateToolbar>
        <MateBlockLayout>
          <MateFacetList>
            <MateFacet key-text="Strasse">Musterstrasse</MateFacet>
            <MateFacet key-text="Hausnummer">1</MateFacet>
          </MateFacetList>
          <MateFacetList>
            <MateFacet key-text="PLZ">12345</MateFacet>
            <MateFacet key-text="Ort">Musterhausen</MateFacet>
            <MateFacet key-text="Land">Deutschland</MateFacet>
          </MateFacetList>
        </MateBlockLayout>
      </MateAnchorNavSection>
      <hr/>
      <MateAnchorNavSection name="Kinder">
        <MateToolbar slot="header" title-text="Kinder" theme="section">
          <MateButton>Loeschen</MateButton>
        </MateToolbar>
        <MateGrid :items="childrenItems">
          <MateGridSortColumn header="Vorname" path="prename" :resizable="true" />
          <MateGridSortColumn header="Nachname" path="familyName" :resizable="true" />
        </MateGrid>
      </MateAnchorNavSection>
    </MateAnchorNav>
  </MateVerticalLayout>
</template>