Version:

Install ​

shell
npm i @mate/facet

Import ​

js
import '@mate/facet/src/mate-facet-list';
import '@mate/facet/src/mate-facet';

Variants ​

Stacked (Default) ​

html
<mate-facet-list titleText="Name-Wert-Facette (Stacked)">
  <mate-facet keyText="Name">Max Mustermann</mate-facet>
  <mate-facet keyText="Straße">Hauptstraße 412</mate-facet>
  <mate-facet keyText="Postleitzahl">23456</mate-facet>
  <mate-facet keyText="Ort">Bautzen</mate-facet>
</mate-facet-list>

Inline ​

html
<mate-facet-list titleText="Name-Wert-Facette (Inline)" theme="inline">
  <mate-facet keyText="Name">Max Mustermann</mate-facet>
  <mate-facet keyText="Telefon">+49 123 456789</mate-facet>
</mate-facet-list>

Right Aligned ​

html
<mate-facet-list titleText="Right Aligned" theme="inline right-aligned">
  <mate-facet keyText="Ermächtigung" valueText="321,12 €"></mate-facet>
  <mate-facet keyText="Inanspruchnahme" valueText="12.323,00 €"></mate-facet>
  <mate-facet theme="success" keyText="Mehrausgaben" valueText="1.000.091,00 €"></mate-facet>
  <mate-facet theme="error" keyText="Vorsteuer" valueText="-323.323,00 €"></mate-facet>
</mate-facet-list>

Small ​

html
<mate-facet-list titleText="Small" theme="inline small">
  <mate-facet keyText="key">value</mate-facet>
  <mate-facet keyText="key">value</mate-facet>
</mate-facet-list>

Medium ​

html
<mate-facet-list titleText="Medium" theme="inline medium">
  <mate-facet keyText="key">value</mate-facet>
  <mate-facet keyText="key">value</mate-facet>
</mate-facet-list>

Large ​

html
<mate-facet-list titleText="Large" theme="inline large">
  <mate-facet keyText="key">value</mate-facet>
  <mate-facet keyText="key">value</mate-facet>
</mate-facet-list>

No Header ​

html
<mate-facet-list theme="inline">
  <mate-facet keyText="Name">Max Mustermann</mate-facet>
  <mate-facet keyText="Straße">Hauptstraße</mate-facet>
  <mate-facet keyText="Ort">Bautzen</mate-facet>
</mate-facet-list>

Empty Header ​

html
<mate-facet-list theme="inline empty-header">
  <mate-facet keyText="Name">Max Mustermann</mate-facet>
  <mate-facet keyText="Straße">Hauptstraße</mate-facet>
  <mate-facet keyText="Ort">Bautzen</mate-facet>
</mate-facet-list>

Icons as Keys ​

html
<mate-facet-list titleText="Icons as keys" theme="inline">
  <mate-facet>
    <span theme="icon" slot="key">person</span>
    Max Mustermann
  </mate-facet>
  <mate-facet>
    <span theme="icon" slot="key">phone</span>
    +49 123 456789
  </mate-facet>
  <mate-facet>
    <span theme="icon" slot="key">mail</span>
    max@beispiel.de
  </mate-facet>
  <mate-facet>
    <span theme="icon" slot="key">place</span>
    Heidestraße 123, 876534 München
  </mate-facet>
</mate-facet-list>

Plain Text Facet ​

html
<mate-facet 
  keyText="Plain text facet" 
  valueText="Lorem ipsum dolor sit amet..." 
  theme="text" 
  style="height: 200px">
</mate-facet>

KPI ​

html
<mate-facet keyText="Gesamtbestand" theme="kpi">
  916
  <span theme="badge success no-border">5.14%</span>
</mate-facet>

KPI with Icon ​

html
<mate-facet keyText="Gesamtbestand" theme="kpi">
  <span theme="icon">person</span>
  <span theme="badge success no-border">5.14%</span>
</mate-facet>

Key Separator ​

html
<mate-facet-list titleText="With Key Separator" theme="inline key-separator">
  <mate-facet keyText="Name">Max Mustermann</mate-facet>
  <mate-facet keyText="Ort">Bautzen</mate-facet>
</mate-facet-list>

Empty Value Indicator ​

html
<mate-facet-list titleText="Empty Value" theme="inline empty-value-indicator">
  <mate-facet keyText="Manufacturer"></mate-facet>
  <mate-facet keyText="Factory">Florida, FL</mate-facet>
</mate-facet-list>

With Value Prefix ​

html
<mate-facet-list theme="inline">
  <mate-facet keyText="Genehmigung" valueText="Liegt vor">
    <span icon theme="icon success" slot="value-prefix">check</span>
  </mate-facet>
</mate-facet-list>