Version:

Install ​

npm i @mate-vue/facet

Import ​

vue
<script setup>
import { MateFacet, MateFacetList } from '@mate-vue/facet';
</script>

Variants ​

Stacked (Default) ​

vue
<template>
  <MateFacetList titleText="Name-Wert-Facette (Stacked)">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Straße">Hauptstraße 412</MateFacet>
    <MateFacet keyText="Postleitzahl">23456</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>

Inline ​

vue
<template>
  <MateFacetList titleText="Name-Wert-Facette (Inline)" theme="inline">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Telefon">+49 123 456789</MateFacet>
  </MateFacetList>
</template>

Right Aligned ​

vue
<template>
  <MateFacetList titleText="Right Aligned" theme="inline right-aligned">
    <MateFacet keyText="Ermächtigung">321,12 €</MateFacet>
    <MateFacet keyText="Inanspruchnahme">12.323,00 €</MateFacet>
    <MateFacet theme="success" keyText="Mehrausgaben">1.000.091,00 €</MateFacet>
    <MateFacet theme="error" keyText="Vorsteuer">-323.323,00 €</MateFacet>
  </MateFacetList>
</template>

Small ​

vue
<template>
  <MateFacetList titleText="Small" theme="inline small">
    <MateFacet keyText="key">value</MateFacet>
    <MateFacet keyText="key">value</MateFacet>
  </MateFacetList>
</template>

Icons as Keys ​

vue
<template>
  <MateFacetList titleText="Icons as keys" theme="inline">
    <MateFacet>
      <span theme="icon" slot="key">person_baseline</span>
      Max Mustermann
    </MateFacet>
    <MateFacet>
      <span theme="icon" slot="key">phone</span>
      +49 123 456789
    </MateFacet>
  </MateFacetList>
</template>

Medium ​

vue
<template>
  <MateFacetList titleText="Medium" theme="inline medium">
    <MateFacet keyText="key">value</MateFacet>
    <MateFacet keyText="key">value</MateFacet>
  </MateFacetList>
</template>

Large ​

vue
<template>
  <MateFacetList titleText="Large" theme="inline large">
    <MateFacet keyText="key">value</MateFacet>
    <MateFacet keyText="key">value</MateFacet>
  </MateFacetList>
</template>

No Header ​

vue
<template>
  <MateFacetList theme="inline">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Straße">Hauptstraße</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>

Empty Header ​

vue
<template>
  <MateFacetList theme="inline empty-header">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Straße">Hauptstraße</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>

Plain Text Facet ​

vue
<template>
  <MateFacet 
    keyText="Plain text facet" 
    valueText="Lorem ipsum dolor sit amet..." 
    theme="text" 
    style="height: 200px">
  </MateFacet>
</template>

KPI ​

vue
<template>
  <MateFacet keyText="Gesamtbestand" theme="kpi">
    916
    <span theme="badge success no-border">5.14%</span>
  </MateFacet>
</template>

KPI with Icon ​

vue
<template>
  <MateFacet keyText="Gesamtbestand" theme="kpi">
    <span theme="icon">person</span>
    <span theme="badge success no-border">5.14%</span>
  </MateFacet>
</template>

Key Separator ​

vue
<template>
  <MateFacetList titleText="With Key Separator" theme="inline key-separator">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>

Empty Value Indicator ​

vue
<template>
  <MateFacetList titleText="Empty Value" theme="inline empty-value-indicator">
    <MateFacet keyText="Manufacturer"></MateFacet>
    <MateFacet keyText="Factory">Florida, FL</MateFacet>
  </MateFacetList>
</template>

With Tooltip ​

vue
<template>
  <MateFacetList 
    titleText="With Tooltips" 
    titleTooltipText="Tooltip of TITLE">
    <MateFacet 
      keyText="key" 
      keyTooltipText="Tooltip of KEY" 
      valueText="value" 
      valueTooltipText="Tooltip of VALUE">
    </MateFacet>
  </MateFacetList>
</template>

With Value Prefix ​

vue
<template>
  <MateFacetList theme="inline">
    <MateFacet keyText="Genehmigung" valueText="Liegt vor">
      <span icon theme="icon success" slot="value-prefix">check</span>
    </MateFacet>
  </MateFacetList>
</template>