Version:

Install ​

shell
npm i @mate-vue/anchor-nav

Import ​

vue
<script setup>
import { MateAnchorNav, MateAnchorNavSection } from '@mate-vue/anchor-nav';
</script>

Variants ​

Object section ​

vue
<template>
    <MateAnchorNav theme="expand-last">
        <MateAnchorNavSection section-title="Person data">
            <MateButton slot="header">Edit</MateButton>
            <MateBlockLayout>
                <MateFacetList>
                    <MateFacet keyText="Person No.">1234567</MateFacet>
                    <MateFacet keyText="Date of birth">15.06.1952</MateFacet>
                </MateFacetList>
                <MateFacetList>
                    <MateFacet keyText="Salutation">Herr</MateFacet>
                    <MateFacet keyText="First name">Max</MateFacet>
                    <MateFacet keyText="Last name">Mustermann</MateFacet>
                </MateFacetList>
            </MateBlockLayout>
        </MateAnchorNavSection>
    </MateAnchorNav>
</template>

List section ​

vue
<template>
    <MateAnchorNav theme="expand-last">
        <MateAnchorNavSection section-title="Foo list">
            <MateButton slot="header">Delete</MateButton>
            <MateGrid 
                    id="fooGrid" 
                    .primaryActionColumnProvider="item => { return { text: 'Edit' }; }"
                    .primaryActionIconRenderer='(root, component, model) => render(html`<span theme='icon'>edit</span>`, root)"
                    @item-action-clicked="e => console.log(`On address ${e.detail.item.fullAddress} the action ${e.detail.action.text} was clicked`)">
                <MateGridSortColumn header="Street and number" path="street"></MateGridSortColumn>
                <MateGridSortColumn header="Zip code" path="zipCode"></MateGridSortColumn>
                <MateGridSortColumn header="City" path="city"></MateGridSortColumn>
            </MateGrid>
        </MateAnchorNavSection>
    </MateAnchorNav>
</template>