Version:

Install ​

shell
npm i @vaadin-component-factory@${version.anchor-nav.web}

Import ​

javascript
import '@vaadin-component-factory/vcf-anchor-nav/src/vcf-anchor-nav';
import '@vaadin-component-factory/vcf-anchor-nav/src/vcf-anchor-nav-section';

Variants ​

Object section ​

html
<vcf-anchor-nav theme="expand-last">
    <vcf-anchor-nav-section name="Person data">
        <mate-toolbar slot="header" title-text="Person data" theme="section">
            <vaadin-button>Edit</vaadin-button>
        </mate-toolbar>
        <div class="block-container">
            <div theme="block-layout spacing">
                <mate-facet-list>
                    <mate-facet key-text="Person No.">1234567</mate-facet>
                    <mate-facet key-text="Date of birth">15.06.1952</mate-facet>
                </mate-facet-list>
                <mate-facet-list>
                    <mate-facet key-text="Salutation">Herr</mate-facet>
                    <mate-facet key-text="First name">Max</mate-facet>
                    <mate-facet key-text="Last name">Mustermann</mate-facet>
                </mate-facet-list>
            </div>
        </div>
    </vcf-anchor-nav-section>
</vcf-anchor-nav>

List section ​

html
<vcf-anchor-nav theme="expand-last">
    <vcf-anchor-nav-section name="Foo list">
        <mate-toolbar slot="header" title-text="Foo list" theme="section" for-grid="fooGrid">
            <vaadin-button>Delete</vaadin-button>
        </mate-toolbar>
        <vaadin-grid id="fooGrid">
            <vaadin-grid-sortable-column header="Street and number" path="street"></vaadin-grid-sortable-column>
            <vaadin-grid-sortable-column header="Zip code" path="zipCode"></vaadin-grid-sortable-column>
            <vaadin-grid-sortable-column header="City" path="city"></vaadin-grid-sortable-column>
            <mate-grid-addon id="fooGridAddon"></mate-grid-addon>
        </vaadin-grid>
    </vcf-anchor-nav-section>
</vcf-anchor-nav>
javascript
const gridAddon = document.querySelector('#fooGridAddon');
gridAddon.primaryActionColumnProvider = item => { return { text: 'Edit' }; };
gridAddon.primaryActionIconRenderer = (root, component, model) => render(html`<span theme='icon'>edit</span>`, root); 
gridAddon.addEventListener('item-action-clicked', e => console.log(`On address ${e.detail.item.fullAddress} the action ${e.detail.action.text} was clicked`));