Object Page

HTML

  <vaadin-vertical-layout theme="spacing" style="align-items: stretch;">
    <vcf-breadcrumbs theme="padding">
      <vcf-breadcrumb href="#">Übergeordnet</vcf-breadcrumb>
      <vcf-breadcrumb>Objekt</vcf-breadcrumb>
    </vcf-breadcrumbs>
    <vaadin-details theme="object-header">
      <mate-details-summary slot="summary" title-text="Mas Mustermann"></mate-details-summary>
      <div theme="floating-layout spacing">
        <mate-facet-list>
          <mate-facet key-text="Person Nr.">1234567</mate-facet>
          <mate-facet key-text="Geburtsdatum">15.06.1952</mate-facet>
        </mate-facet-list>
        <mate-facet-list>
          <mate-facet key-text="Anrede">Herr</mate-facet>
          <mate-facet key-text="Vorname">Max</mate-facet>
          <mate-facet key-text="Nachname">Mustermann</mate-facet>
        </mate-facet-list>
      </div>
    </vaadin-details>
    <vcf-anchor-nav theme="expand-last">
      <vcf-anchor-nav-section name="Personendaten">
        <mate-toolbar slot="header" title-text="Personendaten" theme="section">
          <vaadin-button>Bearbeiten</vaadin-button>
        </mate-toolbar>
        <div class="block-container">
          <div theme="block-layout spacing">
            <mate-facet-list>
              <mate-facet key-text="Person Nr.">1234567</mate-facet>
              <mate-facet key-text="Geburtsdatum">15.06.1952</mate-facet>
            </mate-facet-list>
            <mate-facet-list>
              <mate-facet key-text="Anrede">Herr</mate-facet>
              <mate-facet key-text="Vorname">Max</mate-facet>
              <mate-facet key-text="Nachname">Mustermann</mate-facet>
            </mate-facet-list>
          </div>
        </div>
      </vcf-anchor-nav-section>
      <hr/>
      <vcf-anchor-nav-section name="Adresse">
        <mate-toolbar slot="header" title-text="Adresse" theme="section">
          <vaadin-button>Bearbeiten</vaadin-button>
        </mate-toolbar>
        <div class="block-container">
          <div theme="block-layout spacing">
            <mate-facet-list>
              <mate-facet key-text="Straße">Musterstraße</mate-facet>
              <mate-facet key-text="Hausnummer">1</mate-facet>
            </mate-facet-list>
            <mate-facet-list>
              <mate-facet key-text="PLZ">12345</mate-facet>
              <mate-facet key-text="Ort">Musterhausen</mate-facet>
              <mate-facet key-text="Land">Deutschland</mate-facet>
            </mate-facet-list>
          </div>
        </div>
      </vcf-anchor-nav-section>
      <hr/>  
      <vcf-anchor-nav-section name="Kinder">
        <mate-toolbar slot="header" title-text="Kinder" theme="section" for-grid="childrenGrid">
          <vaadin-button>Löschen</vaadin-button>
        </mate-toolbar>
        <vaadin-grid id="childrenGrid">
          <vaadin-grid-sort-column header="Vorname" path="prename" resizable></vaadin-grid-sort-column>
          <vaadin-grid-sort-column header="Nachname" path="familyName"></vaadin-grid-sort-column>
          <mate-grid-addon id="childrenGridAddon"></mate-grid-addon>
        </vaadin-grid>
      </vcf-anchor-nav-section>
    </vcf-anchor-nav>
  </vaadin-vertical-layout>