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

function ObjectPage() {
  return (
     <MateVerticalLayout theme="spacing" style={{ alignItems: 'stretch' }}>
        <MateBreadcrumbs theme="padding">
           <MateBreadcrumb href="#">Übergeordnet</MateBreadcrumb>
           <MateBreadcrumb>Objekt</MateBreadcrumb>
        </MateBreadcrumbs>
        <MateDetails theme="object-header">
           <MateDetailsSummary slot="summary" titleText="Max Mustermann" />
           <MateFloatingLayout>
              <MateFacetList>
                <MateFacet keyText="Person Nr.">1234567</MateFacet>
                <MateFacet keyText="Geburtsdatum">15.06.1952</MateFacet>
              </MateFacetList>
              <MateFacetList>
                <MateFacet keyText="Anrede">Herr</MateFacet>
                <MateFacet keyText="Vorname">Max</MateFacet>
                <MateFacet keyText="Nachname">Mustermann</MateFacet>
              </MateFacetList>
            </MateFloatingLayout>
          </MateDetails>
        <MateAnchorNav theme="expand-last">
           <MateAnchorNavSection name="Personendaten">
              <MateToolbar slot="header" titleText="Personendaten" theme="section">
                <MateButton>Bearbeiten</MateButton>
              </MateToolbar>
              <MateBlockLayout>
                <MateFacetList>
                  <MateFacet keyText="Person Nr.">1234567</MateFacet>
                  <MateFacet keyText="Geburtsdatum">15.06.1952</MateFacet>
                </MateFacetList>
                <MateFacetList>
                  <MateFacet keyText="Anrede">Herr</MateFacet>
                  <MateFacet keyText="Vorname">Max</MateFacet>
                  <MateFacet keyText="Nachname">Mustermann</MateFacet>
                </MateFacetList>
              </MateBlockLayout>
           </MateAnchorNavSection>
           <hr />
        <MateAnchorNavSection name="Adresse">
          <MateToolbar slot="header" titleText="Adresse" theme="section">
            <MateButton>Bearbeiten</MateButton>
          </MateToolbar>
          <MateBlockLayout>
            <MateFacetList>
              <MateFacet keyText="Strasse">Musterstrasse</MateFacet>
              <MateFacet keyText="Hausnummer">1</MateFacet>
            </MateFacetList>
            <MateFacetList>
              <MateFacet keyText="PLZ">12345</MateFacet>
              <MateFacet keyText="Ort">Musterhausen</MateFacet>
              <MateFacet keyText="Land">Deutschland</MateFacet>
            </MateFacetList>
          </MateBlockLayout>
        </MateAnchorNavSection>
        <hr />
        <MateAnchorNavSection name="Kinder">
          <MateToolbar slot="header" titleText="Kinder" theme="section">
            <MateButton>Loeschen</MateButton>
          </MateToolbar>
          <MateGrid items={childrenItems}>
            <MateGridSortColumn header="Vorname" path="prename" resizable />
            <MateGridSortColumn header="Nachname" path="familyName" resizable />
          </MateGrid>
        </MateAnchorNavSection>
      </MateAnchorNav>
    </MateVerticalLayout>
  );
}