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.


$config[zx-auto] not found$config[zx-overlay] not found