Šiame straipsnyje pateikiama elemento šriftų šeimos valdymo procedūra naudojant Tailwind paslaugų programas.
Kaip valdyti elemento šriftų šeimą naudojant „Tailwind Utilities“?
Norint valdyti „Tailwind“ elemento šriftų šeimą, elementui turi būti pateikta ši priemonė:
šriftas- { šrifto šeima }
Yra trys numatytosios šriftų šeimos, kurias galima nustatyti naudojant aukščiau pateiktą priemonę. Jie apima ' serifas ', ' be “ ir „ monofoninis “.
Naudokime šias šriftų šeimas demonstracijoje naudodami „ šriftas-{šriftų šeima} “ klasėje, kad pamatytumėte, kaip tai veikia:
< div klasė = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Tai FONT-SERIF šeima
< / div >
< div klasė = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Tai FONT-SANS šeima
< / div >
< div klasė = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Tai FONT-MONO šeima
< / div >
Aukščiau pateikto kodo paaiškinimas yra toks:
- Yra trys div elementai, sukurti naudojant „ “ ir pateikiami su skirtingomis šriftų šeimomis.
- „ šrifto šeima} ” klasė pateiks nurodytą šriftų šeimą elemento tekstui.
- „ suapvalintas-xl ” klasė div elemento kampus padarys apvalius.
- „ šešėlis-lg “ klasė suteiks didelį šešėlį elementui div.
- „ teksto centras “ sulygiuos tekstą su elemento centru.
- „ py-2 “ ir „ mano-2 “ pamokos suteiks “ 8px “ užpildas ir paraštė elemento viršuje ir apačioje.
- „ bg-{color}-{number} “ klasė yra atsakinga už nurodytos spalvos elemento fono nustatymą.
Iš išvesties aišku, kad kiekvienas elementas turi skirtingą šriftų šeimą:
Taip pat galime dinamiškai keisti elemento šriftų šeimą naudodami pelės žymeklio funkciją. Norėdami iliustruoti, eikite per toliau pateiktą kodą:
< div klasė = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Tai yra FONT-MONO šeima pagal numatytuosius nustatymus< / div >Aukščiau pateiktame kode „ užveskite pelės žymeklį: font-{family} Programa yra atsakinga už elemento šriftų šeimos pakeitimą, kai tik pelės žymeklis užves virš jo. Išvestyje matyti, kad teksto šriftų šeima pasikeičia, kai vartotojas užveda pelės žymeklį virš jo:
Tai viskas apie Tailwind elemento šriftų šeimos valdymą.
Išvada
„Tailwind“ elementui galima priskirti šriftų šeimą naudojant „ šrifto šeima} ' klasė. Yra trys numatytosios šriftų šeimos, kurias teikia „Tailwind“, t. y. be ', ' serifas “ ir „ monofoninis “. Vartotojas taip pat gali pakeisti elemento šriftų šeimą, kai pasikeičia elemento būsena. Šiame straipsnyje pateikta „Tailwind“ elemento šriftų šeimos valdymo procedūra.