Listeneinträge über zusätzliche objektbasierte Data-Attribute formatieren

Veröffentlichungsdatum: 09. Januar 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Objektdaten können nicht nur ausgegeben, sondern auch als Data-Attribute ergänzt werden. So dienen sie z.B. als Basis für spezielle JavaScript-Funktionen oder auch zur objektabhängigen Formatierung einzelner Einträge.

Auszugebende Daten aus dem Objekt


<wd:data id="private" type="char.default">1</wd:data>
<wd:data id="free" type="char.default">0</wd:data>

CSS-Only zur Ausgabe der Objektdaten als Data-Attribute

.listDefault_varXYZ {
  ...
  -w-option-objectdataAsAttribute:'private,free';
  ...
}

HTML-Ausgabe im Listeneintrag eines Objektes

<li class="listEntry" data-private="1" data-free="0" ...

Spezielle Formatierung basierend auf den ergänzten Objektdaten

.listEntry[data-private='1'] {
  outline:solid 1px red;
}