Ez a cikk egy elem betűtípuscsaládjának a Tailwind segédprogramok segítségével történő vezérlésére vonatkozó eljárást ismerteti.
Hogyan szabályozható egy elem betűtípuscsaládja a Tailwind Utilities segítségével?
Egy elem betűtípuscsaládjának vezérléséhez a Tailwindben a következő segédprogramot kell biztosítani az elemhez:
betűtípus- { betűtípus család }
Három alapértelmezett betűtípuscsalád állítható be a fent megadott segédprogrammal. Ezek tartalmazzák ' serif ', ' nélkül ”, és „ monó ”.
Használjuk ezeket a betűtípuscsaládokat egy bemutatóban a „ font-{fontcsalád} ” osztályban, hogy lássa, hogyan működik:
< div osztály = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Ez egy FONT-SERIF család
< / div >
< div osztály = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Ez egy FONT-SANS család
< / div >
< div osztály = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Ez egy FONT-MONO család
< / div >
A fenti kód magyarázata a következő:
- Három div elemet hoztak létre a ' ” és különböző betűtípuscsaládokkal vannak ellátva.
- A ' betűtípus család} ” osztály biztosítja a megadott betűtípuscsaládot az elem szövegéhez.
- A ' lekerekített-xl ” osztály a div elem sarkait fogja kerekíteni.
- A ' árnyék-lg ” osztály nagy árnyékot ad a div elemnek.
- A ' szövegközpont ” a szöveget az elem közepéhez igazítja.
- A ' py-2 ” és „ én-2 'az osztályok biztosítják' 8 képpont ” kitöltés és margó az elem felső és alsó irányában.
- A ' bg-{color}-{number} ” osztály felelős azért, hogy az elem hátterét a megadott színre állítsa.
A kimenetből világosan látszik, hogy minden elemnek más-más betűtípus-családja van:
A hover funkció segítségével dinamikusan is módosíthatjuk egy elem betűtípus-családját. Szemléltetésképpen menjen át az alábbi kódon:
< div osztály = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Ez egy FONT-MONO család alapértelmezés szerint< / div >A fent megadott kódban a „ lebeg: font-{family} ” segédprogram felelős az elem betűtípus-családjának megváltoztatásáért, amint az egérkurzor fölé kerül. A kimeneten látható, hogy a szöveg betűtípus-családja megváltozik, ha a felhasználó ráviszi az egérmutatót:
Ez az egész egy elem betűtípus-családjának vezérléséről szól a Tailwindben.
Következtetés
A Tailwindben egy elemhez a „ betűtípus család} ' osztály. A Tailwind három alapértelmezett betűtípuscsaládot biztosít, azaz nélkül ', ' serif ”, és „ monó ”. A felhasználó megváltoztathatja egy elem betűtípus-családját is, ha az elem állapota megváltozik. Ez a cikk a Tailwind elemeinek betűtípuscsaládjának vezérlésére vonatkozó eljárást ismerteti.