Feltételes CSS osztályok a Thymeleaf-ban

1. Áttekintés

Ebben a gyors bemutatóban megismerhetünk néhány különböző módszert a CSS-osztályok feltételes hozzáadására a Thymeleaf-ben.

Ha nem ismeri a Thymeleaf-ot, javasoljuk, hogy ellenőrizze a bevezetésünket.

2. Használata th: ha

Tegyük fel, hogy célunk a amelynek osztályait a szerver határozza meg:

 Két osztályom van: "alap" és vagy "feltétel-igaz", vagy "feltétel-hamis", a kiszolgáló oldali feltételektől függően. 

Mielőtt ezt a HTML-t kiszolgálnánk, szükségünk van egy jó módszerre a kiszolgáló számára egy állapot kiértékeléséhez, és vagy be kell foglalni a feltétel-igaz osztály vagy a feltétel-hamis osztály, valamint a bázis osztály.

A HTML-sablonok készítésekor elég gyakran feltételes logikát kell hozzáadni a dinamikus viselkedéshez.

Először is használjuk th: ha a feltételes logika legegyszerűbb formájának bemutatásához:

 Ez a HTML megismétlődik. Valószínűleg jobb megoldást akarunk. Ez a HTML megismétlődik. Valószínűleg jobb megoldást akarunk. 

Itt láthatjuk, hogy ez logikusan azt eredményezi, hogy a megfelelő CSS osztály lesz csatolva a HTML elemünkhöz, de ez a megoldás sérti a DRY elvét mert megköveteli a teljes kódblokk másolatát.

Használata th: ha Bizonyos esetekben hasznos lehet, de meg kell keresnünk egy másik módszert a CSS osztály dinamikus hozzáadására.

3. Használata th: vonz

A Thymeleaf felajánl egy olyan attribútumot, amely lehetővé teszi más attribútumok meghatározását, az úgynevezett th: vonz.

Használjuk a probléma megoldására:

 Ez a HTML egységesített, ami jó, de a Thymeleaf attribútum még mindig tartalmaz némi redundanciát. 

Lehet, hogy észrevette, hogy a bázis osztály továbbra is megismétlődik. Is, van egy specifikusabb Thymeleaf attribútum, amelyet az osztályok meghatározásakor használhatunk.

4. Használata th: osztály

A th: osztály attribútum a parancsikon th: attr = ”osztály =…” ezért használjuk inkább, elválasztva a bázis osztály a feltétel eredményéből:

 Az alap CSS osztályt még mindig String összefűzéssel kell kiegészíteni. Kicsit jobban tehetünk. 

Ez a megoldás nagyon jó, mert megfelel az igényeinknek és SZÁRAZ. Azonban, van még egy Thymeleaf attribútum, amelyből profitálhatunk.

5. Használata th: classappend

Nem lenne jó, ha teljesen elválasztanánk alaposztályunkat a feltételes logikától? Statikusan meghatározhatjuk bázis osztályra, és a feltételes logikát csak a megfelelő darabokra redukálja:

 Ez a HTML konszolidálva van, és a feltételes osztály külön van hozzáadva a statikus alaposztályhoz. 

6. Következtetés

A Thymeleaf kód minden egyes iterációjával megismerkedtünk egy hasznos feltételes technikával, amely később hasznos lehet. Végül, azt találtuk, hogy a th: classappend a legjobb kombinációt biztosítja számunkra a DRY kóddal és az aggodalom elkülönítésével, miközben célunkat is kielégíti.

Mindezek a példák egy működő Thymeleaf projektben láthatók, amely elérhető a GitHubon.


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