Dekoratoren: Listenelemente mit DIVs umschließen

Navigation

Veröffentlichungsdatum: 19. Dezember 2017
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Über CSS-Only Dekoratoren können Sie Listenelemente in zusätzliche HTML-Elemente, also z.B. DIVs packen. Auch eine mehrfache Verschachtelung ist möglich. In diesem Fall muss dann nur der schließende Dekorator ebenfalls den Klassennamen enthalten.

Beispiel: Telefon und E-Mail mit einem DIV umschließen innerhalb einer Listen-Variante in der listDefault.scss

-w-displayElements:thumbnail=yes,title=yes,decorator[div.listEntryContact]=yes,phone=yes,email=yes,decorator[/div]=yes;

Beispiel: Mehrere DIVs über Dekoratoren ergänzen innerhalb einer Listen-Variante in der listDefault.scss

-w-displayElements:thumbnail=yes,decorator[div.listEntryWrapper]=yes,title=yes,decorator[div.listEntryContact]=yes,phone=yes,email=yes,decorator[/div.listEntryContact]=yes,decorator[/div.listEntryWrapper]=yes;

Damit Dekoratoren genutzt werden können, darf keine individuelle Sortierung definiert sein. Stattdessen muss diese leer oder aber wie folgt gesetzt sein: -w-option-displayOrder:asDefined;