Podmienené triedy CSS na Thymeleaf
1. Prehľad
V tomto rýchlom výučbe sa dozvieme niekoľko rôznych spôsobov, ako podmienene pridať triedy CSS do Thymeleaf.
Ak nie ste oboznámení s Thymeleaf, odporúčame vám skontrolovať náš úvod do nej.
2. Pomocou th: ak
Predpokladajme, že naším cieľom je vygenerovať a ktorých triedy určuje server:
Mám dve triedy: „základňa“ a buď „podmienka-pravda“ alebo „podmienka-nepravda“ v závislosti od stavu na strane servera.
Pred zobrazením tohto kódu HTML potrebujeme, aby server mohol vyhodnotiť stav a zahrnúť znak podmienka-pravda triedy alebo podmienka-nepravda triedy, ako aj a základňa trieda.
Pri vytváraní šablón HTML je úplne bežné, že musíte pridať určitú podmienenú logiku pre dynamické správanie.
Najprv použijeme th: ak demonštrovať najjednoduchšiu formu podmienenej logiky:
Tento kód HTML je duplikovaný. Pravdepodobne chceme lepšie riešenie. Tento kód HTML je duplikovaný. Pravdepodobne chceme lepšie riešenie.
Vidíme tu, že to logicky povedie k pripojeniu správnej triedy CSS k nášmu prvku HTML, ale toto riešenie porušuje princíp DRY pretože to vyžaduje duplikovanie celého bloku kódu.
Použitím th: ak môže byť v niektorých prípadoch určite užitočná, ale mali by sme hľadať iný spôsob, ako dynamicky pridať triedu CSS.
3. Používanie th: attr
Thymeleaf nám ponúka atribút, ktorý nám umožní definovať ďalšie atribúty, tzv th: attr.
Použime ho na vyriešenie nášho problému:
Tento HTML je konsolidovaný, čo je dobré, ale atribút Thymeleaf má v sebe stále určitú redundanciu.
Možno ste si všimli, že základňa trieda je stále duplikovaná. Tiež existuje špecifickejší atribút Thymeleaf, ktorý môžeme použiť pri definovaní tried.
4. Používanie th: trieda
The th: trieda je skratka pre th: attr = ”class =…” poďme to teda použiť spolu s oddelením základňa trieda z výsledku stavu:
K základnej triede CSS musí byť stále pripojené reťazenie reťazcov. Môžeme to urobiť o niečo lepšie.
Toto riešenie je celkom dobré, pretože vyhovuje našim potrebám a je SUCHÉ. Avšak stále existuje ďalší atribút Thymeleaf, z ktorého môžeme ťažiť.
5. Používanie th: classappend
Nebolo by pekné úplne oddeliť našu základnú triedu od podmienenej logiky? Môžeme staticky definovať naše základňa triedy a redukovať podmienenú logiku iba na príslušné časti:
Tento HTML je konsolidovaný a podmienená trieda je pripojená oddelene od statickej základnej triedy.
6. Záver
Pri každej iterácii nášho kódu Thymeleaf sme sa dozvedeli o užitočnej podmienenej technike, ktorá by sa mohla neskôr hodiť. Nakoniec zistili sme, že pomocou th: classappend poskytuje najlepšiu kombináciu DRY kódu a oddelenie záujmov a zároveň splnenie nášho cieľa.
Všetky tieto príklady možno vidieť v pracovnom projekte Thymeleaf dostupnom na GitHub.